/* O Pilón do Camiño — shared styles (Phase 1).
   Brand: blue #043962 + gold #DBA817; Helvetica; motto «Un gusto coñecerte».
   Tokens in :root. This file is the SOURCE — minify with build.sh. */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (assets 2026-08-06):
       blue #043962 + gold #DBA917 on white —
       logo: blue, white background, motto "Un gusto conocerte" in gold.
     Helvetica throughout (Arial fallback, metrically compatible).
     Roles: --terra = blue (action, links, functional text);
            --olive = gold (motto, decorative emphasis, display). */
  --paper:        #ffffff;   /* main background — white (logo background) */
  --paper-2:      #f2f6fa;   /* supporting backgrounds / photos (very light blue) */
  --ink:          #043962;   /* main text — brand blue */
  --ink-soft:     #55708c;   /* secondary text (AA on --paper) */
  --line:         #d8e1ea;   /* thin borders (blue at 15%) */
  --terra:        #043962;   /* primary accent — blue (buttons, links) */
  --terra-deep:   #032c4a;   /* blue on hover/focus */
  --olive:        #dba817;   /* secondary accent — gold (motto, emphasis)
                                PANTONE 124 C / official HEX #DBA817 */

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius: 4px;
  --wrap: 68rem;
  --section-pad: clamp(3.5rem, 9vw, 6.5rem);
}

/* ---------- Dark theme ----------
   Adaptive to the device by default (JS sets data-theme from
   prefers-color-scheme on load); the masthead button forces
   light/dark and persists to localStorage. No JS → light (fallback).
   The 404 is already a dark brand page and does not change. */
:root[data-theme="dark"] {
  --paper:      #0d1a26;   /* background — brand navy */
  --paper-2:    #16283c;   /* elevated surfaces */
  --ink:        #e7eef5;   /* main text — near white */
  --ink-soft:   #9fb3c8;   /* secondary text */
  --line:       rgba(255, 255, 255, 0.12);
  --terra:      #5d8fbd;   /* light blue, readable on dark */
  --terra-deep: #7aa6cc;   /* hover */
  --olive:      #dba817;   /* gold — works the same on navy */
}
/* Theme button (masthead): same pill as the language selector */
.theme-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--terra); cursor: pointer;
  padding: 0; font: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { border-color: var(--terra); background: var(--paper-2); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }          /* dark → sun (click = light) */
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Smooth theme transition: only while switching (JS adds/removes the class,
   ~0.35s). prefers-reduced-motion is already handled by the base block. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease !important;
}

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

html {
  scroll-behavior: smooth;
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  main { animation: none; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 1rem;
}
p { text-wrap: pretty; margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--terra); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terra-deep); }

/* Real visible focus */
:focus-visible {
  outline: 2px solid var(--terra-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section { padding-block: var(--section-pad); scroll-margin-top: 5.5rem; }

/* ---------- Draft tags ---------- */
.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
  white-space: nowrap;
}
.tag-soft { color: var(--ink-soft); }

/* ---------- Accessibility: visible focus ---------- */
:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Under construction notice ---------- */
.notice {
  background: var(--terra);
  color: var(--paper);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.5rem 1rem;
}
.notice p { margin: 0; }

/* ---------- Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.brand svg { width: 30px; height: 30px; color: var(--terra); flex: none; }
/* Real owner logo (docs/design → assets/img):
   masthead = name-only version (logosinslogan), footer/landing = circular (logoweb).
   The white chip is PERMANENT (both themes): on light it blends with the
   background (invisible), on dark it separates the logo from the navy. Since it
   never changes with the theme, there is nothing to animate in the transition
   → no shadows or borders. */
.brand-img {
  padding: 0.3rem 0.6rem;
  background: #fff;
  border-radius: 8px;
}
.brand-logo { display: block; height: 52px; width: auto; }
.footer-logo { width: 56px; height: 56px; flex: none; background: #fff; }

.nav-list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}
.nav-list a:hover { color: var(--terra-deep); background: var(--paper-2); }
.nav-list a[aria-current="page"] { color: var(--terra); }
.nav-list li { display: flex; align-items: center; }
/* Language selector (4 languages): pill group in the masthead */
.nav-list li.lang-links {
  display: flex; gap: 0.25rem; align-items: center;
  margin-left: 0.6rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);   /* visual separation of the menu */
}
.nav-list li.theme-toggle-item { margin-left: 0.5rem; }
.nav-list .lang-link { border-radius: 999px; }
.nav-list .lang-link[aria-current="page"],
.nav-list .lang-link[aria-current="page"]:hover,
.nav-list .lang-link[aria-current="page"]:focus {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}
.lang-link .lang-flag { margin-right: 0.3em; vertical-align: -0.15em; }
.lang-link {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  color: var(--terra);
}
.lang-link:hover { border-color: var(--terra); background: var(--paper-2); }

