/* nf-design.css - Stage 4 DESKTOP parity layer for Norfolk Apartments (iLaunch on Divi, template family B without a booking bar).
   Loaded after nf-bundle.css + nf-live.css + nf-extra.css and before nf-mobile.css.
   Every rule here undoes something Divi adds that live never had, or restores what live's own markup and CSS did that the
   Divi wrappers change. 1250px and up must be a pixel copy of live; nothing here recolours or resizes live's look. */

/* 1. Phone menu button (added to the header for the phone and tablet design; never shown at 1170px and up). */
body.nf-site #page-container .ils-menu-toggle { display: none; }

/* 2. Phone numbers are explicit tel: links (kit rule 2026-10-07; live shows plain text, which iOS turns into its own link colour).
      They keep the surrounding text's colour, size and no underline in every state, so 1250 and up looks exactly like live.
      Class + attribute + state, with !important, so live's "#footer a", ".vcard a" and ".featureoverlay a" rules cannot recolour them.
      The contact page's number is a link on live too (underlined, as live prints it): it keeps live's own look. */
body.nf-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus),
body.nf-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; letter-spacing: inherit; }

/* 3. Keyboard focus. Divi resets ":focus { outline: 0 }"; live has no such reset and shows the browser's own ring.
      Low specificity on purpose: live's own "outline: none" rules (fancybox, slider, select) still win, as on live.
      Below 1250 nf-mobile.css draws its own AA ring. */
body.nf-site :focus-visible { outline: revert; }

/* 4. Hero slider before it starts: slidepark sets these inline when it runs; until then the list's default margin
      collapses through the wrappers and the header and hero jump once the slider starts. */
body.nf-site #page-container ul#featuremain { margin: 0; padding: 0; list-style: none; }

/* 5. Fancybox's shadow frame: the port scoped live's ".fancy-bg" base rule under #page-container, but fancybox appends #fancybox-wrap
      to <body>, so the eight shadow pieces were static and 0px tall. Live's rule, unscoped; the per-piece #fancy-bg-* rules still win on size. */
body.nf-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }

/* 6. Contact and review forms: the Divi contact-form module dressed as live's table.form (measured on live at 1440: th labels 15px Lato
      right-aligned in 37px lines with 5px 10px 5px 5px padding, 236 x 34px white inputs with a 1px #e1e1e1 border, a 609 x 98px message
      box, the required star 7px down at the right edge of each required cell, live's yellow SUBMIT with a 1px #e1e1e1 border, the
      "Required fields" note under it). Columns 115 / 261 / 115 / 261 / 115 / 329 = 1196px (live's auto table; it stops growing there and
      narrows its last cell when the container is narrower, 1250 to 1258px). Live's reCAPTCHA (an invalid iLaunch key: the cell is empty on
      live) is replaced by Divi's maths question in live's Verification cell (DELIBERATE, Stage 3). The grid applies from 1170px (live's
      layout fits there); below that nf-mobile.css stacks the form. */
body.nf-site #page-container .nf-contact-form { margin: 15px 0 0; padding: 0; background: none; }
body.nf-site #page-container .nf-contact-form .et-pb-contact-message:empty { display: none; }
body.nf-site #page-container .nf-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.nf-site #page-container .nf-contact-form form.et_pb_contact_form { margin: 0; padding: 0; }
body.nf-site #page-container .nf-contact-form p.et_pb_contact_field { margin: 0; padding: 0; width: auto; float: none; }
body.nf-site #page-container .nf-contact-form .et_pb_contact_form_label {
  display: block; position: relative; margin: 0; padding: 5px 10px 5px 5px; font: 400 15px/37px 'Lato', Arial, Helvetica, sans-serif;
  color: #333333; text-align: right; }
body.nf-site #page-container .nf-contact-form p.et_pb_contact_field .input,
body.nf-site #page-container .nf-contact-form input.et_pb_contact_captcha {
  display: block; box-sizing: border-box; margin: 5px 0 5px 5px; width: 236px; height: 34px; padding: 8px 15px; border: 1px solid #e1e1e1; border-radius: 0; background: #ffffff;
  font: 400 13px/normal 'Lato', Helvetica, sans-serif; color: #333333; box-shadow: none; }
