/* ──────────────────────────────────────────────────
   TAGUS FILMS — shared.css
   Loaded by all pages. Page-specific overrides
   live in each page's <style> block.
────────────────────────────────────────────────── */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

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

/* TOKENS */
:root{
  --deep:#2C3642;
  --indigo:#4A5C73;
  --indigo-light:#7A95AD;
  --neutral:#F4F2EE;
  --neutral2:#EAE7E2;
  --red:#7A2E3A;
  --red-light:#9B3D4A;
  --ink:#12171C;
  --ink-mid:#3D4D5C;
  --ink-light:#6B7D8C;
  --border:#D8D4CE;
}

/* BASE */
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--neutral);color:var(--ink);font-weight:300;line-height:1.7;min-width:1200px}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;min-width:1200px;width:100%;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.4rem 3.5rem;background:rgba(244,242,238,0.93);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-logo img{height:52px;width:auto;display:block}
.nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center}
.nav-links a{font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-light);text-decoration:none;transition:color 0.25s;font-weight:500}
.nav-links a:hover{color:var(--red)}
.nav-active{color:var(--red) !important}
.nav-mobile .nav-active{color:var(--red) !important}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;padding:0.5rem 1.4rem;border:1px solid var(--red);color:var(--red) !important;transition:background 0.25s,color 0.25s}
.nav-cta:hover{background:var(--red);color:var(--neutral) !important}

/* LANGUAGE SWITCHER */
.nav-left{display:flex;align-items:center;gap:1.8rem;min-width:0}
.lang-switch{display:flex;align-items:center;gap:0.45rem;font-size:0.65rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.lang-switch a{color:var(--ink-light);text-decoration:none;transition:color 0.2s}
.lang-switch a:hover{color:var(--red)}
.lang-active{color:var(--red)}
.lang-sep{color:var(--border)}

/* HAMBURGER — hidden on desktop, shown on mobile */
.nav-hamburger{display:none;flex-direction:column;justify-content:space-between;width:44px;height:44px;padding:13px 9px;cursor:pointer;background:none;border:none}
.nav-hamburger span{display:block;width:100%;height:1.4px;background:var(--ink-mid);transition:transform 0.38s cubic-bezier(0.4,0,0.2,1),opacity 0.25s ease;transform-origin:center}
.nav-hamburger.open span:nth-child(1){transform:translateY(8.3px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-8.3px) rotate(-45deg)}

/* MOBILE NAV OVERLAY */
.nav-mobile{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--neutral);z-index:200;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;pointer-events:none;opacity:0;transform:scale(0.97);transition:opacity 0.28s ease,transform 0.28s ease}
.nav-mobile.open{pointer-events:auto;opacity:1;transform:scale(1)}
.nav-mobile .lang-switch{display:flex;align-items:center;gap:0.6rem;font-size:0.95rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;color:var(--ink-light);margin-top:2rem}
.nav-mobile .lang-switch a{color:var(--ink-light);text-decoration:none;transition:color 0.2s}
.nav-mobile .lang-switch a:hover{color:var(--red)}
.nav-mobile a{font-size:1.2rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-light);text-decoration:none;font-weight:500;transition:color 0.25s}
.nav-mobile a.nav-active{color:var(--red) !important;font-weight:700;font-size:1.3rem}
.nav-mobile a:hover{color:var(--red)}
.nav-mobile-close{position:absolute;top:2rem;right:2rem;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--ink-light);line-height:1}
.nav-mobile .nav-cta{padding:0.5rem 1.4rem;border:1px solid var(--red);color:var(--red)}

/* ── PAGE HEADER (secondary pages) ── */
.page-header{padding:10rem 3.5rem 5rem;border-bottom:1px solid var(--border)}
.page-header-title{font-family:'EB Garamond',serif;font-size:clamp(2.8rem,4.2vw,4.2rem);font-weight:400;line-height:1.04;color:var(--red)}
.page-header-title em{font-style:italic}

/* ── FOOTER ── */
footer{padding:3rem 3.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;background:var(--neutral)}
.footer-copy{font-size:0.75rem;color:var(--ink-light)}
.footer-links{display:flex;gap:2rem;list-style:none}
.footer-links a{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-light);text-decoration:none;transition:color 0.2s;font-weight:500}
.footer-links a:hover{color:var(--red)}

/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.75s ease,transform 0.75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}

/* ── MOBILE ── */
@media(max-width:900px){
  body{min-width:0}
  nav{padding:1.1rem 1rem;position:static;width:100%;min-width:0}
  .nav-left{align-items:center}
  nav>.lang-switch{display:flex;align-items:center;font-size:0.62rem}
  .nav-links{display:none}
  .nav-hamburger{
    display:flex !important;position:fixed;
    top:-100px;right:1.2rem;z-index:150;
    border-radius:8px;
    background:rgba(244,242,238,0.70);
    border:0.5px solid var(--red);
    box-shadow:0 2px 10px rgba(18,23,28,0.08);
    backdrop-filter:blur(8px);
    transition:transform 0.28s ease, opacity 0.28s ease;
    animation:hbgFadeIn 0.35s ease forwards;
  }
  @keyframes hbgFadeIn{from{opacity:0}to{opacity:1}}
  .nav-hamburger.open{
    transform:scale(1.08);
    opacity:0.95;
  }
  .nav-logo img{height:40px !important;max-width:100%}
  .nav-hamburger span{background:var(--red)}
  .page-header-title{font-size:clamp(2.4rem,8.5vw,3.4rem)}
  footer{flex-direction:column;text-align:center;padding:2.2rem 1.5rem 2.5rem;gap:1.25rem}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:1.2rem 1.6rem}
  .footer-links a[href="contact.html"]{color:var(--red)}
}