/* ==========================================================================
   Melman's – Coffee & More
   style.css: fonts, variables, reset, base, header, footer, shared elements
   ========================================================================== */

/* --- Fonts (local, no external requests) --- */
@font-face{font-family:'Outfit';src:url('../assets/fonts/outfit-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Kaushan Script';src:url('../assets/fonts/kaushan-script-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Baloo 2';src:url('../assets/fonts/baloo-2-variable.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;}

/* Alternative font candidates (inactive – uncomment to test)
@font-face{font-family:'DM Sans';src:url('../assets/fonts/dm-sans-variable.woff2') format('woff2');font-weight:100 1000;font-display:swap;}
@font-face{font-family:'Manrope';src:url('../assets/fonts/manrope-variable.woff2') format('woff2');font-weight:200 800;font-display:swap;}
@font-face{font-family:'Nunito';src:url('../assets/fonts/nunito-variable.woff2') format('woff2');font-weight:200 1000;font-display:swap;}
@font-face{font-family:'Fredoka';src:url('../assets/fonts/fredoka-variable.woff2') format('woff2');font-weight:300 700;font-display:swap;}
@font-face{font-family:'Caveat';src:url('../assets/fonts/caveat-400.woff2') format('woff2');font-weight:400;font-display:swap;}
*/

/* --- Variables --- */
:root{
  /* Palette: black / grey / white + one accent (magenta) in shades */
  --white:#FFFFFF;
  --gray-50:#F6F6F7;--gray-100:#EDEDEF;--gray-200:#DDDDE1;--gray-300:#C9C9CE;--gray-500:#8A8A90;
  --ink:#1A1A1D;--ink-soft:#56565C;
  --dark:#161618;--dark-2:#232326;
  --m-900:#5C1039;--m-700:#A31E68;--m-500:#D82E8C;--m-300:#EC7DB8;--m-200:#F5B5D7;--m-100:#FBE3EF;--m-50:#FDF3F8;
  --accent:var(--m-500);
  /* Kids Zone: shades of the same accent */
  --kids-1:#8E1A57;--kids-2:var(--m-700);--kids-3:var(--m-500);--kids-4:#C2287C;
  /* Only exception to the palette: "booked" marker in the calendar */
  --booked:#E02D2D;

  --surface-dark:var(--dark);
  --radius:14px;--radius-lg:26px;
  --shadow:0 18px 50px rgba(26,26,29,.09);
  --ease:cubic-bezier(.3,.8,.3,1);

  --font-body:'Outfit',system-ui,sans-serif;
  --font-script:'Kaushan Script',cursive;
  --font-kids:'Baloo 2','Outfit',system-ui,sans-serif;

  --header-h:68px;
  color-scheme:light;
}

/* --- Reset & base --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);background:var(--white);color:var(--ink);line-height:1.65;font-weight:340;overflow-x:hidden;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;}
button{font:inherit;cursor:pointer;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Skip link */
.skip-link{position:absolute;left:1rem;top:-100px;z-index:2000;background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;font-weight:600;}
.skip-link:focus{top:1rem;}

/* --- Header --- */
.site-header{position:sticky;top:0;z-index:900;background:rgba(30,30,30,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--white);}
.header-inner{max-width:1280px;margin:0 auto;padding:.85rem 2rem;display:flex;align-items:center;gap:2rem;}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;flex:none;}
.logo img{height:42px;width:auto;}
.logo-kids{display:none;font-family:var(--font-kids);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--m-300);}
[data-zone="kids"] .logo-kids{display:inline-block;}
.main-nav{display:flex;gap:1.4rem;margin-left:auto;align-items:center;}
.main-nav a{color:rgba(238,238,238,.82);text-decoration:none;font-size:.85rem;letter-spacing:.04em;font-weight:430;position:relative;padding:.35rem 0;white-space:nowrap;}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:#fff;}
.burger{display:none;margin-left:auto;background:none;border:none;width:44px;height:44px;position:relative;}
.burger span{position:absolute;left:10px;right:10px;height:2.5px;border-radius:99px;background:var(--white);transition:transform .35s ease,opacity .25s ease;}
.burger span:nth-child(1){top:14px;}.burger span:nth-child(2){top:21px;}.burger span:nth-child(3){top:28px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--dark);z-index:950;padding:5.4rem 2rem 2rem;transform:translateX(105%);transition:transform .4s cubic-bezier(.22,.8,.3,1),visibility .4s;display:flex;flex-direction:column;gap:.4rem;visibility:hidden;}
.mobile-panel.open{transform:none;visibility:visible;box-shadow:-20px 0 60px rgba(0,0,0,.35);}
.mobile-panel a{color:var(--white);text-decoration:none;font-size:1.05rem;padding:.75rem .2rem;border-bottom:1px solid rgba(238,238,238,.08);}
.mobile-panel a[aria-current="page"]{color:var(--m-300);}
.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:940;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.panel-overlay.show{opacity:1;pointer-events:auto;}
@media (max-width:1180px){.main-nav{display:none;}.burger{display:block;}}

/* --- Layout & typography --- */
.wrap{max-width:1240px;margin:0 auto;padding:0 2rem;}
section{padding:5rem 0;position:relative;}
h1,h2,h3{font-weight:640;letter-spacing:-.02em;line-height:1.12;}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);}
.eyebrow{font-family:var(--font-script);color:var(--accent);font-size:1.5rem;display:inline-block;margin-bottom:.6rem;}
.lead{color:var(--ink-soft);max-width:58ch;}
.lead + .lead{margin-top:1rem;}
.lead a,.text-link{color:var(--m-700);text-decoration-thickness:1.5px;text-underline-offset:3px;}
.lead a:hover,.text-link:hover{color:var(--accent);}
.leaf-line{width:64px;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--gray-500),var(--accent));margin:1rem 0 1.2rem;}
.bg-soft{background:var(--gray-50);}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:var(--white);text-decoration:none;border:none;border-radius:999px;padding:.85rem 1.7rem;font-weight:540;font-size:.95rem;transition:transform .25s ease,box-shadow .25s ease;}
.btn:hover{transform:translateY(-2px);}
.btn svg{width:18px;height:18px;flex:none;}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(216,46,140,.28);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(34,34,34,.28);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-kids{background:linear-gradient(100deg,var(--m-500),var(--m-300));color:#fff;font-family:var(--font-kids);font-weight:700;box-shadow:0 10px 26px rgba(216,46,140,.3);}
.btn-sm{padding:.6rem 1.15rem;font-size:.84rem;}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;}

