/* =========================================================================
   WOF site styles — hero slideshow, footer social band, clean nav dropdown.
   Lives as a real enqueued stylesheet (mu-plugin) so it can't be wiped by a
   Customizer / Additional-CSS reset. Loaded site-wide after the theme stylesheet.
   ========================================================================= */

/* ---------- Homepage hero slideshow ---------- */
.wof-hero{
  position:relative; width:100%; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#111;
}
body.home .wp-site-blocks{ padding-top:0 !important; }
body.home .entry-content{ margin-top:0 !important; }
body.home header.wp-block-template-part{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:opacity .45s ease, transform .45s ease;
}
html:not(.wof-scrolled) body.home header.wp-block-template-part{
  opacity:0; transform:translateY(-100%); pointer-events:none;
}
html.wof-scrolled body.home header.wp-block-template-part{
  opacity:1; transform:none; pointer-events:auto;
  background:var(--wof-header-bg, #faf9f6);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.wof-hero__bg{ position:absolute; inset:0; z-index:0; }
.wof-hero__layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease; will-change:opacity;
}
.wof-hero__layer.is-active{ opacity:1; }
.wof-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.26) 0%, rgba(0,0,0,.5) 100%);
}
.wof-hero__logo{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  height:60px !important; width:auto !important; max-width:none; z-index:2;
  filter:brightness(0) invert(1); opacity:.96;
}
.wof-hero__inner{ position:relative; z-index:2; text-align:center; color:#fff; padding:2rem 1.5rem; }
.wof-hero__title{
  font-family:"Literata",Georgia,serif; color:#fff !important;
  font-size:clamp(1.2rem,3vw,2.1rem); font-weight:500; letter-spacing:.3px; line-height:1.1;
  margin:0 0 .55rem; text-shadow:0 2px 20px rgba(0,0,0,.55);
}
.wof-hero__tag{
  font-family:"Literata",Georgia,serif; color:#f1f1ef !important;
  font-size:clamp(.85rem,1.6vw,1.15rem); font-weight:400; letter-spacing:.04em; text-transform:none;
  margin:0 0 1.9rem; text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.wof-hero__enter{
  display:inline-block; color:#fff !important; text-decoration:none;
  font-size:.78rem; letter-spacing:.3em; text-transform:lowercase;
  padding:.45rem 1.35rem .45rem 1.55rem;
  border:1px solid rgba(255,255,255,.85); border-radius:2px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.wof-hero__enter:hover,.wof-hero__enter:focus{ background:#fff; color:#111 !important; border-color:#fff; }
.wof-hero__social{
  position:absolute; left:50%; bottom:56px; z-index:2; transform:translateX(-50%);
  display:flex; align-items:center; gap:1.15rem;
}
.wof-hero__social a{ color:#fff; opacity:.82; display:inline-flex; transition:opacity .25s ease, transform .25s ease; }
.wof-hero__social a:hover,.wof-hero__social a:focus{ opacity:1; transform:translateY(-2px); }
.wof-hero__social svg{ width:20px; height:20px; display:block; }
.wof-hero__scroll{ position:absolute; left:50%; bottom:20px; z-index:2; transform:translateX(-50%); width:24px; height:16px; }
.wof-hero__scroll span{
  display:block; width:12px; height:12px; margin:0 auto;
  border-right:2px solid rgba(255,255,255,.85); border-bottom:2px solid rgba(255,255,255,.85);
  transform:rotate(45deg); animation:wofBounce 1.8s ease-in-out infinite;
}
@keyframes wofBounce{
  0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.55; }
  50%{ transform:rotate(45deg) translate(3px,3px); opacity:1; }
}
.wof-hero__anchor{ display:block; height:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  .wof-hero__layer{ transition:none; transform:none; }
  .wof-hero__scroll span{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Footer social band (centered light band above dark footer) ---------- */
.wof-footer-social{ display:flex; align-items:center; justify-content:center; gap:1.3rem; }
.wof-footer-social a{ color:#1c1b19; opacity:.6; display:inline-flex; transition:opacity .25s ease, transform .25s ease; }
.wof-footer-social a:hover,.wof-footer-social a:focus{ opacity:1; transform:translateY(-2px); }
.wof-footer-social svg{ width:20px; height:20px; display:block; }
.wof-social-band{ border:0; }

/* ---------- Clean, subtle "see" dropdown (no hard box) ---------- */
.wp-block-navigation .wp-block-navigation__submenu-container{
  border:none !important; border-radius:5px;
  background:#fbfaf8 !important; box-shadow:0 10px 30px rgba(0,0,0,.10) !important;
  padding:.45rem 0 !important; min-width:12rem;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:.32rem 1.15rem !important; color:#9a9a95 !important; font-size:.95rem;
  border:none !important; transition:color .2s ease;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.wp-block-navigation__submenu-container .current-menu-item>.wp-block-navigation-item__content{
  color:#1c1b19 !important; background:transparent !important;
}

/* ---------- About page: tighten the photo + quote into a centered pair ----------
   Default was the full 1340px wide-width with a 56px gap, which pushed the photo
   to the left edge and the quote to the right. */
body.page-id-6360 .entry-content > .wp-block-columns:first-of-type{
  max-width:1000px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:2.5rem !important;
}

/* ---------- Header brand: owl mark + "photography by wasim." in the hero's serif ---------- */
.wof-brand{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none !important;
}
.wof-brand__owl{
  height:34px !important; width:auto !important; max-width:none;
  display:block; flex:none;
}
.wof-brand__text{
  font-family:"Literata",Georgia,serif;
  font-size:1.2rem; font-weight:500; letter-spacing:.2px; line-height:1;
  color:#1c1b19; white-space:nowrap;
  transition:opacity .25s ease;
  /* Optical centering. Measured: the owl mark's ink centroid sits 17.5px above
     the image's geometric centre (mass is in the head/ears), which at 34px tall
     = 2.2px. So the owl READS high and box-centred text reads low. Nudge to match. */
  position:relative; top:-2.2px;
}
.wof-brand:hover .wof-brand__text,
.wof-brand:focus .wof-brand__text{ opacity:.6; }
@media(max-width:600px){
  .wof-brand__owl{ height:28px !important; }
  .wof-brand__text{ font-size:1rem; }
}

/* About page: center the bio text + buttons (leaves the Instagram feed block alone) */
body.page-id-6360 .entry-content > .wp-block-group:not(.alignwide) p,
body.page-id-6360 .entry-content > .wp-block-group:not(.alignwide) h2,
body.page-id-6360 .entry-content > .wp-block-group:not(.alignwide) h3,
body.page-id-6360 .entry-content > .wp-block-group:not(.alignwide) li{
  text-align:center;
}
body.page-id-6360 .entry-content > .wp-block-group:not(.alignwide) .wp-block-buttons{
  justify-content:center;
}

/* ---------- Homepage: tighten the gap between content and footer ---------- */
body.home main{ padding-bottom:0 !important; margin-bottom:0 !important; }
body.home footer.wp-block-template-part{ margin-top:0 !important; }
.wof-social-band{ padding-top:1.4rem !important; padding-bottom:1.4rem !important; }

/* ---------- Email capture (wof-subscribe) ---------- */
.wof-sub{ font-family:inherit; }
.wof-sub__heading{
  font-family:"Literata",Georgia,serif; color:#1c1b19;
  font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:500; letter-spacing:.01em;
  margin:0 0 .4rem;
}
.wof-sub__text{ color:#6b6a66; font-size:.98rem; line-height:1.5; margin:0 0 1.1rem; }
.wof-sub__msg{
  color:#3d5a3d; background:#eef2ec; border:1px solid #d7e0d3;
  border-radius:3px; padding:.5rem .85rem; font-size:.9rem; margin:0 0 1rem;
}
.wof-sub__form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.wof-sub__input{
  flex:1 1 220px; min-width:0;
  padding:.72rem .95rem; font-size:1rem; color:#1c1b19;
  background:#fff; border:1px solid #d8d6cf; border-radius:3px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wof-sub__input:focus{
  outline:none; border-color:#1c1b19; box-shadow:0 0 0 3px rgba(28,27,25,.08);
}
.wof-sub__btn{
  flex:0 0 auto; cursor:pointer;
  padding:.72rem 1.5rem; font-size:.8rem; letter-spacing:.18em; text-transform:lowercase;
  color:#fff; background:#1c1b19; border:1px solid #1c1b19; border-radius:3px;
  transition:background .25s ease, color .25s ease;
}
.wof-sub__btn:hover,.wof-sub__btn:focus{ background:#fff; color:#1c1b19; }
/* honeypot — visually gone, still in the DOM for bots to trip on */
.wof-sub__hp{ position:absolute !important; left:-9999px !important; height:0; overflow:hidden; }

/* Ribbon variant: the centered homepage band */
.wof-sub--ribbon{
  max-width:640px; margin:0 auto; text-align:center;
}
.wof-sub--ribbon .wof-sub__form{ justify-content:center; }
.wof-sub--ribbon .wof-sub__input{ flex:1 1 300px; }

/* Footer variant: compact, centered, and legible on the DARK footer bg */
.wof-sub--footer{ max-width:340px; margin:0 auto; text-align:center; }
.wof-sub--footer .wof-sub__heading{ color:#f2f0e9; font-size:1rem; margin-bottom:.3rem; }
.wof-sub--footer .wof-sub__text{ color:#c7c4bc; font-size:.86rem; margin-bottom:.75rem; }
.wof-sub--footer .wof-sub__form{ justify-content:center; flex-wrap:nowrap; }
.wof-sub--footer .wof-sub__input{ flex:1 1 auto; min-width:0; padding:.55rem .7rem; font-size:.9rem; }
.wof-sub--footer .wof-sub__btn{
  flex:0 0 auto; padding:.55rem 1rem;
  background:#f2f0e9; color:#1c1b19; border-color:#f2f0e9;
}
.wof-sub--footer .wof-sub__btn:hover,.wof-sub--footer .wof-sub__btn:focus{ background:#fff; color:#1c1b19; }

/* Homepage carries its own ribbon below Field Notes, so hide the footer band there only. */
body.home .wof-footer-signup{ display:none !important; }

@media (max-width:600px){
  .wof-sub__form{ flex-direction:column; }
  .wof-sub__btn{ width:100%; }
}

/* ============================================================================
   Mobile nav drawer — self-contained checkbox-hack (no core-block/JS/:has()
   dependency, so LiteSpeed can't strip it on cache/CCSS regen). Replaces the
   native wp:navigation overlay, which broke on mobile (showed only "see").
   ========================================================================== */
.wof-mobile-nav{ display:none; }
.wof-nav-cb{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }

@media (max-width:782px){
  /* swap the desktop inline nav for the drawer trigger */
  .wof-desktop-nav{ display:none !important; }
  .wof-mobile-nav{ display:flex; align-items:center; }

  /* hamburger */
  .wof-burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:30px; height:30px; cursor:pointer; position:relative; z-index:5;
    -webkit-tap-highlight-color:transparent;
  }
  .wof-burger span{
    display:block; width:24px; height:2px; border-radius:2px; background:#1c1b19;
  }

  /* scrim */
  .wof-scrim{
    position:fixed; inset:0; background:rgba(28,27,25,.42);
    opacity:0; visibility:hidden; z-index:1000;
    transition:opacity .3s ease, visibility .3s ease; cursor:pointer;
  }

  /* drawer panel */
  .wof-drawer{
    position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(84vw,340px);
    background:#fbfaf8; z-index:1001; box-sizing:border-box;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-14px 0 44px rgba(0,0,0,.14);
    display:flex; flex-direction:column;
    padding:1.3rem 1.5rem 2rem;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .wof-drawer *{ box-sizing:border-box; }

  /* open state */
  .wof-nav-cb:checked ~ .wof-scrim{ opacity:1; visibility:visible; }
  .wof-nav-cb:checked ~ .wof-drawer{ transform:translateX(0); }

  /* drawer top row: brand + close */
  .wof-drawer__top{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.4rem;
  }
  .wof-drawer__brand{
    font-family:"Literata",Georgia,serif; font-size:1.02rem; font-weight:500;
    color:#1c1b19; line-height:1;
  }
  .wof-close{
    font-size:1.8rem; line-height:1; color:#1c1b19; cursor:pointer;
    padding:0 .1rem; margin:-.3rem -.2rem 0 0; -webkit-tap-highlight-color:transparent;
  }

  /* "see" section eyebrow */
  .wof-drawer__eyebrow{
    display:block; padding:.5rem 0;
    font-family:"Literata",Georgia,serif; font-size:1.42rem; font-weight:500;
    color:#1c1b19; margin:0 0 .1rem;
  }

  /* the seven photography links */
  .wof-drawer__link{
    display:block; padding:.4rem 0; font-size:1.02rem; color:#4a4944;
    text-decoration:none; transition:color .18s ease;
  }
  .wof-drawer__link:hover,.wof-drawer__link:focus{ color:#1c1b19; }

  .wof-drawer__rule{
    border:0; border-top:1px solid #e7e5de; margin:1rem 0 .9rem;
  }

  /* read / meet / buy — the primary destinations */
  .wof-drawer__primary{
    display:block; padding:.5rem 0;
    font-family:"Literata",Georgia,serif; font-size:1.42rem; font-weight:500;
    color:#1c1b19; text-decoration:none; transition:opacity .18s ease;
  }
  .wof-drawer__primary:hover,.wof-drawer__primary:focus{ opacity:.6; }
}