/* Language landing (root index.html) */
.lang-landing-main { min-height: 100vh; display: flex; align-items: center; text-align: center; }
.lang-landing-logo { border-radius: 50%; margin: 0 auto 1rem; }
.lang-landing-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--terra); margin: 0 0 0.25rem; }
.lang-landing-tagline { margin: 0 0 0.75rem; }
.lang-landing-sub { color: var(--ink-soft); margin: 0 0 2rem; }
.lang-landing-choices { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.lang-flag { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.45em; vertical-align: -0.2em; border-radius: 2px; overflow: hidden; }
.lang-flag svg { width: 100%; height: 100%; display: block; }

/* 404 page — "Perdiches o camiño": brand background, yellow Camino
   arrow, gold CTA. Inverted relative to the rest of the site. */
.notfound { background: var(--terra); color: #fff; }
/* The (dark blue) logo is invisible on the brand background: white disc + shadow */
.notfound-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%;
  padding: 0.6rem; margin-bottom: 0.4rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.notfound-logo img { width: 160px; height: 160px; display: block; border-radius: 50%; }
.notfound-logo:hover { transform: scale(1.04); }
.notfound-main {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 2.5rem 1.5rem;
}
.notfound-code {
  margin: 0; line-height: 1;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  color: var(--olive);
}
/* Yellow arrow pointing AT the logo (rotated upward, "back to the brand") */
.notfound-arrow {
  width: 44px; height: 44px; color: var(--olive);
  margin: 0 auto 0.5rem;
  transform: rotate(90deg);
  animation: notfound-bounce 2s ease-in-out infinite;
}
@keyframes notfound-bounce {
  0%, 100% { transform: rotate(90deg) translateX(-6px); }
  50%      { transform: rotate(90deg) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .notfound-arrow { animation: none; }
}
.notfound-title {
  margin: 0 0 0.5rem; color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
}
.notfound-sub { margin: 0 auto 0.4rem; color: rgba(255, 255, 255, 0.88); }
.notfound-langs { margin: 0 auto 2.25rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }
.notfound-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--olive); color: var(--terra);
  border: 1px solid var(--olive); font-weight: 600;
  margin: 0 auto 2rem;
}
.notfound-cta:hover { background: #f0c93f; border-color: #f0c93f; }
.notfound-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.notfound-choices a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0.4rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px; color: #fff; text-decoration: none;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  transition: background 0.2s ease, color 0.2s ease;
}
.notfound-choices a:hover { background: #fff; color: var(--terra); }
.notfound-choices .lang-flag { margin-right: 0.4em; }
.notfound-address {
  margin: 3rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5);
}
.notfound-address em { color: var(--olive); font-style: normal; }

/* Cookie notice (GDPR boilerplate) — hidden until OPILON_COOKIE_BANNER=true */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--paper); border-top: 2px solid var(--terra);
  box-shadow: 0 -6px 24px rgba(4, 57, 98, 0.12);
  padding: 1rem 1.25rem;
}
.cookie-banner-inner { max-width: 68rem; margin: 0 auto; }
.cookie-text { margin: 0 0 0.5rem; font-size: 0.9rem; }
.cookie-policy { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--ink-soft); }
.cookie-policy summary { cursor: pointer; color: var(--terra); font-weight: 600; }
.cookie-policy p { margin: 0.5rem 0 0; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-actions .btn { min-height: 40px; }

/* Soft transition on page enter (same feel when navigating
   between hostel and laundry) */
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
main { animation: page-in 0.35s ease both; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3.5rem, 9vw, 6.5rem); }
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: 22rem;
}
.hero h1 {
  font-size: clamp(2.35rem, 5.5vw, 3.9rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--olive);
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--olive);
  margin: -0.75rem 0 1.5rem;
}
.hero p {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 40rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                 /* touch target ≥ 44 px */
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--terra);
  color: var(--paper);
}
.btn-primary:hover { background: var(--terra-deep); color: var(--paper); }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Photo placeholder ---------- */
.photo {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
}
.photo span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 24rem;
}
.photo-hero { aspect-ratio: 5 / 4; }
.photo-tall { aspect-ratio: 4 / 3; }
/* Brand placeholders as <img> (same ratios; swap the src
   for the real photo in Phase 2 — see assets/img/placeholders/) */
