/* =========================================================
   GET SALTY — main stylesheet
   Brand colours & fonts live in :root below — change them there.
   ========================================================= */

@font-face {
  font-family: "Groen California Sans";
  src: url("../fonts/groen-california-sans.woff2") format("woff2"),
       url("../fonts/groen-california-sans.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Groen California Script";
  src: url("../fonts/groen-california-script.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Brand palette */
  --color-purple: #59295e;        /* brand purple */
  --color-purple-hover: #7a4480;
  --color-yellow: #ff8787;        /* brand coral (accent) */
  --color-yellow-hover: #ffa0a0;
  --color-rust: #9c281a;          /* fez red */
  --color-cream: #fff2e0;         /* brand cream */
  --color-cream-dark: #f3e0c9;
  --color-aubergine: #2f1532;     /* deep purple for dark sections & text */

  --bg-primary: var(--color-cream);
  --bg-secondary: var(--color-cream-dark);
  --bg-accent: var(--color-purple);
  --bg-accent-warm: var(--color-yellow);
  --bg-accent-rust: var(--color-rust);
  --bg-inverse: var(--color-aubergine);
  --text-primary: var(--color-aubergine);
  --text-inverse: var(--color-cream);
  --text-secondary: rgba(47, 21, 50, .62);
  --text-on-purple: var(--color-yellow);
  --text-on-yellow: var(--color-purple);
  --text-on-rust: var(--color-cream);
  --link-color: var(--color-yellow);
  --border-subtle: rgba(47, 21, 50, .1);
  --border-medium: rgba(47, 21, 50, .2);
  --border-accent: var(--color-purple);

  /* Fonts */
  --font-heading: "Groen California Sans", "Syne", sans-serif;
  --font-body: "Patrick Hand", "DM Sans", sans-serif;
  --font-script: "Groen California Script", cursive;

  /* Spacing */
  --space-xs: .5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 3rem;
  --space-xl: 4rem; --space-xxl: 6rem; --space-hero: 8rem;
  --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem;
  --radius-round: 100rem; --radius-btn: .75rem; --radius-card: 1rem;
  --container-max: 1280px; --container-sm: 1000px; --container-lg: 1440px;
  --nav-height: 4rem; --section-padding: 8rem;
}

/* ---------- Base ---------- */
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  font-family: var(--font-body); font-size: 1.05rem; line-height: 1.6; font-weight: 400;
  color: var(--text-primary); background: var(--bg-primary);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
ul, ol { list-style: none }
main { margin-top: calc(-1 * var(--nav-height)) }
main > :first-child { padding-top: calc(var(--nav-height) + var(--section-padding)) }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.04em; letter-spacing: -.01em; margin-bottom: .7em }
h1 { font-size: 4.65rem } h2 { font-size: 2.83rem } h3 { font-size: 2rem }
h4 { font-size: 1.41rem; line-height: 1.3em }
h5 { font-size: 1rem; line-height: 1.3em; letter-spacing: 0 }
h6 { font-size: .71rem; line-height: 1.3em; letter-spacing: .1em }
.h0 { font-family: var(--font-heading); font-weight: 400; font-size: 7.99rem; line-height: 1.04em; letter-spacing: -.01em }
.text-sm { font-size: .92rem } .text-lg { font-size: 1.18rem } .text-xl { font-size: 1.5rem } .text-xxl { font-size: 2rem }
.eyebrow { font-size: .9rem; line-height: 1.3em; text-transform: uppercase; letter-spacing: .1em }
.eyebrow--rust { color: var(--color-rust) }
.tag { font-size: .75rem }
p { margin-bottom: .7em }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 1rem }
.container-sm { max-width: var(--container-sm); margin: 0 auto; padding: 0 1rem }
.section { padding: var(--section-padding) 0 }
.section--dark { background: var(--bg-inverse); color: var(--text-inverse) }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; border-radius: var(--radius-round); cursor: pointer; text-decoration: none; line-height: 1.4 }
.btn-primary-light { background: transparent; border: 2px solid var(--color-aubergine); color: var(--text-primary); padding: .55em 1.6em; box-shadow: 3px 4px 0 var(--color-purple-hover); transition: transform .1s ease, box-shadow .1s ease, background .1s ease }
.btn-primary-light:hover { background: #f1e1f2; box-shadow: 5px 6px 0 var(--color-purple-hover); transform: translate(-1px,-1px) }
.btn-primary-light:active { box-shadow: 1px 2px 0 var(--color-purple-hover); transform: translate(2px,2px) }
.btn-primary-dark { background: transparent; border: 2px solid var(--color-cream); color: var(--color-cream); padding: .55em 1.6em; box-shadow: 3px 4px 0 var(--color-yellow); transition: transform .1s ease, box-shadow .1s ease, background .1s ease }
.btn-primary-dark:hover { background: #ff878726; box-shadow: 5px 6px 0 var(--color-yellow); transform: translate(-1px,-1px) }
.btn-primary-dark:active { box-shadow: 1px 2px 0 var(--color-yellow); transform: translate(2px,2px) }
.btn-secondary { background: transparent; border: 1.5px solid currentColor; color: currentColor; padding: .5em 1.4em; opacity: .75; transition: opacity .2s ease, background .2s ease }
.btn-secondary:hover { opacity: 1; background: #2f153214 }
.btn-secondary--on-dark:hover { background: #fff2e01a }
.btn-primary-rust { background: var(--color-rust); border: 2px solid var(--color-rust); color: var(--color-cream); padding: .55em 1.6em; box-shadow: 3px 4px 0 var(--color-aubergine); transition: transform .1s ease, box-shadow .1s ease, background .1s ease }
.btn-primary-rust:hover { background: #9b382c; border-color: #9b382c; box-shadow: 5px 6px 0 var(--color-aubergine); transform: translate(-1px,-1px) }
.btn-primary-rust:active { box-shadow: 1px 2px 0 var(--color-aubergine); transform: translate(2px,2px) }

/* ---------- Images & placeholders ---------- */
.img-placeholder { width: 100%; background-color: #d9cdd6; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-card); overflow: hidden }
.img-placeholder span { font-family: var(--font-body); font-size: .75rem; color: #7a6e78; letter-spacing: .05em }
/* Real photo inside an image slot */
.img-cover { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); display: block }
.img-slot { width: 100%; overflow: hidden; border-radius: var(--radius-card) }
.img-slot img { width: 100%; height: 100%; object-fit: cover; display: block }

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease }
.reveal.visible { opacity: 1; transform: translateY(0) }
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: .08s }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: .16s }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: .24s }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: .32s }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: .4s }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: .48s }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: .56s }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: .64s }
.lift { transition: transform .25s ease, box-shadow .25s ease }
.lift:hover { transform: translateY(-4px); box-shadow: 0 8px 24px #2f15321a }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background: #59295ea6; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px) }
.nav__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 1rem; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.nav__logo img { height: 1.6rem; width: auto }
.nav__links, .nav__group { display: flex; align-items: center; gap: 1.5rem }
.nav__link { font-family: var(--font-body); font-size: .95rem; color: var(--text-inverse); position: relative; transition: opacity .2s ease }
.nav__link:hover { opacity: .8 }
.nav__link.active:after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translate(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--color-yellow) }
.nav__octopus { display: flex; align-items: center }
.nav__octopus img { height: 2rem; width: auto }
.nav__cta { font-size: .95rem; white-space: nowrap }
.nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: .5rem; position: relative; z-index: 101 }
.nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--text-inverse); transition: transform .3s ease, opacity .3s ease }
.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
.nav-overlay { position: fixed; inset: 0; z-index: 99; background: var(--bg-inverse); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease }
.nav-overlay.open { opacity: 1; pointer-events: auto }
.nav-overlay__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem }
.nav-overlay__link { font-family: var(--font-heading); font-weight: 400; font-size: 2rem; color: var(--text-inverse); transition: opacity .2s ease }
.nav-overlay__link:hover { opacity: .8 }
.nav-overlay__cta { margin-top: 1rem; font-size: 1.13rem }
@media (max-width: 991px) {
  .nav__links, .nav__cta { display: none }
  .nav__hamburger { display: flex; order: 2 }
  .nav__logo { order: 1 }
}

