/*
 * ICTN supplement — a handful of styles for markup the theme adds that the
 * source did not (so they aren't in the compiled Tailwind build): the
 * accessibility skip-link, and defensive rules. Loaded after theme.css.
 */

.ictn-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 100;
  background: var(--ink, #131313);
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}
.ictn-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/*
 * Hero spacing tuning (front page).
 *  - Reduce the generous top space above the title/book.
 *  - Restore the gap between the headline and the quote: the Tailwind `mt-10`
 *    on the <figure> is overridden by a WordPress/plugin `figure` margin reset,
 *    so we set it here (scoped, !important) and give it slightly more room.
 */
.ictn-hero {
  min-height: 82vh;
}
.ictn-hero-inner {
  padding-top: 6rem;    /* was ~11rem */
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .ictn-hero-inner {
    padding-top: 6.5rem;
    padding-bottom: 5rem;
  }
}
.ictn-hero-quote {
  margin-top: 3.5rem !important; /* headline → quote gap */
}

/*
 * FIGURE MARGIN FIX (important).
 * WordPress/WooCommerce ship an *unlayered* rule — `:where(figure){margin:0 0 1em}`
 * — and Tailwind v4 puts its spacing utilities in `@layer utilities`. Unlayered
 * CSS beats layered CSS regardless of specificity, so margin utilities work on
 * <div>/<p>/<h2> but silently compute to 0 on every <figure> (e.g. the Featured
 * Offerings images lose the gap above them and gain an unwanted bottom margin).
 * We neutralise the WP figure margin in theme content, then re-assert the top
 * margins the templates use on <figure>. Scoped to <figure> only — nothing else
 * is affected by the WP rule.
 */
main figure,
.ictn-shop figure { margin: 0; }

figure.mt-3 { margin-top: 0.75rem; }
figure.mt-4 { margin-top: 1rem; }
figure.mt-6 { margin-top: 1.5rem; }
figure.mt-8 { margin-top: 2rem; }
figure.mt-10 { margin-top: 2.5rem; }
figure.mt-12 { margin-top: 3rem; }

/*
 * Featured-image caption plugin (fsmcfi) compatibility.
 * That plugin wraps every thumbnail in <figure class="wp-caption fsmcfi-fig
 * featured">, which sits BETWEEN our fixed-ratio image containers and the
 * <img>. That breaks the object-cover fill — the image sizes to the figure's
 * natural height instead of the container, giving inconsistent heights with
 * cream gaps (blog cards, event rows, etc.). Make the wrapper fill the
 * container so the image covers it consistently.
 */
.fsmcfi-fig,
figure.wp-caption.featured {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: 0;
}
.fsmcfi-fig > img,
figure.wp-caption.featured > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/*
 * Mobile overflow guard.
 * Featured cards (blog + events) use a decorative bronze offset box
 * (`absolute -inset-4 … -rotate-1`) that pokes past the container on narrow
 * screens, causing horizontal scroll + layout shift. Clip stray horizontal
 * overflow inside the content area (the sticky header sits outside <main>, so
 * it is unaffected), and on phones tuck the offset box in and drop the rotation
 * so the featured image sits square and centred.
 */
main {
  overflow-x: clip;
}
@media (max-width: 767px) {
  .bg-bronze\/15 {
    inset: -0.5rem;
    transform: none;
  }
}

/*
 * Wrap long unbroken strings (e.g. raw URLs pasted into excerpts / post
 * content). On mobile these forced rows wider than the viewport, pushing
 * images off-centre and cutting text off. This lets them break to fit.
 */
