/* ==========================================================================
   NAZARÉ AWAITS — Editorial layer  (v1, Oct 2026)
   Loaded LAST (after tailwind.css + overrides.css). Pure CSS, no build step.
   Remove this file from tailwindcss.libraries.yml to revert instantly.

   Palette — every colour is pulled from Nazaré itself:
     paper   : whitewashed walls / newsprint
     sand    : Praia da Nazaré
     ink     : the illustrations' sepia line work
     atlantic: the deep water over the Nazaré Canyon
     tile    : terracotta roofs of the Sítio
     ochre   : painted fishing boats (and the flat's yellow chair)
   ========================================================================== */

:root {
  --na-paper:        #F7F2E8;
  --na-paper-deep:   #EFE6D4;
  --na-sand:         #E4D6BC;
  --na-rule:         #D6C8AE;
  --na-ink:          #1C1A17;
  --na-ink-soft:     #3F3A33;
  --na-muted:        #6B6256;
  --na-atlantic:     #1F4E63;
  --na-atlantic-deep:#14374A;
  --na-tile:         #A94B26;
  --na-ochre:        #C8962E;

  --na-serif-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --na-serif:         "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --na-sans:          "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --na-measure: 40rem;   /* comfortable reading column (~68 characters) */

  /* Re-point the old Portugal flag variables so legacy rules (webform,
     buttons, login) pick up the new palette automatically. */
  --portugal-green: var(--na-atlantic);
  --portugal-red:   var(--na-tile);
}

/* ---------- Page width ------------------------------------------------------ */
/* Tailwind's .container grows to 1536px on very wide screens. Cap the site
   at 1280px. Done here (not in tailwind.css) so a Tailwind rebuild can't undo it. */
@media (min-width: 1536px) {
  .container { max-width: 1280px; }
}

/* ---------- Page canvas ---------------------------------------------------- */
html, body {
  background-color: var(--na-paper);
  color: var(--na-ink);
  font-family: var(--na-serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Retire the 20%-opacity beach photo behind everything (rule kept in
   overrides.css, just switched off here — fights the paper texture). */
body::before { display: none !important; }

::selection { background: var(--na-sand); color: var(--na-ink); }

/* ---------- Type ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--na-serif-display);
  font-weight: 400;
  color: var(--na-ink);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }

/* H2 — "Style B": bold Libre Caslon Text. The ONLY h2 look on the site. */
h2, .na-h2 {
  font-family: var(--na-serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--na-ink);
  margin: 0 0 .6rem;
}
/* Linked h2s (e.g. view titles on Check-in & Out) stay ink, not link-blue */
h2 a, h2 a:visited { color: inherit !important; text-decoration: none; }
h2 a:hover { color: var(--na-atlantic) !important; }

/* H3 — subordinate label: small spaced caps, so it never competes with an h2 */
h3 {
  font-family: var(--na-sans);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--na-ink-soft);
  margin: 1.25rem 0 .35rem;
}
h4 { font-family: var(--na-serif); font-weight: 700; font-size: 1rem; }

a { color: var(--na-atlantic); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--na-tile); }
strong, b { font-weight: 700; }

/* ---------- Masthead -------------------------------------------------------- */
header[role="banner"] {
  border-bottom: 1px solid var(--na-ink);
  box-shadow: 0 3px 0 -1px var(--na-paper), 0 4px 0 0 var(--na-ink); /* thin + hairline double rule */
  padding-bottom: 0.9rem;
  margin-bottom: 0.25rem;
}
.site-logo { display: none !important; }          /* green wave icon — wordmark only for now */
.site-name, .site-name a {
  font-family: var(--na-serif-display);
  font-weight: 400 !important;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1;
  color: var(--na-ink) !important;
  text-decoration: none !important;
  letter-spacing: -0.01em;
}
.site-slogan { font-family: var(--na-serif); color: var(--na-muted); font-size: .95rem; }

/* Main menu — small spaced caps, like a magazine section bar */
#block-tailwindcss-main-menu,
#block-tailwindcss-main-menu a,
.main-menu-wrapper a {
  font-family: var(--na-sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--na-ink-soft);
  text-decoration: none;
}
.main-menu-wrapper > ul > li > a:hover { color: var(--na-tile); text-decoration: none; }
.main-menu-wrapper li a.is-active { color: var(--na-ink); border-bottom: 2px solid var(--na-ochre); padding-bottom: 2px; }
.main-menu-wrapper > ul { gap: 1.75rem; }
.main-menu-wrapper > ul > li { margin: 0 !important; }

