/*
Theme Name: Azoul Surf
Author: Azoul Surf Hostel
Description: Animated one-page surf activities and packages theme for Azoul Surf Hostel, Taghazout.
Version: 1.0.0
Text Domain: azoul-surf
*/
:root{--navy:#06283d;--blue:#087f8c;--aqua:#39c6bb;--sand:#f4ead7;--sun:#ffb347;--ink:#123;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{text-decoration:none;color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.site-header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(6,40,61,.78);backdrop-filter:blur(12px);color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}.nav{height:74px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:900;font-size:1.35rem;letter-spacing:.04em}.brand span{color:var(--aqua)}.menu{display:flex;gap:24px;align-items:center;font-weight:700;font-size:.94rem}.pill,.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:13px 21px;font-weight:850;cursor:pointer;transition:.25s}.pill,.btn-primary{background:var(--sun);color:#17212b}.btn-primary:hover,.pill:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,179,71,.35)}.btn-outline{border:2px solid rgba(255,255,255,.7);color:#fff;background:transparent}.hero{min-height:100svh;display:grid;align-items:end;position:relative;overflow:hidden;color:#fff}.hero-bg{position:absolute;inset:-4%;background:url('assets/images/hero.png') center/cover;animation:drift 18s ease-in-out infinite alternate}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,25,39,.86),rgba(3,25,39,.28)),linear-gradient(0deg,rgba(3,25,39,.65),transparent 55%)}@keyframes drift{to{transform:scale(1.08) translate3d(-1%,1%,0)}}.hero-content{position:relative;z-index:2;padding:160px 0 92px;max-width:720px}.eyebrow{display:inline-flex;gap:9px;align-items:center;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:900;color:#8df1e8}.hero h1{font-size:clamp(3rem,8vw,6.7rem);line-height:.94;margin:18px 0 22px;letter-spacing:-.055em}.hero p{font-size:clamp(1.05rem,2vw,1.3rem);max-width:610px;color:#eef9fa}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.scroll{position:absolute;right:5%;bottom:38px;z-index:4;writing-mode:vertical-rl;letter-spacing:.2em;text-transform:uppercase;font-size:.7rem}.section{padding:96px 0}.section.alt{background:var(--sand)}.kicker{text-transform:uppercase;color:var(--blue);font-size:.78rem;letter-spacing:.18em;font-weight:900}.section h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.04;letter-spacing:-.045em;margin:8px 0 14px}.lead{max-width:680px;color:#52636e;font-size:1.08rem}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:42px}.activity{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 14px 45px rgba(6,40,61,.10);transition:.35s;cursor:pointer}.activity:hover{transform:translateY(-8px);box-shadow:0 22px 55px rgba(6,40,61,.18)}.activity-media{height:310px;overflow:hidden;position:relative}.activity-media img{width:100%;height:100%;object-fit:cover;transition:.65s}.activity:hover img{transform:scale(1.06)}.badge{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.92);padding:8px 13px;border-radius:999px;font-weight:900;color:var(--navy)}.activity-body{padding:24px;display:flex;align-items:end;justify-content:space-between;gap:18px}.activity h3{margin:0;font-size:1.45rem}.activity small{color:#647680}.price{font-size:1.25rem;font-weight:950;color:var(--blue);white-space:nowrap}.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}.package{background:#fff;border:1px solid #dce9e9;border-radius:24px;padding:30px;position:relative;transition:.3s}.package.featured{background:var(--navy);color:#fff;transform:translateY(-12px);border:0}.package:hover{transform:translateY(-8px)}.package.featured:hover{transform:translateY(-18px)}.package h3{font-size:1.8rem;margin:10px 0}.package ul{padding-left:20px;min-height:190px}.package .btn{width:100%;background:var(--aqua);color:var(--navy)}.tag{display:inline-block;background:#dff8f5;color:#06706f;padding:5px 11px;border-radius:99px;font-weight:850;font-size:.78rem}.featured .tag{background:var(--sun);color:#222}.booking{background:linear-gradient(135deg,var(--navy),#0b5968);color:#fff;border-radius:34px;padding:clamp(26px,6vw,64px);display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}.booking h2{margin-top:0}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:.78rem;font-weight:850;color:#c9e8e8}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:13px;padding:13px;font:inherit}.field select option{color:#111}.field textarea{min-height:92px;resize:vertical}.form .btn{grid-column:1/-1;background:#25d366;color:#062b18}.footer{padding:35px 0;background:#031c2b;color:#bad2d9}.footer .wrap{display:flex;justify-content:space-between;gap:20px}.reveal{opacity:0;transform:translateY(28px);transition:.8s}.reveal.show{opacity:1;transform:none}.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(1,18,27,.78);padding:18px}.modal.open{display:grid}.modal-card{background:#fff;width:min(650px,100%);border-radius:25px;overflow:hidden;max-height:90vh;overflow-y:auto}.modal-card img{width:100%;height:270px;object-fit:cover}.modal-copy{padding:27px}.modal-copy h3{font-size:2rem;margin:0}.modal-close{position:fixed;top:22px;right:22px;border:0;border-radius:50%;width:44px;height:44px;background:#fff;font-size:1.4rem;cursor:pointer}.float-wa{position:fixed;right:18px;bottom:18px;z-index:45;background:#25d366;color:#062b18;border-radius:999px;padding:13px 18px;font-weight:900;box-shadow:0 10px 35px rgba(0,0,0,.25)}
@media(max-width:800px){.menu a:not(.pill){display:none}.hero-content{padding-bottom:80px}.grid,.packages,.booking{grid-template-columns:1fr}.packages{gap:16px}.package.featured{transform:none}.activity-media{height:245px}.booking{gap:18px}.form{grid-template-columns:1fr}.field{grid-column:1/-1}.footer .wrap{flex-direction:column}.scroll{display:none}.section{padding:72px 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}