/*
Theme Name:  Sérénity
Template:    hello-elementor
Description: Child theme for Sérénity Senior Navigation and Care Academy. Design tokens live in the Sérénity Core plugin so pages keep working with Elementor layouts.
Version:     0.1.0
Text Domain: serenity
*/

/* --------------------------------------------------------------------------
   Hello Elementor header/footer, restyled with the --sn-* tokens from
   Sérénity Core (assets/css/serenity.css). Logical properties only (RTL).
   functions.php makes this file load after Hello's own CSS.
   -------------------------------------------------------------------------- */

/* ---- Header -------------------------------------------------------------- */
.site-header {
  border-block-end: 1px solid color-mix(in srgb, var(--sn-border) 35%, transparent);
  background: var(--sn-surface);
  color: var(--sn-text);
}

.site-header .header-inner {
  box-sizing: border-box;
  align-items: center;
  max-width: 72rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.site-header .site-title a {
  color: var(--sn-primary-strong);
  font-family: var(--sn-font-heading);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.4rem); /* keeps the menu toggle on the same row at 390px */
  font-weight: 600;
  text-decoration: none;
}

.site-header .site-navigation ul.menu li a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem; /* 44px targets */
  padding-block: 0.25rem;
  padding-inline: 0.85rem;
  color: var(--sn-text);
  font-weight: 600;
  text-decoration: none;
}

.site-header .site-navigation ul.menu li a:hover,
.site-header .site-navigation ul.menu li a[aria-current="page"] {
  color: var(--sn-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* Mobile menu toggle + dropdown. */
.site-header .site-navigation-toggle-holder .site-navigation-toggle {
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  border: 2px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-surface);
  color: var(--sn-text);
}

.site-header .site-navigation-dropdown ul.menu li a {
  min-block-size: 2.75rem;
  padding-block: 0.75rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  border-block-end: 1px solid color-mix(in srgb, var(--sn-border) 35%, transparent);
  background: var(--sn-surface);
  color: var(--sn-text);
  font-size: 1.125rem;
  text-decoration: none;
}

/* ---- Footer (Hello's own; our legal disclosures follow it) --------------- */
.site-footer {
  background: var(--sn-surface-2);
  color: var(--sn-muted);
  font-size: 1rem;
}

.site-footer .footer-inner {
  box-sizing: border-box;
  max-width: 72rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ---- Portal pages: full-width sections ------------------------------------ */
/* Hello caps .site-main at 500–1140px; our sections carry their own inner width. */
body.serenity-portal .site-main {
  max-width: none;
  padding-inline: 0;
}

body.serenity-portal .page-content > :first-child {
  margin-block-start: 0;
}