@media (min-width: 768px) {
  header[role="banner"] > div:first-child { flex-direction: column; gap: 1.1rem; padding-top: 1rem; }
}

/* ---------- Account drop button (masthead, right) ------------------------- */
.na-masthead { position: relative; }
.na-masthead__account > div,                         /* region wrappers */
.na-masthead__account [id^="block-"] { display: block; }

.na-dropbutton { position: relative; display: inline-flex; align-items: stretch; }
.na-dropbutton__main,
.na-dropbutton__toggle {
  font-family: var(--na-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--na-paper) !important;
  background: var(--na-atlantic);
  border: 1px solid var(--na-atlantic);
  text-decoration: none !important;
  cursor: pointer;
}
.na-dropbutton__main { display: inline-flex; align-items: center; padding: .55rem .85rem; }
.na-dropbutton__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .55rem;
  border-left-color: rgba(247, 242, 232, .35);
}
.na-dropbutton__toggle svg { transition: transform .15s ease; }
.na-dropbutton.is-open .na-dropbutton__toggle svg { transform: rotate(180deg); }
.na-dropbutton__main:hover,
.na-dropbutton__toggle:hover { background: var(--na-atlantic-deep); border-color: var(--na-atlantic-deep); }
.na-dropbutton__main:focus-visible,
.na-dropbutton__toggle:focus-visible { outline: 2px solid var(--na-ochre); outline-offset: 2px; }

.na-dropbutton__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 11rem;
  margin: 0; padding: .35rem 0; list-style: none;
  background: var(--na-paper);
  border: 1px solid var(--na-ink);
  box-shadow: 4px 4px 0 var(--na-sand);
}
.na-dropbutton__menu[hidden] { display: none; }
.na-dropbutton__menu a {
  display: block; padding: .55rem 1rem;
  font-family: var(--na-sans); font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--na-ink) !important; text-decoration: none !important;
}
.na-dropbutton__menu a:hover { background: var(--na-paper-deep); color: var(--na-tile) !important; }

/* Placement by screen width
   ≥1200px : right end of the main-nav row
   768–1199: top-right, level with the site name (centred nav would collide)
   <768    : hidden — links are copied to the bottom of the hamburger panel */
.na-masthead__account { display: none; }
@media (min-width: 768px) {
  .na-masthead__account { display: block; position: absolute; right: 0; top: 1.4rem; }
}
@media (min-width: 1200px) {
  .na-masthead__account { top: auto; bottom: .85rem; }
}

/* Mobile panel: account links sit below the main links, set apart */
.mobile-menu-panel li.na-mobile-account--first { border-top: 1px solid var(--na-ink); margin-top: .25rem !important; }
.mobile-menu-panel li.na-mobile-account a { color: var(--na-atlantic) !important; font-size: .72rem !important; }