body.nf-site #page-container .nf-contact-form p.et_pb_contact_field textarea.input { width: 609px; height: 98px; min-height: 0; margin-bottom: 11px; resize: both; }
body.nf-site #page-container .nf-contact-form p.et_pb_contact_field .input::placeholder { color: transparent; }
body.nf-site #page-container .nf-contact-form .input.et_contact_error, body.nf-site #page-container .nf-contact-form .et_pb_contact_captcha.et_contact_error { border-color: #e02b20; }
/*    the star: live's td.required background ("right 7px") sits at the right edge of the input's cell */
body.nf-site #page-container .nf-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) { position: relative; }
body.nf-site #page-container .nf-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after {
  content: ""; position: absolute; top: 7px; left: calc(100% + var(--nf-td, 261px) - 16px); width: 16px; height: 16px;
  background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat; pointer-events: none; }
body.nf-site #page-container .nf-contact-form .et_contact_bottom_container { float: none; margin: 0; padding: 0; }
body.nf-site #page-container .nf-contact-form .et_pb_contact_right { float: none; margin: 0; padding: 0; }
body.nf-site #page-container .nf-contact-form .et_pb_contact_right p.clearfix { margin: 5px 0 0 5px; padding: 0; font: 400 15px/37px 'Lato', Helvetica, sans-serif; color: #333333; float: none; display: flex; gap: 6px; align-items: flex-start; }
body.nf-site #page-container .nf-contact-form .et_pb_contact_captcha_question { font: inherit; color: inherit; }
body.nf-site #page-container .nf-contact-form input.et_pb_contact_captcha { width: 64px; margin: 0; display: inline-block; }
/*    SUBMIT: live's input.button (900 16px/46px Lato, 0 55px padding, rgba(0,0,0,0.7) on #ffcd33, 1px #e1e1e1 border from ".form input",
      1s transition; hover white on #0a89cb) */
body.nf-site #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button {
  display: inline-block; float: none; width: auto; height: 48px; margin: 5px 0 0 5px; padding: 0 55px !important; border: 1px solid #e1e1e1 !important; border-radius: 0 !important;
  background: #ffcd33 !important; color: rgba(0, 0, 0, 0.7) !important; font: 900 16px/46px 'Lato', Arial, Helvetica, sans-serif !important;
  letter-spacing: 1px !important; text-transform: uppercase; cursor: pointer; transition: all 1s; }
body.nf-site #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover { background: #0a89cb !important; color: #ffffff !important; padding: 0 55px !important; }
body.nf-site #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button::after { display: none !important; }
/*    The build's "Required fields" note (p.ils-required-note right after the form) drawn as live's em.required: 11px/22px, right-aligned with
      the star at its right, inside the table's last cell (5px left and 20px right padding, 5px under it, then the table's 15px margin). */
body.nf-site #page-container p.ils-required-note { margin: 0 0 15px 5px; padding: 0 0 5px; width: min(100% - 25px, 1171px); text-align: right; }
body.nf-site #page-container p.ils-required-note em.required { display: block; padding: 0 20px 0 0; font: normal 400 11px/22px 'Lato', Arial, Helvetica, sans-serif;
  color: #333333; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat right center; }
/*    After a successful submit Divi replaces the form with its thank-you line; the note then has nothing to annotate. */
body.nf-site #page-container .nf-contact-form:not(:has(form)) + p.ils-required-note { display: none; }