/* ---------- Footer ---------- */
.footer { background: var(--bg-inverse); color: var(--text-inverse); padding: var(--space-hero) 0 var(--space-lg) }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-hero) }
.footer__logo { height: 4rem; width: auto; margin-bottom: var(--space-sm) }
.footer__brand p { color: #fff2e099; max-width: 280px }
.footer__col { display: flex; flex-direction: column; gap: .5rem }
.footer__col h5 { margin-bottom: .5rem }
.footer__col a { font-size: .92rem; color: #fff2e099; transition: color .2s ease }
.footer__col a:hover { color: var(--color-yellow) }
.footer__bottom { border-top: 1px solid rgba(255,242,224,.1); padding-top: var(--space-md); text-align: center }
.footer__bottom p { color: #fff2e066 }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr 1fr } .footer__brand { grid-column: 1 / -1 } }
@media (max-width: 479px) { .footer__grid { grid-template-columns: 1fr } }

/* ---------- WhatsApp button ---------- */
.whatsapp-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: var(--color-aubergine); color: var(--color-cream); display: flex; align-items: center; justify-content: center; box-shadow: 2px 3px 0 var(--color-purple-hover); transition: transform .15s ease, box-shadow .15s ease }
.whatsapp-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 5px 0 var(--color-purple-hover) }
.whatsapp-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--color-purple-hover) }
.whatsapp-btn svg { width: 28px; height: 28px }
.whatsapp-btn__tooltip { position: absolute; right: calc(100% + .75rem); top: 50%; transform: translateY(-50%); background: var(--color-aubergine); color: var(--color-cream); font-family: var(--font-body); font-size: .85rem; padding: .4em .8em; border-radius: var(--radius-lg); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease }
.whatsapp-btn:hover .whatsapp-btn__tooltip { opacity: 1 }
@media (max-width: 479px) { .whatsapp-btn { width: 48px; height: 48px; bottom: 1rem; right: 1rem } .whatsapp-btn svg { width: 24px; height: 24px } .whatsapp-btn__tooltip { display: none } }

/* ---------- Responsive type ---------- */
@media (max-width: 991px) {
  :root { --section-padding: 7rem }
  .h0 { font-size: 6.39rem } h1 { font-size: 3.52rem } h2 { font-size: 2.26rem } h3 { font-size: 1.6rem } h4 { font-size: 1.27rem }
  .text-xl { font-size: 1.4rem } .text-xxl { font-size: 1.8rem }
}
@media (max-width: 767px) {
  :root { --section-padding: 5rem }
  .h0 { font-size: 5.12rem } h1 { font-size: 2.62rem } h2 { font-size: 1.81rem } h3 { font-size: 1.28rem } h4 { font-size: 1.15rem }
  .text-lg { font-size: 1.1rem } .text-xl { font-size: 1.3rem } .text-xxl { font-size: 1.6rem } .eyebrow { font-size: .8rem }
}
@media (max-width: 479px) {
  :root { --section-padding: 4rem }
  .h0 { font-size: 4.09rem } h1 { font-size: 1.89rem } h2 { font-size: 1.45rem } h3 { font-size: 1.02rem } h4 { font-size: 1.03rem }
  .text-lg { font-size: 1.1rem } .text-xl { font-size: 1.2rem } .text-xxl { font-size: 1.4rem }
}