img.photo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}
.caption {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.625rem;
}

/* ---------- Sections ---------- */
.section-head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}
.section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  margin-bottom: 0.875rem;
}
.section-head .eyebrow { border-top: none; padding-top: 0; margin-bottom: 0.875rem; }

/* About the hostel: text + photo in two columns */
.sobre-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.sobre-grid .prose { max-width: 38rem; }
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.facts li { display: flex; align-items: baseline; gap: 0.5rem; }

/* Services: definition list with thin rules */
.servicios-list {
  margin: 0;
  border-top: 1px solid var(--line);
}
.servicios-list > div {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.servicios-list dt {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
}
.servicios-list dd {
  margin: 0;
  color: var(--ink-soft);
  max-width: 40rem;
}
.servicios-list .tag { margin-right: 0.5rem; }

/* The Way: short text + panoramic band */
.camino-prose { max-width: 40rem; margin-bottom: 2.5rem; }

/* Bookings */
.reservas-col { max-width: 44rem; }
.engine-placeholder {
  border: 1.5px dashed var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  text-align: center;
  margin: 2.5rem 0 1.75rem;
}
.engine-placeholder h3 {
  font-size: 1.375rem;
  margin-bottom: 0.625rem;
}
.engine-placeholder p {
  color: var(--ink-soft);
  max-width: 30rem;
  margin-inline: auto;
  font-size: 0.9375rem;
}
.contact-line {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}
.contact-line a { font-weight: 600; }

/* ---------- Laundry ---------- */
/* Tables: prices and hours with thin rules (same visual grammar) */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0 0 1.75rem;
}
.table th, .table td {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: 1rem;
}
.table td { color: var(--ink-soft); }
.table .num { text-align: right; white-space: nowrap; }

.laundry-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.laundry-grid .prose { max-width: 38rem; }

/* ---------- Map (OpenStreetMap embed — no cookies, no API key) ---------- */
.map-frame {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 14rem;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-actions { margin: 1.25rem 0 0; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem) 3rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.footer-grid {
  display: grid;
  gap: 2rem;
}
/* Real owner logo: circular (logoweb.png), transparent — ok on
   the white footer background. */
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand .footer-logo { border-radius: 50%; }

/* Social links — brand icons (FB/X/IG), href="#" pending URLs */
.socials { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.socials a {
  width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--terra); border-radius: 10px;
  color: var(--terra); transition: background 0.2s ease, color 0.2s ease;
}
.socials a:hover { background: var(--terra); color: #fff; }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* Cookie preferences trigger — same style as the social icons */
.cookie-trigger {
  width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--terra); border-radius: 10px;
  background: transparent; color: var(--terra); cursor: pointer;
  padding: 0; font: inherit; transition: background 0.2s ease, color 0.2s ease;
}
.cookie-trigger:hover { background: var(--terra); color: #fff; }
.cookie-trigger svg { width: 18px; height: 18px; fill: currentColor; }
.footer-brand svg { width: 24px; height: 24px; color: var(--terra); flex: none; }
.footer-brand strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--terra-deep); }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

/* ---------- Desktop ---------- */
@media (min-width: 48rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .sobre-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .servicios-list > div {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
  .laundry-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .footer-grid {
    grid-template-columns: 2fr 1fr;
  }
}