/*
Theme Name: Eye5 2026
Theme URI: https://eye5.com.au
Author: Eye5 rebuild
Description: Hybrid theme for Eye5 Optometrists. Visual parity with the outgoing
             `eye5` theme, rebuilt for PHP 8.4 and the block editor, with
             View Transitions + Speculation Rules for an SPA-like feel.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: eye5-2026
*/

/* ---------------------------------------------------------------------------
   Layout comes from assets/css/layout.css, ported from the outgoing theme.
   This file holds ONLY what is new or corrected in the rebuild.
   --------------------------------------------------------------------------- */

/* --- Ported from the old theme's Customizer "Additional CSS" ---------------
   WordPress stores Customizer CSS PER THEME (post 1521, attached to `eye5`), so
   activating eye5-2026 silently dropped 1,406 bytes of overrides. That is what
   turned the headings blue: layout.css genuinely sets #53c8e9, and this file was
   overriding it to orange/teal on the old site all along.

   It also contains the .book-online-now rules I previously failed to trace and
   pinned empirically instead - the 1001px hide, the 470px breakpoint and the
   16px/33px/10px values all match what I measured, so the empirical block has
   been deleted in favour of the real source.

   The original carried a note saying it was "temporarily" here and belonged in
   the theme stylesheet. It now is.
   -------------------------------------------------------------------------- */
.heading-text h3,
.heading-text-link h3 {
  color: #FF6600;
}

.heading-text-link .htl-right a,
.three-boxes .box h4 {
  color: #01B3A4;
}

/* START: "Book Online Now" - Mobile */
/* ==================================== */

.book-online-now {
  float: right;
  margin-right: 100px;
  margin-top: 10px;
}

.book-online-now a {
  background-color: #FFD204;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  padding: 0 16px;
  line-height: 43px;
  font-family: 'Source Sans Pro', Sans-serif;
  color: #fff;
  display: inline-block;
}

.book-online-now a:hover {
  background-color: #f2c700;
}

@media only screen and (min-width: 1001px) {
  .book-online-now {
    display: none;
  }
}

@media only screen and (max-width: 470px) {
  .book-online-now {
    margin-top: 8px;
    margin-right: 55px
  }

  .book-online-now a {
    font-size: 16px;
    line-height: 33px;
    border-radius: 10px;
  }
}

/* END: "Book Online Now" - Mobile */
/* ==================================== */

/* --- SPA feel: cross-document view transitions ---------------------------- */
@view-transition {
  navigation: auto;
}

/* Respect reduced-motion. The outgoing site already failed WCAG 1.4.4 on zoom;
   we are not adding a second motion-related violation. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Keep the masthead visually stable across the transition so the orange band
   and nav do not flash between pages. */
@media (prefers-reduced-motion: no-preference) {
  #header {
    view-transition-name: eye5-masthead;
  }
  #footer {
    view-transition-name: eye5-footer;
  }

  ::view-transition-old(root) {
    animation-duration: 180ms;
  }
  ::view-transition-new(root) {
    animation-duration: 180ms;
  }
}

/* --- Accessibility corrections carried into the rebuild ------------------- */

/* The outgoing theme had no visible focus style on nav/social links. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #00ffe9;
  outline-offset: 2px;
}

/* Screen-reader-only utility for the skip link and icon-only social links,
   which previously had no accessible name at all (empty <a class="icon-*">). */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip: auto;
  clip-path: none;
  background: #fe5200;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* --- Block image alignment ------------------------------------------------
   The outgoing theme renders aligned images WITHOUT the `wp-block-image` class,
   so they pick up WordPress's classic alignment margins: 0.5em 1em 0.5em 0
   (measured 7.5px 15px 7.5px 0 at the 15px content font size).

   Our figures DO carry `wp-block-image`, which matches a more specific modern
   rule that zeroes the margin - collapsing the gutter beside floated images and
   shifting every page containing one. layout.css has no .align* rules of its
   own, so the classic values are restored explicitly here.
   -------------------------------------------------------------------------- */
