/* The Lantern — Responsive & Accessibility QA baseline v0.16
   Additive safety layer. Designed to improve keyboard use, touch/reflow,
   reduced-motion support, anchor positioning, and small-screen resilience
   without changing approved desktop compositions. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

img,svg,video,canvas{
  max-width:100%;
}

/* Sticky header-safe in-page destinations. */
[id]{
  scroll-margin-top:104px;
}

/* Keep long utility copy/URLs from creating horizontal traps. */
.lantern-shell,
.lantern-shell main,
.lantern-shell section,
.lantern-shell article,
.lantern-shell aside,
.lantern-shell div{
  min-width:0;
}

.lantern-utility-page,
.lantern-contact-form,
.lantern-privacy-sections,
.lantern-footer{
  overflow-wrap:break-word;
}

/* Consistent visible keyboard focus across the reader-facing site. */
:where(
  .lantern-shell a,
  .lantern-shell button,
  .lantern-shell summary,
  .lantern-shell input,
  .lantern-shell select,
  .lantern-shell textarea,
  .lantern-footer a
):focus-visible{
  outline:2px solid var(--lantern-pale,#e0bd7a);
  outline-offset:4px;
}

.lantern-btn:focus-visible,
.lantern-contact-route-grid a:focus-visible{
  box-shadow:0 0 0 4px rgba(224,189,122,.14);
}

/* WordPress skip-link: make sure it becomes unmistakably visible when used. */
.skip-link.screen-reader-text:focus{
  position:fixed!important;
  top:10px!important;
  left:10px!important;
  z-index:10000!important;
  clip:auto!important;
  clip-path:none!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:12px 16px!important;
  overflow:visible!important;
  border:1px solid var(--lantern-gold,#c89b55)!important;
  border-radius:8px!important;
  background:#071018!important;
  color:#efe6d2!important;
  font:600 .78rem/1.2 Inter,system-ui,sans-serif!important;
  letter-spacing:.08em!important;
  text-decoration:none!important;
}

/* Native details/summary interactions are part of the world; retain a clear
   keyboard affordance without making the hidden layer visually loud. */
.lantern-shell summary{
  cursor:pointer;
}

/* Current-page navigation state is set by navigation.js. */
.lantern-nav a[aria-current="page"],
.lantern-footer a[aria-current="page"]{
  color:#fff;
}

.lantern-nav a[aria-current="page"]::after{
  content:"";
  display:block;
  width:18px;
  height:1px;
  margin:7px auto 0;
  background:rgba(224,189,122,.62);
}

/* Input focus already has a soft glow in utility.css; preserve the visible
   outline as well for high-confidence keyboard navigation. */
.lantern-field input:focus-visible,
.lantern-field select:focus-visible,
.lantern-field textarea:focus-visible{
  outline:2px solid rgba(224,189,122,.78);
  outline-offset:2px;
}

/* Mobile/tablet touch and reflow pass. */
@media(max-width:900px){
  .lantern-nav a{
    box-sizing:border-box;
    min-height:48px;
    display:flex!important;
    align-items:center;
  }

  .lantern-nav a[aria-current="page"]::after{
    width:1px;
    height:18px;
    margin:0 0 0 auto;
  }

  .lantern-footer nav a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  /* Prevent hover-only motion from feeling like a required interaction on touch. */
  @media(hover:none){
    .lantern-book:hover img,
    .lantern-volume--featured:hover .lantern-volume__image img,
    .lantern-about-promises article:hover,
    .lantern-contact-route-grid a:hover{
      transform:none;
    }
  }
}

@media(max-width:620px){
  /* Keep buttons and links inside the viewport even with larger text settings. */
  .lantern-actions,
  .lantern-begin-trailhead__actions,
  .lantern-contact-form__footer{
    max-width:100%;
  }

  .lantern-btn{
    box-sizing:border-box;
    max-width:100%;
    white-space:normal;
    text-align:center;
    line-height:1.25;
  }

  /* Footer remains useful rather than becoming a compressed line of links. */
  .lantern-footer nav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
    row-gap:4px;
  }

  .lantern-footer nav a{
    width:100%;
  }

  /* Headings outside the cinematic heroes still need safe reflow. */
  :where(
    .lantern-section,
    .lantern-begin-section,
    .lantern-books-section,
    .lantern-identity-section,
    .lantern-mountains-section,
    .lantern-about-section,
    .lantern-letters-section,
    .lantern-press-section,
    .lantern-utility-section
  ) :where(h2,h3){
    max-width:100%;
    overflow-wrap:break-word;
  }
}

@media(max-width:420px){
  /* At genuinely narrow widths, dual CTAs become more readable as a stack. */
  .lantern-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .lantern-actions .lantern-btn{
    width:100%;
  }

  .lantern-footer nav{
    grid-template-columns:1fr;
  }
}

/* Short landscape phones: reduce only general section breathing room.
   Cinematic hero positioning remains controlled by the page-specific styles. */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .lantern-section,
  .lantern-begin-section,
  .lantern-books-section,
  .lantern-identity-section,
  .lantern-mountains-section,
  .lantern-about-section,
  .lantern-letters-section,
  .lantern-press-section,
  .lantern-utility-section{
    padding-top:64px;
    padding-bottom:64px;
  }
}

/* Respect reduced motion globally. Individual page rules remain in place,
   but this catches future animations/transitions added elsewhere. */
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto!important;
  }

  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
}

/* Windows high-contrast / forced-color safety. */
@media(forced-colors:active){
  .lantern-btn,
  .lantern-menu-toggle,
  .lantern-contact-form,
  .lantern-contact-route-grid a,
  .lantern-volume,
  .lantern-book{
    border:1px solid ButtonText;
  }

  .lantern-btn--solid{
    forced-color-adjust:auto;
  }
}