/*
  Samantha's House: site layer. Loaded after the theme (unlayered), so anything here wins.
  Visual reference: Figma "optimistic-contemporary-concept" (node 6:205).

  1. Tokens  2. Global type + buttons + eyebrow  3. Header  4. Sections + image frames  5. Footer  6. Donate form
  Per-block details live in user/site/css/blocks/<type>.css.
*/

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --sh-blue: #104f9e;
  --sh-orange: #f29032;
  --sh-navy: #0f2740;
  --sh-tint: #eef4f8;
  --sh-pill: #d7e5f5;
  --sh-line: #d1dfeb;
  --sh-input: #f0f4f8;

  --maw-accent: var(--sh-orange);
  --maw-accent-hover: #e27d1c;
  --maw-accent-soft: var(--sh-pill);
  --maw-accent-contrast: #fff;
  --maw-link: var(--sh-blue);
  --maw-focus: var(--sh-blue);
  --maw-text: #1c3550;
  --maw-text-muted: #506578;
  --maw-bg: #fff;
  --maw-bg-alt: var(--sh-tint);
  --maw-surface: #fff;
  --maw-border: var(--sh-line);

  --maw-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maw-font-heading: var(--maw-font-body);
  --maw-text-base: 1rem;
  --maw-text-lg: 1.125rem;
  --maw-text-xl: 1.375rem;
  --maw-text-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem);
  --maw-text-3xl: clamp(2rem, 1.3rem + 2vw, 2.625rem);
  --maw-text-4xl: clamp(2.25rem, 1.4rem + 2.8vw, 3.25rem);
  --maw-leading: 1.65;

  --maw-container: 80rem;
  --maw-gutter: clamp(1.25rem, 4vw, 5rem);
  --maw-section-md: clamp(3.5rem, 7vw, 6.25rem);
  --maw-section-lg: clamp(4rem, 8vw, 6.25rem);
  --maw-header-h: 5.75rem;

  --maw-radius-sm: 0.5rem;
  --maw-radius: 1rem;
  --maw-radius-lg: 1.5rem;
  --sh-radius-frame: 2.25rem;
  --maw-shadow: 0 8px 24px rgb(16 79 158 / 0.08);
  --maw-shadow-lg: 0 12px 32px rgb(16 79 158 / 0.12);
}