figure.alignleft,
.wp-block-image.alignleft {
  float: left;
  margin: 0.5em 1em 0.5em 0;
}

figure.alignright,
.wp-block-image.alignright {
  float: right;
  margin: 0.5em 0 0.5em 1em;
}

figure.aligncenter,
.wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* --- Client feedback fixes, 2026-07-29 ------------------------------------ */

/* Sticky nav sat above nothing: layout.css gives #header nav.fixed position:fixed
   but no z-index, so once scrolled it fell behind #fivebox and the page content.
   That is both "menu hidden behind the 5 sliders" and "can't click the top menu
   once you scroll down" - same root cause. */
/* The whole masthead needs to sit above page content, not just the nav. Raising
   #header nav.fixed alone did nothing - slider tiles and the contact-page hours
   still won the hit test. Giving #header itself a stacking context above #main
   is what actually lifts the sticky nav clear of everything. */
#header {
  position: relative;
  z-index: 9000;
}

#header nav.fixed {
  z-index: 10000;
}

/* Giving #main its own stacking context at z-index 0 pins ALL page content -
   including #fivebox and its tiles - below the fixed nav, regardless of what
   z-index individual children set. Raising the nav alone was not enough: the
   slider tiles still won the paint order (verified with elementFromPoint on a
   nav link while scrolled). */
#main {
  position: relative;
  z-index: 0;
}

/* The dropdown closed too eagerly because there is a dead gap between the parent
   item and its submenu; bridging it with padding keeps hover intent alive. */
#header nav .wrapper > ul > li > ul {
  padding-top: 4px;
}

/* Hero wordmark was hard-coded to font-size:300px with white-space:nowrap, so
   "OPTOMETRIST" overflowed and got clipped at anything below ~1700px. Scale it
   to the viewport instead, capped at the original size so wide screens are
   unchanged. */
/* Hero title: one line, scaled to fit the banner.
   layout.css hard-codes 300px with nowrap + overflow:hidden + ellipsis, so long
   titles became "Second Opini...". Allowing them to wrap instead pushed the text
   out of the hero and over the body copy. Both wrong.
   header.php emits --eye5-title-len (character count); we divide the available
   width by it to derive a size that always fits on one line. 0.42em is the
   average glyph width of futura-pt-condensed, measured. Capped at the original
   300px so short titles are unchanged. */
#header .featuretxt h1 {
  font-size: min(300px, calc(88vw / (var(--eye5-title-len, 11) * 0.42)));
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

/* NOTE: line-height is deliberately NOT overridden here. .featuretxt is a fixed
   240px band and layout.css sets the h1's line-height to match it exactly (240px,
   dropping to 120px then 60px at its breakpoints). That equality is what centres
   the title vertically in the band. Setting a unitless line-height broke the
   centring at every font size - titles sat low in the banner. Only font-size
   needs to change to make long titles fit. */

@media only screen and (max-width: 1000px) {
  #header .featuretxt h1 {
    font-size: min(150px, calc(88vw / (var(--eye5-title-len, 11) * 0.42)));
  }
}

/* --- Contact form placeholder (awaiting Jotform id) ----------------------- */
.eye5-form-placeholder {
  padding: 24px 28px;
  border: 2px dashed #01b3a4;
  border-radius: 6px;
  background: #f7f7f7;
  margin: 24px 0;
}

.eye5-form-placeholder p {
  margin: 0 0 8px;
}

.eye5-form-placeholder p:last-child {
  margin-bottom: 0;
}

/* --- Jotform embed -------------------------------------------------------- */
.eye5-jotform-embed {
  margin: 24px 0;
}

.eye5-jotform-embed iframe {
  display: block;
  width: 100%;
}

/* --- Hamburger button reset ----------------------------------------------
   #toggle was a <div> in the old theme; the rebuild made it a <button> for
   keyboard accessibility, which pulled in the browser's default button chrome -
   grey background, border and padding - showing as a grey box overlapping the
   "Book Online Now" pill. Strip the chrome, keep the semantics.
   -------------------------------------------------------------------------- */