main p,
main h1,
main h2,
main h3,
main h4,
main li,
main a,
main figcaption,
main blockquote,
.ictn-prose {
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
 * Header background — solid, not translucent. The source uses a 60% "ghost"
 * background at the top of the page; on the WP build that reads as washed-out
 * over shop/content, so we force an opaque background in both scroll states.
 * (Overrides the bg-background/60 + bg-background/95 utilities on the header.)
 */
.ictn-site-header {
  background-color: var(--background, #faf9f6) !important;
}

/*
 * Mobile Store sub-menu — indented list of categories under the Store link,
 * mirroring the desktop mega-menu (rendered by ICTN_Nav_Walker_Mobile).
 */
.ictn-mobile-substore {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 0 1rem;
  border-left: 2px solid var(--rule, #dcd8d0);
}
.ictn-mobile-substore li {
  border: 0;
}
.ictn-mobile-substore a {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/*
 * Custom logo sizing. the_custom_logo() outputs <img class="custom-logo">
 * without the theme's utility classes, so constrain it here. Header height is
 * adjustable in Appearance → Customize → Site Identity ("Logo height"); the
 * value there overrides the 2rem default via inline CSS (see inc/customizer.php).
 */
.ictn-site-header .custom-logo {
  height: 2rem;   /* 32px — matches the source h-8 */
  width: auto;
  display: block;
}
.ictn-site-header .custom-logo-link {
  display: inline-flex;
  line-height: 0;
}
footer .custom-logo {
  height: 2.5rem; /* 40px — matches the source footer h-10 */
  width: auto;
  display: block;
}

/* Ensure the mobile nav is fully hidden when collapsed even if a cached
   utility is stripped by an optimiser. */
.ictn-site-header [data-ictn-mobile-nav].hidden {
  display: none;
}

/*
 * Homepage "Services" tooltips — keyboard + touch reveal.
 * The source only reveals on hover (group-hover/svc). The brief requires the
 * tooltip content to remain reachable via keyboard focus and on touch devices,
 * so each service <li> is focusable (tabindex=0) and we reveal on :focus-within.
 * Matches the hover end-state exactly (opacity 1, no scale/translate).
 */
li.group\/svc:focus-within > [role="tooltip"] {
  opacity: 1;
  transform: none;
}
li.group\/svc:focus-within > div .border-b {
  border-bottom-color: rgb(255 255 255 / 0.4);
}
li.group\/svc:focus-visible {
  outline: 2px solid var(--bronze, #8b0f03);
  outline-offset: 2px;
}

/*
 * Editorial prose for post/page body content (the_content output). Blog and
 * event bodies in the source are paragraphs (already styled by the wrapper);
 * these rules keep any lists, links, sub-headings, and quotes on-brand for
 * generic pages (e.g. Privacy Policy).
 */
.ictn-prose a {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--bronze, #8b0f03) 60%, transparent);
  text-underline-offset: 4px;
}
.ictn-prose a:hover { color: var(--bronze-deep, #6b0c02); }
.ictn-prose strong { font-weight: 600; }
.ictn-prose em { font-style: italic; }
.ictn-prose h2,
.ictn-prose h3 {
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  color: var(--ink, #1a1a17);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}
.ictn-prose h2 { font-size: 1.9rem; }
.ictn-prose h3 { font-size: 1.5rem; }
.ictn-prose ul,
.ictn-prose ol { margin: 1.25rem 0; padding-left: 1.5rem; }
.ictn-prose ul { list-style: disc; }
.ictn-prose ol { list-style: decimal; }
.ictn-prose li { margin: 0.4rem 0; }
.ictn-prose blockquote {
  border-left: 2px solid var(--bronze, #8b0f03);
  padding-left: 1.25rem;
  font-style: italic;
  margin: 1.5rem 0;
}
.ictn-prose img { max-width: 100%; height: auto; }

/*
 * Contact Form 7 — style CF7 output to match the editorial form design, so even
 * a default CF7 form looks on-brand. Paste the ready markup from
 * docs/CF7-CONTACT-FORM.html for a pixel-match to the source.
 */
.ictn-cf7 .wpcf7-form > p { margin: 0 0 1.5rem; }
.ictn-cf7 label {
  display: block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-deep, #6b0c02);
  font-weight: 500;
}
.ictn-cf7 input[type="text"],
.ictn-cf7 input[type="email"],
.ictn-cf7 input[type="tel"],
.ictn-cf7 input[type="url"],
.ictn-cf7 textarea {
  margin-top: 0.75rem;
  width: 100%;
  background: var(--background, #fbfbf9);
  border: 1px solid var(--rule, #dcd8d0);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--ink, #1a1a17);
}
.ictn-cf7 input:focus,
.ictn-cf7 textarea:focus {
  outline: none;
  border-color: var(--bronze, #8b0f03);
}
.ictn-cf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink, #1a1a17);
  color: var(--background, #fbfbf9);
  border: 1px solid var(--ink, #1a1a17);
  font-weight: 500;
  letter-spacing: 0.025em;
  font-size: 0.875rem;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: all 0.2s;
}
.ictn-cf7 input[type="submit"]:hover {
  background: var(--bronze, #8b0f03);
  border-color: var(--bronze, #8b0f03);
}
.ictn-cf7 .wpcf7-response-output {
  margin: 1.25rem 0 0 !important;
  border: 1px solid var(--rule, #dcd8d0);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.ictn-cf7 .wpcf7-not-valid-tip { color: #b3261e; font-size: 0.8rem; }
.ictn-cf7 .wpcf7-spinner { margin: 0 0.5rem; }