/* --- Images & placeholders --- */
.media{border-radius:var(--radius-lg);overflow:hidden;background:var(--gray-100);}
.media img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* --- Decorative facade plant (crop of one image via SVG viewBox) --- */
.deco{position:absolute;pointer-events:none;z-index:0;}
.deco.crop{-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);}
.deco.soft{filter:brightness(1.45) saturate(.75);}
.has-deco{overflow:hidden;}
.has-deco > .wrap{position:relative;z-index:1;}

/* --- Page hero (sub pages) --- */
.page-hero{background:var(--surface-dark);color:var(--white);padding:2.3rem 0;overflow:hidden;}
.page-hero .wrap{position:relative;z-index:1;}
.page-hero h1{font-size:clamp(1.65rem,3.2vw,2.4rem);color:#fff;max-width:24ch;}
.page-hero .eyebrow{color:var(--m-300);}
.page-hero p{color:rgba(238,238,238,.75);max-width:52ch;margin-top:.6rem;font-size:.95rem;}

/* --- Footer --- */
.site-footer{background:var(--surface-dark);color:rgba(238,238,238,.75);padding:3.6rem 0 2.2rem;position:relative;overflow:hidden;}
.site-footer .wrap{position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;margin-bottom:2.4rem;}
.site-footer .logo{margin-bottom:.9rem;}
.site-footer .logo img{height:36px;}
.site-footer h2{color:#fff;font-weight:560;margin-bottom:.8rem;font-size:.92rem;letter-spacing:.06em;}
.site-footer ul{list-style:none;}
.site-footer li{padding:.2rem 0;font-size:.9rem;}
.site-footer a{text-decoration:none;color:inherit;opacity:.85;}
.site-footer a:hover{opacity:1;color:var(--m-300);}
.footer-bar{border-top:1px solid rgba(238,238,238,.1);padding-top:1.5rem;display:flex;justify-content:space-between;font-size:.78rem;opacity:.7;flex-wrap:wrap;gap:1rem;}
.footer-bar nav{display:flex;gap:1rem;flex-wrap:wrap;}
.footer-bar button{background:none;border:none;color:inherit;font-size:inherit;opacity:.85;padding:0;}
.footer-bar button:hover{opacity:1;color:var(--m-300);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr;gap:2rem;}}

/* --- Responsive --- */
@media (max-width:900px){section{padding:3.6rem 0;}}
@media (max-width:640px){.header-inner{padding:.75rem 1.2rem;}.wrap{padding:0 1.2rem;}.logo img{height:36px;}}

/* --- Page transitions (progressive enhancement) --- */
@view-transition{navigation:auto;}

/* --- Reduced motion --- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

/* Smaller decorations on phones (keep text readable) */
@media (max-width:640px){.deco{max-width:52vw;opacity:.35!important;}}