/* COLZA — device-specific layouts, loaded after style.css.
   Mobile ≤640px · Tablet 641–1024px · Laptop 1025–1439px · Desktop ≥1440px */

/* Language-tagged text (custom sections, dock labels) */
.cl{display:none}
html[lang=ckb] .cl[data-cl=ckb],html[lang=ar] .cl[data-cl=ar],html[lang=en] .cl[data-cl=en]{display:inline}

/* Elements that only exist on smaller screens */
.menu-toggle,.mobile-dock,.menu-backdrop{display:none}
.menu-toggle{width:46px;height:46px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff10;color:#fff;cursor:pointer;flex:none;position:relative;padding:0}
.menu-toggle span{position:absolute;left:14px;right:14px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,top .3s,opacity .2s}
.menu-toggle span:nth-child(1){top:17px}
.menu-toggle span:nth-child(2){top:27px}
html.menu-open .menu-toggle span:nth-child(1){top:22px;transform:rotate(45deg)}
html.menu-open .menu-toggle span:nth-child(2){top:22px;transform:rotate(-45deg)}
html.menu-open{overflow:hidden}

/* ───────────── Desktop ≥1440 ───────────── */
@media (min-width:1440px){
  .section{padding-inline:max(8%,calc((100vw - 1320px)/2))}
  header{padding-inline:max(6%,calc((100vw - 1400px)/2))}
  header:after{left:max(6%,calc((100vw - 1400px)/2));right:max(6%,calc((100vw - 1400px)/2))}
  footer{padding-inline:max(6%,calc((100vw - 1400px)/2))}
  .cx-body p,.intro-copy p{font-size:19px}
}

/* ───────────── Laptop 1025–1439 ───────────── */
@media (min-width:1025px) and (max-width:1439px){
  header{height:88px;padding-inline:5%}
  header:after{left:5%;right:5%}
  header nav{gap:30px}
  .section{padding:90px 6%}
  .hero{min-height:720px}
  .hero h1{font-size:clamp(46px,4.9vw,68px)}
  .chapter-nav a{padding:20px 4%}
  .cx-news{grid-template-columns:repeat(3,1fr)}
}

/* ───────────── Tablet + Mobile: slide-in menu ───────────── */
@media (max-width:1024px){
  html body header{height:84px;padding:0 5%;flex-wrap:nowrap;gap:14px;align-content:normal}
  header:after{left:5%;right:5%}
  html body header .logo{width:150px;height:46px}
  html body header .logo img{width:150px;top:-15px}
  .languages{margin-inline-start:auto}
  .menu-toggle{display:block}
  html body header nav{
    position:fixed;inset:0 0 0 auto;width:min(380px,86vw);z-index:60;order:0;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:100px 28px 40px;background:#06150ef7;backdrop-filter:blur(18px);
    font-size:22px;overflow-y:auto;transform:translateX(105%);transition:transform .35s ease;
    box-shadow:-20px 0 60px #0008;visibility:hidden}
  html[dir=rtl] body header nav{inset:0 auto 0 0;transform:translateX(-105%);box-shadow:20px 0 60px #0008}
  html body header nav a{padding:18px 4px;border-bottom:1px solid #ffffff18;color:#eef2ea;display:flex;justify-content:space-between;align-items:center}
  html body header nav a:after{content:'←';color:var(--gold);font-size:18px}
  html[dir=ltr] body header nav a:after{content:'→'}
  html.menu-open body header nav{transform:none;visibility:visible}
  html.menu-open .menu-toggle{position:relative;z-index:61;background:var(--gold);color:var(--deep);border-color:var(--gold)}
  html.menu-open .languages{position:relative;z-index:61}
  /* The header must sit above the backdrop so the drawer inside it is not dimmed */
  html.menu-open body header{z-index:70}
  .menu-backdrop{display:block;position:fixed;inset:0;z-index:55;background:#0009;opacity:0;pointer-events:none;transition:opacity .3s}
  html.menu-open .menu-backdrop{opacity:1;pointer-events:auto}
  .cx-grid{grid-template-columns:1fr;gap:30px}
}

/* ───────────── Tablet 641–1024 ───────────── */
@media (min-width:641px) and (max-width:1024px){
  /* Fixed header keeps the menu reachable; the chapter bar docks right under it */
  html body header{position:fixed;height:76px;transition:background .3s,box-shadow .3s}
  header.solid{background:#06150efa;box-shadow:0 6px 24px #0006}
  header.solid:after{opacity:0}
  html{scroll-padding-top:140px}
  .chapter-nav{top:76px}
  .section{padding:80px 6%}
  .hero{min-height:760px;height:100svh;max-height:1100px}
  .hero .hero-content{width:78%;padding-top:180px}
  .hero h1{font-size:clamp(46px,7vw,62px)}
  .hero p{font-size:17px}
  .chapter-nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:0}
  .chapter-nav::-webkit-scrollbar{display:none}
  .chapter-nav a{flex:1 0 auto;justify-content:center;padding:20px 26px}
  .intro-grid{grid-template-columns:1fr 1fr;gap:6%}
  .values{grid-template-columns:1fr 1fr;gap:6%}
  .factory-details{grid-template-columns:1fr 1fr;gap:30px}
  .product-heading{grid-template-columns:1fr 1fr;gap:30px}
  .product-detail{grid-template-columns:1fr 1fr;gap:18px 30px}
  .identity-grid{grid-template-columns:1fr 1fr;gap:30px}
  .identity-art{min-height:480px}
  .cx-news{grid-template-columns:repeat(2,1fr)}
  .cx-grid:not(.solo){grid-template-columns:1fr 1fr;gap:5%}
  footer{flex-wrap:wrap;gap:22px}
  footer p{order:3;width:100%;max-width:none}
  /* Landscape tablets: give the heading column more room */
  @media (orientation:landscape) and (min-width:900px){
    .intro-grid{grid-template-columns:1.2fr 1fr}
  }
}

/* ───────────── Mobile ≤640 ───────────── */
@media (max-width:640px){
  html{scroll-padding-top:74px}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  html body header{position:fixed;height:66px;padding:0 16px;gap:10px;transition:background .3s,box-shadow .3s}
  header:after{left:16px;right:16px}
  header.solid{background:#06150efa;box-shadow:0 6px 24px #0006}
  header.solid:after{opacity:0}
  html body header .logo{width:112px;height:36px}
  html body header .logo img{width:112px;top:-11px}
  .languages{padding:2px}
  .languages button{padding:7px 9px;font-size:12px;min-height:32px}
  .menu-toggle{width:42px;height:42px}
  .menu-toggle span{left:12px;right:12px}
  .menu-toggle span:nth-child(1){top:15px}
  .menu-toggle span:nth-child(2){top:25px}
  html.menu-open .menu-toggle span:nth-child(1),html.menu-open .menu-toggle span:nth-child(2){top:20px}
  html body header nav,html[dir=rtl] body header nav{inset:0;width:100%;padding:96px 24px calc(100px + env(safe-area-inset-bottom));font-size:24px;box-shadow:none}

  .chapter-nav{display:none}
  .section{padding:56px 20px}
  h2{font-size:clamp(30px,8.5vw,38px)}
  .hero{min-height:620px;height:100svh;max-height:none}
  .hero .hero-content{width:100%;padding:120px 20px 0}
  .hero h1,html[dir=ltr] .hero h1{font-size:clamp(34px,10vw,44px);line-height:1.4;letter-spacing:0}
  .hero .hero-content p{font-size:15px;max-width:none}
  .hero .button{width:100%;justify-content:space-between;padding:15px 22px}
  .hero-wordmark{font-size:170px;bottom:150px}
  .hero .factory-teaser{bottom:92px;left:20px;right:20px;width:auto}
  html[dir=ltr] .hero .factory-teaser{left:20px;right:20px}
  .hero-bottom{bottom:20px;padding-inline:20px}
  .ticker div{font-size:15px}
  .intro h2{font-size:34px}
  .intro-copy p,.cx-body p{font-size:16px;line-height:2}
  .factory-heading h2,.product-heading h2,.identity-content h2,.values h2{font-size:32px}
  .factory-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .factory-tabs::-webkit-scrollbar{display:none}
  .steps{grid-template-columns:1fr}
  .product-family{margin-inline:-20px}
  .size-selector button{min-height:64px}
  .product-detail{grid-template-columns:1fr}
  .identity-art{min-height:380px}
  .closing{padding-block:64px 72px}
  .closing h2{font-size:30px}
  .closing .button{width:100%;justify-content:space-between}
  footer{flex-direction:column;align-items:center;text-align:center;gap:18px;padding:36px 20px}
  footer p{order:0;width:100%}
  footer .top{display:none}
  .cx-news{grid-template-columns:1fr;gap:18px}
  .cx-contact a,.cx-contact p{font-size:17px;min-height:48px}
  .cx-contact a{background:#ffffff08;border:1px solid #ffffff15;border-radius:12px;padding:6px 12px}
  .button,.languages button,.cx-contact a{-webkit-tap-highlight-color:transparent}

  /* Bottom navigation bar */
  .mobile-dock{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;
    height:60px;background:#06150ef0;backdrop-filter:blur(16px);border:1px solid #ffffff1c;border-radius:18px;box-shadow:0 10px 30px #0008;transition:transform .3s}
  html.menu-open .mobile-dock{transform:translateY(140%)}
  .mobile-dock a{display:grid;place-items:center;align-content:center;gap:3px;color:#b8c6b6;font-size:11px;text-decoration:none;min-width:0}
  .mobile-dock a b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 4px}
  .mobile-dock svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-dock a.active{color:var(--gold)}
  .mobile-dock a.active svg{transform:translateY(-1px)}
}

/* Very small phones */
@media (max-width:360px){
  html body header .logo{width:96px}
  html body header .logo img{width:96px;top:-9px}
  .languages button{padding:6px 7px;font-size:11px}
  .hero h1{font-size:32px}
}

/* ───────────── Animated logo flower ─────────────
   The logo is two layers: colza-logo-word.png (static) and colza-logo-flower.png (the flower inside the O).
   Geometry comes from the source logo (1774×887): the flower box starts at 26.55% from the left, is 18.88% wide,
   and sits 29.65% down the image. The logo image is shifted up ≈9.7% of its width inside .logo, so the flower's
   top is ≈5.1% of the width (margin-top percentages are relative to width). The pivot is the base of the stem. */
.logo{position:relative}
.logo span.logo-flower{display:block;position:absolute;left:26.55%;top:0;margin-top:5.1%;width:18.88%;aspect-ratio:1;
  background:url(/assets/colza-logo-flower.png) center/contain no-repeat;transform-origin:47.2% 99.4%;pointer-events:none;
  animation:colza-bloom 1.5s cubic-bezier(.22,1.35,.36,1) .25s both,colza-sway 6s ease-in-out 1.75s infinite}
footer .logo span.logo-flower{margin-top:5.3%}
.logo:hover span.logo-flower{animation:colza-wiggle .9s ease-in-out both}
/* style.css hides '.logo span' (a tagline) below 800px; the more specific span.logo-flower rules keep the flower */
.logo.logo-custom span.logo-flower{display:none}
@keyframes colza-bloom{0%{opacity:0;transform:scale(.15) rotate(-50deg)}55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes colza-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) scale(1.02)}75%{transform:rotate(3.5deg) scale(1.035)}}
@keyframes colza-wiggle{0%{transform:rotate(0)}30%{transform:rotate(-14deg) scale(1.08)}60%{transform:rotate(9deg) scale(1.05)}85%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
html.motion-off .logo span.logo-flower{animation:none}
@media (prefers-reduced-motion:reduce){.logo span.logo-flower{animation:none!important}}