/* Fatima Skin Lab — theme shell.
   Section styling lives in the plugin's sections.css (generated from the prototype);
   this file only handles the document, header, footer and editorial content. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg, #FFFCFA);
  color: var(--cocoa, #6B4A4C);
  font-family: var(--body, "Poppins", sans-serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

p { margin: 0 0 1.2em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rose, #C1707E); color: #fff; }

/* Grain */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none; opacity: .038; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink, #2B1B1C); color: #fff;
  padding: 12px 20px; border-radius: 0 0 12px 0; z-index: 1000;
}
.skip-link:focus { left: 0; top: 0; }
.screen-reader-text:not(:focus) {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--rose, #C1707E);
  outline-offset: 2px;
}

/* Editorial column for plain WP content */
/* Two classes so this reliably beats the plugin's .wrap{padding:0 var(--gut)} —
   same-specificity rules loaded after this file would otherwise win the tie
   and zero out the top clearance, letting the fixed header cover the h1.
   Longhand top/bottom only — a full `padding:` shorthand here would zero out
   .wrap's own left/right gutter too, since this rule wins the whole property
   on every side, not just the one it actually needs to override. That's what
   happened before: content rendered edge-to-edge with no side margin. */
.wrap.fsl-flow { padding-top: 150px; padding-bottom: 100px; }
.fsl-entry { max-width: 74ch; }
.fsl-entry h2 { margin: 1.6em 0 .5em; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.fsl-entry h3 { margin: 1.4em 0 .4em; font-size: 1.4rem; }
.fsl-entry ul, .fsl-entry ol { padding-left: 1.2em; }
.fsl-entry li { margin: .4em 0; }
.fsl-entry blockquote {
  margin: 2em 0; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--rose, #C1707E);
  font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.25rem;
}
.fsl-hero-img img { border-radius: var(--r-img, 28px); margin: 0 0 2em; }

/*
 * .nav-links itself is NOT redeclared here — sections.css already owns it
 * (including the mobile @media collapse to the burger menu). A duplicate,
 * unconditional copy used to live here; depending on load order (Elementor
 * pages enqueue shell.css/sections.css in the opposite order from plain
 * theme templates), it could silently win over sections.css's mobile
 * override and leave the desktop nav links visible instead of collapsed.
 */
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14.5px; }

/* Custom logo sits where the wordmark would */
.custom-logo-link img { max-height: 46px; width: auto; }

/* Elementor injects its own wrappers; keep our full-bleed sections full-bleed */
.elementor-widget-container > section,
.elementor-widget-container > header,
.elementor-widget-container > footer { width: 100%; }