/* Admin tabs (View / Edit / Delete / Revisions) — quiet utility strip */
nav[aria-label="Primary tabs"],
nav[aria-label="Secondary tabs"] {
  border-bottom: 1px solid var(--na-rule) !important;
  margin: 1.25rem 0 0 !important;
}
nav[aria-label="Primary tabs"] ul,
nav[aria-label="Secondary tabs"] ul { gap: 1.75rem; margin-bottom: -1px; }
nav[aria-label="Primary tabs"] ul > li,
nav[aria-label="Secondary tabs"] ul > li { margin: 0 !important; }
nav[aria-label="Primary tabs"] a,
nav[aria-label="Secondary tabs"] a {
  display: inline-block;
  padding: .5rem 0 .55rem;
  font-family: var(--na-sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--na-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
}
nav[aria-label="Primary tabs"] a:hover,
nav[aria-label="Secondary tabs"] a:hover { color: var(--na-ink); }
nav[aria-label="Primary tabs"] li.is-active a,
nav[aria-label="Secondary tabs"] li.is-active a { color: var(--na-ink); border-bottom-color: var(--na-ochre); }

/* Mobile menu */
.mobile-menu-button { color: var(--na-ink); border-color: var(--na-ink); border-radius: 0; }
.mobile-menu-panel { background: var(--na-paper); border: 1px solid var(--na-ink); border-radius: 0; box-shadow: 4px 4px 0 var(--na-sand); }
.mobile-menu-panel li a { color: var(--na-ink) !important; border-bottom-color: var(--na-rule) !important; font-family: var(--na-sans); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.mobile-menu-panel li a:hover { background: var(--na-paper-deep) !important; }

/* ---------- Shared bits ----------------------------------------------------- */
.na-kicker {
  font-family: var(--na-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--na-tile);
  margin-bottom: .75rem;
}
.na-byline {
  font-family: var(--na-sans);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--na-muted);
}
.na-readmore {
  font-family: var(--na-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--na-atlantic);
}
.na-readmore::after { content: " \2192"; }
.na-readmore:hover { color: var(--na-tile); text-decoration: none; }

/* Tags → understated small caps, not pill chips */
.field--tags ul { gap: .35rem 1rem !important; }
.field--tags li {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--na-sans);
  font-size: .7rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.field--tags li a { color: var(--na-muted); text-decoration: none; }
.field--tags li a:hover { color: var(--na-tile); }

/* "Art" frame — used by illustrations AND flat photos so both read as
   pieces placed on the same printed page. */
.na-teaser__art img,
.na-story__art img,
.our-flat img,
article .field--name-field-attraction-image img,
.gal-thumb img {
  background: #fff;
  padding: 6px;
  border: 1px solid var(--na-rule);
  box-shadow: 0 1px 0 var(--na-rule);
  border-radius: 0 !important;
  height: auto;
}

/* ---------- Blog list (article teasers) ------------------------------------ */
.na-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--na-rule);
}
.na-teaser:first-of-type { padding-top: 1rem; }
.na-teaser__art { order: -1; }
.na-teaser__art img { width: 100%; max-width: 22rem; }
.na-teaser__title { margin: 0 0 .6rem; }
.na-teaser__title a { color: var(--na-ink); text-decoration: none; }
.na-teaser__title a:hover { color: var(--na-atlantic); }
.na-teaser .na-byline { margin-bottom: .9rem; }
.na-teaser__dek {
  color: var(--na-ink-soft);
  font-size: 1rem;
  max-height: 9.5em;                 /* ~6 lines, then fade */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
  margin-bottom: .4rem;
}
.na-teaser__dek p { padding-bottom: .8em; }
.na-teaser__tags { margin-top: 1.1rem; }
.na-teaser__tags .field--tags li:nth-child(n+4) { display: none; }   /* first 3 tags only */

@media (min-width: 768px) {
  .na-teaser { grid-template-columns: minmax(0, 1fr) 15rem; gap: 2.5rem; align-items: start; }
  .na-teaser__art { order: 0; }
}

/* ---------- Single story (article full) ------------------------------------ */
/* One shared left edge for kicker, headline, date and body text.
   Desktop: two columns — text (col 1) | illustration (col 2, beside the body).
   Mobile: one column — headline, illustration, text. */
.na-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "art" "body" "foot";
  max-width: var(--na-measure);
  margin: 0 auto;
  padding-top: 1.5rem;
}
.na-story__head { grid-area: head; padding-bottom: 1.75rem; margin-bottom: 2rem; border-bottom: 1px solid var(--na-rule); }
.na-story__title { margin: 0 0 1.1rem; }
.na-story__art  { grid-area: art; margin: 0 0 2rem; }
.na-story__art figure { margin: 0; }
.na-story__art img { width: 100%; }
.na-story__body { grid-area: body; min-width: 0; font-size: 1.08rem; color: var(--na-ink); }
.na-story__foot { grid-area: foot; }

@media (min-width: 900px) {
  .na-story--art {
    max-width: calc(var(--na-measure) + 3.5rem + 19rem);
    grid-template-columns: minmax(0, var(--na-measure)) 19rem;
    column-gap: 3.5rem;
    grid-template-areas:
      "head head"
      "body art"
      "foot foot";
  }
  .na-story__art { margin: .35rem 0 0; align-self: start; position: sticky; top: 6rem; }
}