#header nav #toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  z-index: 2;
}

/* NOTE: do NOT add `font: inherit` above. layout.css gives [class^="icon-"] the
   'icomoon' font-family, and this id selector is more specific - `font: inherit`
   silently overrode it and the hamburger glyph stopped rendering entirely,
   leaving an invisible button. */

#header nav #toggle:focus-visible {
  outline: 3px solid #00ffe9;
  outline-offset: 2px;
}

/* --- Mobile sub-menus -----------------------------------------------------
   layout.css has NO .sub-menu rules at all, so on mobile the child pages were
   simply unreachable - the nav only ever slid the top level open. Adds an
   expand control per parent item.
   -------------------------------------------------------------------------- */
/* The expand control is injected into every parent item regardless of viewport,
   so it MUST be hidden by default - otherwise it renders as a raw browser button
   in the desktop nav. Only the mobile query below turns it on. */
.submenu-toggle {
  display: none;
}

@media only screen and (max-width: 1000px) {
  #header nav ul.menu li {
    position: relative;
  }

  #header nav ul.menu .sub-menu {
    display: none;
  }

  #header nav ul.menu li.submenu-open > .sub-menu {
    display: block;
  }

  /* font-size MUST be absolute here. layout.css sets `#header nav ul { font-size: 0 }`
     to strip inline-block whitespace, so any em/% value computes to ZERO - the links
     render at 0px and the sub-menu looks like an empty white box. */
  #header nav ul.menu .sub-menu a {
    display: block;
    padding: 10px 20px 10px 36px;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
  }

  #header nav ul.menu .sub-menu {
    background: #ffffff;
    padding: 6px 0;
  }

  #header nav ul.menu .sub-menu li {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* Full-height control with a divider so it clearly belongs to the row. The
     first version sat flush against the screen edge while the labels are
     centred, so it read as a stray arrow rather than a tappable expander. */
  .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 64px;
    height: auto;
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0;
    cursor: pointer;
    z-index: 3;
    -webkit-appearance: none;
    appearance: none;
  }

  .submenu-toggle::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-right: 3px solid #00ffe9;
    border-bottom: 3px solid #00ffe9;
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 150ms ease;
  }

  li.submenu-open > .submenu-toggle {
    background: rgba(0, 255, 233, 0.12);
  }

  li.submenu-open > .submenu-toggle::before {
    transform: rotate(-135deg) translate(-3px, -3px);
  }

  .submenu-toggle:focus-visible {
    outline: 3px solid #00ffe9;
    outline-offset: -3px;
  }
}

/* --- Mobile sub-menu link colours ----------------------------------------
   Sub-menu links inherited the orange #fe5200 on a white background - very low
   contrast, so the items read as blank until interacted with. Black by default,
   brand teal on hover / focus / current page.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1000px) {
  #header nav ul.menu .sub-menu a,
  #header nav ul.menu .sub-menu li a {
    color: #121212;
  }

  #header nav ul.menu .sub-menu a:hover,
  #header nav ul.menu .sub-menu a:focus,
  #header nav ul.menu .sub-menu .current-menu-item > a,
  #header nav ul.menu .sub-menu .current_page_item > a,
  #header nav ul.menu .sub-menu .current-menu-ancestor > a {
    color: #01b3a4;
  }

  /* --- Masthead alignment ------------------------------------------------
     Measured: the hamburger centre sat 2px above the Book Online Now pill at
     tablet widths and 5px above at phone widths, and the horizontal gap was
     only 12px on small screens. Nudged into line with a little more breathing
     room between the two. */
  #header nav #toggle {
    top: 10px;
  }

  #mobile-cta {
    margin-right: 114px;
  }
}

@media only screen and (max-width: 470px) {
  #header nav #toggle {
    top: 13px;
  }

  #mobile-cta {
    margin-right: 69px;
  }
}