/* 2. Global type, buttons, eyebrow ------------------------------------------ */
body { color: var(--maw-text-muted); }
h1, h2, h3, h4 { color: var(--sh-blue); font-weight: 700; letter-spacing: -0.01em; }
.section--bg-dark h1, .section--bg-dark h2, .section--bg-dark h3 { color: #fff; }

.btn { border-radius: var(--maw-radius); font-weight: 700; font-size: 0.9375rem; padding: 0.95em 2em; border-width: 2px; }
.btn-lg { padding: 1.05em 2.1em; }
.btn-primary { background: var(--sh-orange); border-color: var(--sh-orange); color: #fff; box-shadow: 0 10px 12px rgb(242 144 50 / 0.25); }
.btn-primary:hover { background: var(--maw-accent-hover); border-color: var(--maw-accent-hover); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--sh-blue); color: var(--sh-blue); box-shadow: 0 8px 10px rgb(16 79 158 / 0.05); }
.btn-secondary:hover { background: var(--sh-pill); color: var(--sh-blue); }
.section--bg-dark .btn-secondary { background: transparent; border-color: #fff; color: #fff; }

.eyebrow { display: inline-block; width: max-content; max-width: 100%; padding: 0.45em 0.9em; border-radius: var(--maw-radius-sm); background: var(--sh-pill); color: var(--sh-blue); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.2; }
.section--bg-alt .eyebrow { background: #fff; }
.section--bg-dark .eyebrow { background: rgb(255 255 255 / 0.12); color: #fff; opacity: 1; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section--align-center .section-head { margin-inline: auto; }
.lead { color: var(--maw-text-muted); }

/* 3. Header ----------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid var(--sh-line); box-shadow: 0 10px 14px rgb(16 79 158 / 0.06); }
.site-header .logo img, .site-header .site-logo img { height: 52px; width: auto; }
.nav-list { gap: 0.5rem; }
.nav-list a { font-size: 0.9375rem; font-weight: 600; color: var(--maw-text-muted); background: transparent; }
.nav-list a:hover { background: transparent; color: var(--sh-blue); }
.nav-list a[aria-current="page"], .nav-list .is-active > a { background: transparent; color: var(--sh-blue); font-weight: 700; }
.nav-list ul { border-color: var(--sh-line); border-radius: var(--maw-radius); box-shadow: var(--maw-shadow); }
.site-header__cta { padding: 0.8em 1.75em; font-size: 0.875rem; box-shadow: 0 8px 10px rgb(242 144 50 / 0.25); }

/* 4. Sections, image frames ---------------------------------------------------- */
.section--bg-dark { background: var(--sh-navy); color: rgb(255 255 255 / 0.85); --maw-text: #fff; --maw-text-muted: rgb(255 255 255 / 0.8); --maw-surface: #fff; --maw-border: var(--sh-line); --maw-bg-alt: var(--sh-input); }
.section--bg-dark .donate__card { --maw-text: #1c3550; --maw-text-muted: #506578; }
.section--bg-alt { background: var(--sh-tint); }

/* Figma image frame: large radius, light border, soft blue shadow */
.hero__media img, .media-text__media img, .media-text__media .media-placeholder {
  display: block; width: 100%; border-radius: var(--sh-radius-frame); border: 2px solid var(--sh-line); box-shadow: var(--maw-shadow-lg);
}
.media-caption { left: 1.4rem; bottom: 1.4rem; border-radius: var(--maw-radius); color: var(--sh-blue); box-shadow: 0 8px 24px rgb(16 79 158 / 0.08); }
.attribution__name { color: var(--sh-blue); }
.attribution__role { color: var(--sh-orange); font-size: 0.8125rem; }

/* Blog + post pages */
.page-title, .item-header h1 { color: var(--sh-blue); }

/* Post header: breadcrumbs, meta and title each get their own breathing room. Markup comes from
   the site override at user/site/templates/item.html.twig. */
.post .breadcrumbs { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.post__header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sh-orange);
}
.post__sep { color: var(--sh-line); }
.post__meta .p-author { color: var(--maw-text-muted); }
.post__header h1 { margin: 0; font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem); line-height: 1.15; }

/* Hero image gets the same frame as the rest of the site. */
.post__hero { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.post__hero img {
  display: block; width: 100%;
  border-radius: var(--sh-radius-frame); border: 2px solid var(--sh-line); box-shadow: var(--maw-shadow-lg);
}

/* Imported WordPress posts put several images inside one <p>, so they had no space between them at
   all. Making them blocks with a vertical margin fixes both that and the gap to the text. */
.post .prose img {
  display: block; width: 100%; height: auto;
  margin-block: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--maw-radius-lg); border: 2px solid var(--sh-line);
  box-shadow: 0 8px 12px rgb(16 79 158 / 0.04);
}

.post__tags { margin-top: clamp(2rem, 4vw, 3rem); }
.post__nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 2rem; border-top: 1px solid var(--sh-line);
}
.post__nav-link { display: grid; gap: 0.3rem; max-width: 20rem; text-decoration: none; }
.post__nav-link--next { text-align: right; margin-left: auto; }
.post__nav-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sh-orange); }
.post__nav-title { font-weight: 700; color: var(--sh-blue); line-height: 1.3; }
.post__nav-link:hover .post__nav-title { text-decoration: underline; }

/* 5. Footer (site-layer template partials/footer.html.twig) ------------------ */
.site-footer--sh { background: var(--sh-navy); color: #fff; border-top: 0; padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; font-size: 0.8125rem; }
.site-footer--sh a { color: rgb(255 255 255 / 0.72); text-decoration: none; }
.site-footer--sh a:hover { color: #fff; text-decoration: underline; }
.sh-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem 4rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.sh-footer__brand { max-width: 21rem; }
.sh-footer__name { margin: 0 0 1rem; font-size: 1.625rem; font-weight: 700; color: #fff; }
.sh-footer__tagline { margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgb(255 255 255 / 0.7); }
.sh-footer__columns { display: flex; flex-wrap: wrap; gap: 2rem 4rem; }
.sh-footer__heading { margin: 0 0 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.sh-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sh-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; }
.sh-footer__copy { margin: 0; color: rgb(255 255 255 / 0.5); }
.sh-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; font-size: 1.125rem; }

/* 6. Donate page: Bloomerang form container ------------------------------------ */
.sh-donate-form__card { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--maw-radius-lg); background: #fff; border: 2px solid var(--sh-orange); box-shadow: 0 12px 16px rgb(16 79 158 / 0.07); }

@media (max-width: 860px) {
  .site-header__cta { display: none; }
  .sh-footer__top { flex-direction: column; }
}