@media (min-width: 1170px) {
  /* columns: live's auto table is 1196px wide from 1259px up (115 / 261 / 115 / 261 / 115 / 329). Narrower than that (1250 to 1258px, the
     95% container is under 1196px) live narrows only the three label cells, each by a fixed share of the shortfall (measured on live at 1250,
     1252, 1255 and 1258: contact 0.614 / 0.045 / 0.341, reviews 0.516 / 0.055 / 0.429), and at 1250 to 1251px "Contact Phone" wraps onto a
     second line, making the first row 84px tall. The shortfall is max(0, 1196px - the form's width). */
  body.nf-site #page-container .nf-contact-form form.et_pb_contact_form { display: grid; max-width: 1196px; --nf-short: max(0px, 1196px - 100%);
    grid-template-columns: calc(115px - 0.614 * var(--nf-short)) 261px calc(115px - 0.045 * var(--nf-short)) 261px calc(115px - 0.341 * var(--nf-short)) minmax(261px, 1fr);
    grid-template-rows: minmax(47px, auto) 114px 53px; column-gap: 0; row-gap: 0; }
  body.nf-site.page-id-1393 #page-container .nf-contact-form form.et_pb_contact_form {
    grid-template-columns: calc(115px - 0.516 * var(--nf-short)) 261px calc(115px - 0.055 * var(--nf-short)) 261px calc(115px - 0.429 * var(--nf-short)) minmax(261px, 1fr); }
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field,
  body.nf-site #page-container .nf-contact-form .et_contact_bottom_container,
  body.nf-site #page-container .nf-contact-form .et_pb_contact_right { display: contents; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_0 > label { grid-area: 1 / 1; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_0 > .input { grid-area: 1 / 2; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_1 > label { grid-area: 1 / 3; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_1 > .input { grid-area: 1 / 4; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_2 > label { grid-area: 1 / 5; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_2 > .input { grid-area: 1 / 6; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_3 > label { grid-area: 2 / 1; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_field_3 > .input { grid-area: 2 / 2 / 3 / 5; }
  /* display:contents takes the field paragraph out of the boxes, so the star hangs off the label's own box: 261px = the input's cell; the
     message cell spans three columns (261 + 115 + 261 = 637px) */
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field:has(> textarea[data-required_mark="required"]) { --nf-td: 637px; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_right p.clearfix { grid-area: 2 / 6; position: relative; align-self: start; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; position: absolute; right: 100%; top: -5px; width: auto; padding: 5px 10px 5px 5px; font: 400 15px/37px 'Lato', Arial, Helvetica, sans-serif; color: #333333; text-align: right; display: block; visibility: visible; height: auto; margin-right: 5px; white-space: nowrap; }
  body.nf-site #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { grid-area: 3 / 1 / 4 / 7; justify-self: end; align-self: start; margin-right: 20px; }
  /* /newsletter/unsubscribe (page 1414): one field and the button in live's default 2px cell spacing, no captcha, no note (measured on live:
     label cell 115px, field cell 261px, table 382 x 111px; the button sits under the field) */
  body.nf-site.page-id-1414 #page-container .nf-contact-form form.et_pb_contact_form { grid-template-columns: 115px 261px; grid-template-rows: 47px 58px; column-gap: 2px; row-gap: 2px; padding: 2px; width: max-content; max-width: none; }
  body.nf-site.page-id-1414 #page-container .nf-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) { --nf-td: 263px; }
  body.nf-site.page-id-1414 #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { grid-area: 2 / 2; justify-self: start; margin: 5px 0 5px 5px; }
}

/* 7. Divi caps every image at max-width 100% (with height auto); live has no such cap, so a content image with its own inline size wider than
      its column (the one-bedroom page's 1000 x 563px photo in a 958px column) is drawn at its own size and overhangs the column on live.
      Here the cap squeezed it to 958px wide at its inline 563px height. Restored to live's behaviour; nf-mobile.css caps images again below 1250. */
body.nf-site #page-container :where(#main-content) img { max-width: none; }

/* 8. The keyless map frame (the Stage 3 embed in place of live's broken Maps API block) is a keyboard stop; the browser draws no ring on a
      focused iframe element, so it gets an inset ring of its own (a focus state only: nothing changes at rest). */
body.nf-site #page-container iframe.ils-map:focus { outline: 2px solid #101010; outline-offset: -2px; }