.na-story__body p { padding-bottom: 0; margin: 0 0 1.25em; }
.na-story__body h2 { margin: 2rem 0 .6rem; }
.na-story__body h3 { margin: 1.5rem 0 .35rem; }
.na-story__body blockquote { border-left: 2px solid var(--na-ochre); padding-left: 1.2rem; font-style: italic; color: var(--na-ink-soft); }
/* Drop cap — applied to the body block itself, because n8n posts don't
   always open with a <p> (some start with a bare <div>). */
.na-story__body::first-letter {
  font-family: var(--na-serif-display);
  float: left;
  font-size: 4.4em;
  line-height: .82;
  padding: .06em .09em 0 0;
  color: var(--na-ink);
}
/* End mark ■ — a small terracotta square closing every story */
.na-story__body::after {
  content: "";
  display: block;
  width: .6em; height: .6em;
  margin-top: .4rem;
  background: var(--na-tile);
}
.na-story__foot { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--na-rule); }

/* "Filed under" — related topics at the end of a story */
.na-filed { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; }
.na-filed__label {
  font-family: var(--na-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--na-tile);
}
.na-filed__list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.na-filed__list a {
  display: inline-block;
  font-family: var(--na-sans); font-size: .74rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--na-ink-soft);
  border: 1px solid var(--na-rule); background: #fff;
  padding: .35rem .7rem;
}
.na-filed__list a:hover { border-color: var(--na-atlantic); color: var(--na-atlantic); }

/* ---------- Restaurants / attractions / other teasers ---------------------- */
.na-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--na-rule);
  padding: 2rem 0 !important;
  margin-bottom: 0 !important;
}
.na-card h2, .na-card h2 a { color: var(--na-ink); text-decoration: none; }
.na-card h2 a:hover { color: var(--na-atlantic); }
.na-card a.foo, .na-card a.Foo { font-family: var(--na-sans); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.na-card li, .na-card .field__item { background: transparent !important; border: 1px solid var(--na-rule); border-radius: 0 !important; font-family: var(--na-sans); font-size: .72rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--na-muted) !important; }

/* ---------- Places: Attractions + Restaurants (one shared design) --------- */
/* Bold, compact serif headline — the "Attractions" look, now used by both. */
.na-place-title {
  font-family: var(--na-serif) !important;      /* Libre Caslon Text, bold */
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--na-ink);
}
.na-place-title a { color: inherit; text-decoration: none; }
.na-place-title a:hover { color: var(--na-atlantic); }
.na-place-title--list { font-size: 1.35rem; margin: 0 0 .75rem; }
.na-place-title--page { font-size: clamp(1.75rem, 3vw, 2.3rem); margin: 0; }

/* Any headings n8n puts inside a description are demoted to the same family */
.na-place-body h1, .na-teaser--place .na-teaser__dek h1 {
  font-family: var(--na-serif); font-weight: 700; font-size: 1.1rem; line-height: 1.3; margin: 1.5rem 0 .5rem;
}

/* Listing card: text left, ONE square photo right (same size for both types) */
.na-teaser--place .na-teaser__dek { max-height: 7.5em; }
.na-place-thumb { display: block; }
.na-place-thumb > div { display: block !important; }              /* field wrapper */
.na-place-thumb > div > div { width: auto !important; }
.na-place-thumb > div > div:not(:first-child) { display: none !important; }  /* first photo only */
.na-place-thumb img {
  width: 100%; max-width: 22rem;
  aspect-ratio: 1 / 1; object-fit: cover;
}
@media (min-width: 768px) {
  .na-teaser--place { grid-template-columns: minmax(0, 1fr) 13rem; }
  .na-teaser--place .na-teaser__art { order: 2; }       /* photo is first in HTML, shown right */
}
.na-place-terms { display: flex; flex-wrap: wrap; gap: .25rem 0; list-style: none; margin: 1rem 0 0; padding: 0; }
.na-place-terms li {
  font-family: var(--na-sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--na-muted);
}
.na-place-terms li + li::before { content: "\00B7"; margin: 0 .6rem; color: var(--na-rule); }

