/* =============================================================================
   FD Site Shell
   =============================================================================
   Base dark editorial treatment applied across single posts, pages, the
   front page, the posts index, archives, and search. Plus the header bar,
   and the site-wide accessibility floor (focus-visible, reduced motion,
   selection colour).

   This file establishes the "every page should feel like a serious
   publication" baseline. Page-specific styling (cards, archive layouts,
   search results) lives in separate files.
   ============================================================================= */


/* =============================================================================
   1. Site shell — apply the dark background to content areas
   ============================================================================= */

body.single-post .container-wrap,
body.page .container-wrap,
body.home .container-wrap,
body.blog .container-wrap,
body.archive.category .container-wrap,
body.archive.tag .container-wrap,
body.search .container-wrap {
  background: var(--fd-bg) !important;
  color: var(--fd-text);
}

body.single-post .container.main-content,
body.archive.category .container.main-content,
body.archive.tag .container.main-content,
body.search .container.main-content {
  max-width: 1300px;
}


/* -----------------------------------------------------------------------------
   Body text on single posts
   ----------------------------------------------------------------------------- */

body.single-post article.post .content-inner,
body.single-post article.post .content-inner p {
  color: var(--fd-text);
}

body.single-post article.post .content-inner strong {
  color: var(--fd-text-strong);
  font-weight: 600;
}

body.single-post article.post .content-inner em {
  color: var(--fd-text-muted);
}


/* =============================================================================
   2. Header bar — dark background, subtle accent rule below
   ============================================================================= */

body #header-outer,
body #header-space {
  background-color: var(--fd-bg-soft) !important;
}


/* Desktop only — accent gradient rule below the header */
@media only screen and (min-width: 1000px) {
  body #header-outer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    z-index: 100;
    background: linear-gradient(
      90deg,
      rgba(196, 152, 107, 0) 0%,
      rgba(196, 152, 107, 0.18) 24%,
      rgba(196, 152, 107, 0.72) 50%,
      rgba(196, 152, 107, 0.18) 76%,
      rgba(196, 152, 107, 0) 100%
    );
  }
}


/* =============================================================================
   3. Accessibility floor — focus, motion, selection
   ============================================================================= */

/* Keyboard focus: visible, on-brand. Salient tends to suppress outlines;
   this restores them for keyboard users without affecting mouse clicks. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fd-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Respect reduced-motion preferences site-wide */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Text selection in the site palette */
::selection {
  background: var(--fd-accent-soft);
  color: var(--fd-text-strong);
}

/* =============================================================================
   Kit (ConvertKit) forms — dark Face Dragons treatment
   =============================================================================
   Targets any Kit script-embed form site-wide (post inlines, footer, pages).
   Kit injects inline styles, hence the !importants. Copy itself is edited in
   the Kit form builder, not here.
   ========================================================================== */
.wp-block-convertkit-form { margin: 2.8rem 0; }
.formkit-form[data-uid][data-uid] {
  background-color: var(--fd-bg-soft, #1a1815) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(196,152,107,0.22) !important;
  border-left: 1px solid rgba(196,152,107,0.58) !important;
  border-radius: var(--fd-card-radius, 6px) !important;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7) !important;
}
.formkit-form[data-uid][data-uid] .formkit-column { background: transparent !important; }
.formkit-form[data-uid][data-uid] [data-style="full"] > .formkit-column { padding: 1.9rem 1.6rem !important; min-height: 0 !important; }
.formkit-form[data-uid][data-uid] .formkit-background,
.formkit-form[data-uid][data-uid] .formkit-image { display: none !important; }
.formkit-form[data-uid][data-uid] .formkit-header,
.formkit-form[data-uid][data-uid] .formkit-header h2 {
  font-family: var(--fd-font-serif, Georgia, serif) !important;
  font-weight: 500 !important; font-size: 1.5rem !important; line-height: 1.2 !important;
  letter-spacing: -0.01em !important; color: var(--fd-text-strong, #f0ece4) !important;
}
.formkit-form[data-uid][data-uid] .formkit-subheader,
.formkit-form[data-uid][data-uid] .formkit-subheader p {
  font-family: var(--fd-font-serif, Georgia, serif) !important;
  font-size: 1rem !important; line-height: 1.6 !important;
  color: var(--fd-text-muted, #a39d8e) !important;
}
.formkit-form[data-uid][data-uid] .formkit-subheader strong { color: var(--fd-text, #ebe6dc) !important; font-weight: 600 !important; }
.formkit-form[data-uid][data-uid] .formkit-subheader span { color: var(--fd-accent-strong, #d9b77c) !important; }
.formkit-form[data-uid][data-uid] .formkit-input {
  background: rgba(15,13,11,0.6) !important;
  color: var(--fd-text-strong, #f0ece4) !important;
  border: 1px solid rgba(196,152,107,0.35) !important;
  border-radius: var(--fd-card-radius, 6px) !important;
  font-family: var(--fd-font-sans, system-ui, sans-serif) !important;
  font-size: 0.95rem !important; padding: 0.9em 1em !important;
}
.formkit-form[data-uid][data-uid] .formkit-input::placeholder { color: var(--fd-text-soft, #948e82) !important; opacity: 1 !important; }
.formkit-form[data-uid][data-uid] .formkit-input:focus {
  outline: none !important; border-color: var(--fd-accent, #c4986b) !important;
  box-shadow: 0 0 0 1px var(--fd-accent, #c4986b) !important;
}
.formkit-form[data-uid][data-uid] .formkit-submit {
  background-color: var(--fd-accent, #c4986b) !important;
  color: var(--fd-bg, #1f1d1a) !important;
  border-radius: var(--fd-card-radius, 6px) !important;
  font-family: var(--fd-font-sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important; font-weight: 600 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  transition: background-color 200ms ease-out, transform 200ms ease-out !important;
}
.formkit-form[data-uid][data-uid] .formkit-submit:hover {
  background-color: var(--fd-accent-strong, #d9b77c) !important; transform: translateY(-1px);
}
.formkit-form[data-uid][data-uid] .formkit-guarantee,
.formkit-form[data-uid][data-uid] .formkit-guarantee h2,
.formkit-form[data-uid][data-uid] .formkit-guarantee p {
  font-family: var(--fd-font-sans, system-ui, sans-serif) !important;
  font-size: 0.75rem !important; font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: var(--fd-text-soft, #948e82) !important;
}
.formkit-form[data-uid][data-uid] .formkit-guarantee h2 { text-transform: uppercase; letter-spacing: 0.14em !important; font-size: 0.7rem !important; margin-bottom: 0.3em; }
.formkit-form[data-uid][data-uid] .formkit-guarantee { margin-top: 0.9rem !important; }
.formkit-form[data-uid][data-uid] .formkit-powered-by-convertkit-container { opacity: 0.45; }
.formkit-form[data-uid][data-uid] .formkit-alert-error { color: #d9847c !important; font-family: var(--fd-font-sans, system-ui, sans-serif) !important; }