/* Full page photo column: first photo large, the rest as a 2-up grid of squares */
.na-place-gallery > div { display: grid !important; grid-template-columns: 1fr 1fr; gap: .75rem !important; }
.na-place-gallery > div > div { width: auto !important; }
.na-place-gallery > div > div:first-child { grid-column: 1 / -1; }
.na-place-gallery img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  background: #fff; padding: 6px; border: 1px solid var(--na-rule); border-radius: 0 !important;
}
.na-place-gallery > div > div:first-child img { aspect-ratio: 4 / 3; }

 ------------------------------------------- */
/* The flat stays modern — we just present its photos like a magazine
   photo essay: matted, hairline-framed, with serif section heads. */
/* .our-flat h2 uses the global h2 (Style B) — no override */
.our-flat p { color: var(--na-ink-soft); }
.our-flat img { filter: saturate(.94) sepia(.05); }   /* a whisper of warmth so cool whites sit on cream paper */
.our-flat .grid { gap: 1.25rem; }

/* ---------- Buttons ------------------------------------------------------- */
.button, input[type="submit"], a.CTA-button {
  border-radius: 0 !important;
  font-family: var(--na-sans) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.button--primary, input[type="submit"].button--primary, a.CTA-button {
  background-color: var(--na-atlantic) !important;
  color: var(--na-paper) !important;
  border: 1px solid var(--na-atlantic) !important;
  padding: 1rem 2rem !important;
}
.button--primary:hover, a.CTA-button:hover { background-color: var(--na-atlantic-deep) !important; border-color: var(--na-atlantic-deep) !important; }
a.CTA-button { font-size: .85rem !important; }

/* ---------- Forms (webform + core) ----------------------------------------- */
/* A form is a "reply card" — narrow, centred, paper-white fields. */
.webform-submission-form,
.user-login-form {
  --na-label-gap: .625rem;                    /* label → its field   (10px) */
  --na-field-gap: calc(var(--na-label-gap) * 2); /* field → next label (20px) */
  max-width: 44rem;
  margin: 1.25rem auto 4rem;
}

/* Labels: small spaced caps, like the nav */
.webform-submission-form label,
.webform-submission-form .font-bold,
.user-login-form label {
  display: block;
  font-family: var(--na-sans);
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--na-ink-soft);
  line-height: 1.2;
  margin: 0;
}
/* The label's wrapper div carries the gap (label itself has none, so it
   isn't doubled when Drupal wraps the <label> in a div). */
.webform-submission-form .form-item > .font-bold,
.webform-submission-form .form-item > label,
.user-login-form .form-item > label { margin: 0 0 var(--na-label-gap) !important; }
.form-required::after { content: " *"; color: var(--na-tile); }

/* Fields */
.webform-submission-form .form-item,
.user-login-form .form-item { margin: 0 0 var(--na-field-gap) !important; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], input[type="search"], input[type="url"],
textarea, select {
  width: 100%;
  background: #FFFDF8;
  color: var(--na-ink);
  border: 1px solid var(--na-rule) !important;
  border-radius: 0 !important;
  padding: .75rem .9rem !important;
  font-family: var(--na-serif);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, textarea:hover, select:hover { border-color: #BFAF92 !important; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--na-atlantic) !important;
  box-shadow: 0 0 0 3px rgba(31, 78, 99, .15);
}

/* Placeholder: smaller, italic, quieter than real input */
input::placeholder, textarea::placeholder {
  font-family: var(--na-serif);
  font-style: italic;
  font-size: .88rem;
  color: #A99D8B;
  opacity: 1;
}

/* Help text under a field */
.webform-submission-form .description,
.webform-submission-form .webform-element-description,
.user-login-form .description {
  font-family: var(--na-sans);
  font-size: .76rem !important;
  line-height: 1.5;
  color: var(--na-muted) !important;
  margin-top: var(--na-label-gap);
  max-width: 38rem;
}

/* Error state */
.form-item--error input, input.error, textarea.error { border-color: var(--na-tile) !important; }
.form-item--error-message { font-family: var(--na-sans); font-size: .78rem; color: var(--na-tile); margin-top: .35rem; }

/* Undo the old fixed 16px gap between fields inside guest cards */
.webform-multiple-table .form-item + .form-item { margin-top: 0 !important; }

/* Guest cards — each guest in the composite gets its own numbered card */
table[data-drupal-selector="edit-guest-information-items"] { border-spacing: 0 1.25rem !important; }
table[data-drupal-selector="edit-guest-information-items"] thead { display: none; }
tr[data-drupal-selector^="edit-guest-information-items-"] > td {
  background: var(--na-paper) !important;
  border: 1px solid var(--na-rule) !important;
  border-top: 2px solid var(--na-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.5rem 1.5rem .25rem !important;
}
/* "Guest 1, 2, 3…" — real <h2 class="na-guest-title"> injected in
   tailwindcss_preprocess_table(); styled by the global h2 (Style B). */
.na-guest-title { margin: 0 0 1.1rem; }

/* "[1] Additional guests [Add]" row */
.webform-multiple-add {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin: .5rem 0 2rem !important;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--na-rule);
}
.webform-multiple-add .form-item { margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: center; gap: .6rem; width: auto !important; }
.webform-multiple-add input[type="number"] { width: 4.5rem !important; text-align: center; padding: .55rem .4rem !important; }
.webform-multiple-add label,
.webform-multiple-add .field-suffix {
  font-family: var(--na-sans); font-size: .85rem; letter-spacing: .02em; text-transform: none;
  color: var(--na-ink-soft); margin: 0;
}
.webform-multiple-add .button,
.webform-multiple-add input[type="submit"] {
  background: transparent !important;
  color: var(--na-atlantic) !important;
  border: 1px solid var(--na-atlantic) !important;
  padding: .65rem 1.1rem !important;
  margin: 0 !important;
}
.webform-multiple-add .button:hover,
.webform-multiple-add input[type="submit"]:hover { background: var(--na-atlantic) !important; color: var(--na-paper) !important; text-decoration: none; }

.webform-submission-form .form-actions,
.user-login-form .form-actions { margin-top: 1rem; padding-bottom: 0; }

/* ---------- Status messages (alerts) --------------------------------------- */
div.data-drupal-messages,
[data-drupal-messages] { background: none !important; border: 0 !important; padding: 0 !important; margin: 2.25rem 0 .5rem; }
/* On form pages, align alerts with the form column */
body:has(.webform-submission-form) [data-drupal-messages],
body:has(.user-login-form) [data-drupal-messages] { max-width: 44rem; margin-left: auto; margin-right: auto; }

[data-drupal-messages] > div[role="contentinfo"] {
  --na-alert: var(--na-atlantic);
  position: relative;
  margin-bottom: .75rem;
  padding: .95rem 1.2rem .95rem 3.1rem;
  background: #FFFDF8;
  border: 1px solid var(--na-rule);
  border-left: 4px solid var(--na-alert);
  font-family: var(--na-sans);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--na-ink);
}
[data-drupal-messages] > div[role="contentinfo"]::before {     /* round "i" / "!" badge */
  content: "i";
  position: absolute; left: 1rem; top: 1rem;
  width: 1.3rem; height: 1.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--na-alert);
  color: #fff;
  font-family: var(--na-serif); font-style: italic; font-weight: 700; font-size: .8rem; line-height: 1;
}
[data-drupal-messages] > div[aria-label*="Warning"] { --na-alert: var(--na-ochre); }
[data-drupal-messages] > div[aria-label*="Warning"]::before { content: "!"; font-style: normal; }
[data-drupal-messages] > div[aria-label*="Error"]   { --na-alert: var(--na-tile); background: #FBF1EC; }
[data-drupal-messages] > div[aria-label*="Error"]::before { content: "!"; font-style: normal; }
[data-drupal-messages] a { color: var(--na-atlantic); text-decoration: underline; }
[data-drupal-messages] ul { margin: 0; padding-left: 1rem; list-style: disc; }

/* ---------- Pager ----------------------------------------------------------- */
.pager a, .pager span { border-radius: 0 !important; font-family: var(--na-sans); border-color: var(--na-rule) !important; color: var(--na-ink-soft) !important; background: transparent; }
.pager a:hover { background: var(--na-paper-deep) !important; }
.pager span[aria-current="page"] { background: var(--na-ink) !important; color: var(--na-paper) !important; border: 1px solid var(--na-ink); }

/* ---------- Footer region --------------------------------------------------- */
footer[role="contentinfo"] { border-top: 1px solid var(--na-ink); margin-top: 3rem; padding-top: 1.5rem; }
footer[role="contentinfo"], footer[role="contentinfo"] * { color: var(--na-muted); font-family: var(--na-sans); }