/* BirdieCar: HIG-inspired hierarchy, original Montserrat and brand green.
   Semantic roles are project tokens, not Apple's adaptive system colors. */
:root {
  --font-body: Montserrat, Arial, sans-serif;
  --color-accent: #287858;
  --color-accent-hover: #206348;
  --color-brand: #56b28d;
  --color-label: #1d1d1f;
  --color-secondary: #626268;
  --color-background: #fff;
  --color-surface: #f5f5f7;
  --color-separator: #dcdce1;
  --color-success: #24754b;
  --color-danger: #b42318;
  --color-glass: rgba(255,255,255,.94);
  --space-1: 4px; --space-2: 8px; --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px;
  --radius-control: 12px; --radius-card: 24px;
  --shadow-float: 0 16px 48px #00000012, 0 2px 8px #00000006;
  font-family: var(--font-body);
  color: var(--color-label); background: var(--color-background);
}
body {font-family:var(--font-body)}
p,.product-page p,.category-copy p,.video-grid p,.faq-list p,.dialog-copy p,
.product-page .section-description {font-size:17px!important;line-height:1.65;color:var(--color-secondary)}
h1,.product-page h1,.category-hero h1 {font-size:clamp(28px,3.2vw,40px);line-height:1.2;letter-spacing:-.025em}
h2,.product-page h2,.category-copy h2,.category-heading h2,.category-heading h3,
.section-heading h2 {font-size:clamp(24px,2.4vw,34px);line-height:1.25;letter-spacing:-.02em}
h3,.offer-body h3,.use-card h3 {font-size:22px;line-height:1.35;letter-spacing:-.015em}
.section,.product-page .section {padding-top:var(--space-7);padding-bottom:var(--space-7)}
.section-heading {max-width:850px;margin-bottom:var(--space-6)}
.section-heading p {margin-top:var(--space-3)}
.button,.product-ctas .button {min-height:44px;min-width:44px;padding:12px 24px;border-radius:999px;font-size:15px;line-height:1.4;font-weight:600;text-transform:none;white-space:normal;text-align:center;background:var(--color-accent);color:#fff;border:1px solid transparent;transition:background .18s,box-shadow .18s}
.button:hover {background:var(--color-accent-hover)}
.button.light,.footer-top .button {background:white;color:var(--color-accent)}
.button.light:hover,.footer-top .button:hover {background:#f0f5f2}
.button.outline {background:#00000026;border-color:#ffffff99;color:#fff}
.button.outline:hover {background:#00000040}
.product-ctas .button {background:var(--color-surface);border-color:var(--color-separator);color:var(--color-label)}
button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid var(--color-accent);outline-offset:4px}
.hero :is(a,button):focus-visible,.product-hero :is(a,button):focus-visible,.header :is(a,button,summary):focus-visible {outline-color:#fff;box-shadow:0 0 0 6px #0008}
.header {background:linear-gradient(#0005,transparent);font-size:15px}
.header-contact,.nav-group summary,.nav-link,.dropdown a,.mobile-links a {min-height:44px;display:flex;align-items:center}
.nav-group summary {gap:8px}
.dropdown,.model-dropdown {background:var(--color-glass);border:1px solid #ffffffaa;border-radius:20px;box-shadow:var(--shadow-float)}
.header:has(.nav-group[open]),.header:has(nav.open) {background:var(--color-glass);color:var(--color-label)}
.header:has(nav.open) .logo img {content:url('/assets/2026_03_BirdieCar-Logo-Digital-Color.svg')}
.header:has(nav.open) .menu-toggle {color:var(--color-label)}
.dropdown a {border-radius:var(--radius-control)}
.dropdown a:hover,.model-category-tabs button[aria-selected=true] {background:#e7f0eb;color:var(--color-accent)}
.model-category-tabs button {border-radius:var(--radius-control);min-height:44px}
.nav-model {border-radius:16px;background:var(--color-surface);padding:24px;gap:12px}
.nav-model strong {text-transform:none;font-size:17px}
.nav-model>span {font-size:13px;color:var(--color-secondary)}
.nav-model .nav-model-cta {font-size:14px;text-transform:none;color:var(--color-accent)}
.model-menu-close,.dialog-close,.video-close,.uses-controls button {min-width:44px;min-height:44px}
.model-card,.offer,.related-grid article,.category-model {border-radius:var(--radius-card);background:var(--color-surface)}
.offer {overflow:hidden}.offer-body {padding:40px 32px}
.model-card h3,.related-grid h3,.category-model h3 {font-size:22px;line-height:1.3}
.model-card {padding-bottom:72px}.model-card p {margin-bottom:24px}
.carousel-controls button {min-height:44px;background:var(--color-accent);font-size:15px}
.carousel-dots {gap:0;margin-top:24px;max-width:100%;padding:0 16px}
.carousel-dots button,.carousel-dots button[aria-pressed=true] {width:44px;height:44px;flex:0 0 44px}
.carousel-dots button:after {width:6px;height:6px;margin:auto;border-radius:99px;background:#babac0}
.carousel-dots button[aria-pressed=true]:after {width:20px;background:var(--color-accent)}
.feature,.use-card img,.color-panel img,.product-benefit>img,.category-intro>img,.video-play,.story {border-radius:var(--radius-card);overflow:hidden}
.feature h2 span,.use-open {width:44px;height:44px;background:#ffffffeb;color:var(--color-accent)}
.product-dialog,#video-dialog {border-radius:var(--radius-card);box-shadow:var(--shadow-float)}
/* Az oldalsó panel a képernyő széléhez simul, ezért nem kap lekerekítést. */
.product-dialog.product-drawer {border-radius:0}
.product-dialog {background:var(--color-background);color:var(--color-label)}
.dialog-copy {padding:var(--space-5)}
.product-highlights dt,.product-specifications dd,.quote-form legend,.sector-fields label,.consent {font-size:17px;color:var(--color-secondary);line-height:1.6}
.product-highlights dl>div,.faq-list details {border-color:var(--color-separator)}
.text-link,.video-external {min-height:44px;align-content:center;color:var(--color-accent);font-size:17px}
.form-field input,.form-field textarea {font-family:var(--font-body);font-size:17px;border-color:var(--color-separator);border-radius:var(--radius-control);background:var(--color-surface)}
.form-field label {font-size:13px}.sector-fields label,.consent {min-height:44px;padding-block:8px}
.preview-note {background:#edf5ef;border-color:var(--color-accent);border-radius:12px}
.form-status {color:var(--color-success)!important}
.form-status.error {color:#b3261e!important}
.faq-list summary {font-size:17px;padding-block:24px;min-height:44px}
.category-model .button,.useful .button {background:transparent;color:var(--color-accent);border-radius:0}
.useful .button:hover {background:var(--color-surface)}
.useful .button {white-space:nowrap}
.footer-links a,.footer-bottom>div a {color:#b0b0b8;min-height:44px;display:flex;align-items:center;font-weight:400}
.footer-links h3 {color:#f5f5f7}.footer-top h2 span {color:#d2d2d7}
.hero-content p,.product-hero p,.partners p,.story p {color:#fff}
.hero-content {max-width:560px}.hero-content h1 {font-size:clamp(28px,3.2vw,40px)}
.hero-buttons {gap:16px}.hero-content p {margin-bottom:8px}
@supports(backdrop-filter:blur(20px)) {
 .dropdown,.model-dropdown,.header:has(.nav-group[open]),.header:has(nav.open) {background:rgba(255,255,255,.86);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}
}
@media(max-width:760px) {
 .section,.product-page .section {padding-block:48px}
 .section-heading {margin-bottom:32px}
 .hero-content {left:24px;right:24px;bottom:32px}
 .hero {min-height:600px}
 .hero .button {font-size:15px}
 .header nav {background:var(--color-background)}
 .model-dropdown {border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
 .model-category-tabs button {font-size:14px;min-height:48px}
 .nav-model {padding:16px}
 .offer-body {padding:32px 24px}
 .product-page h1 {font-size:28px}.product-page h2 {font-size:26px}
 .footer-links {grid-template-columns:1fr 1fr;gap:32px 24px}
 .footer-top h2,.footer-top h2 span,.category-page footer .footer-top h2 {font-size:28px;line-height:1.35}
}
@media(max-width:360px) {.footer-links {grid-template-columns:1fr}.hero-content {left:20px;right:20px}.hero .button {padding-inline:16px}}
@media(prefers-reduced-transparency:reduce) {.dropdown,.model-dropdown,.header:has(.nav-group[open]),.header:has(nav.open) {background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more) {:root {--color-secondary:#363638;--color-separator:#707078;--color-glass:#fff}.dropdown,.model-dropdown {backdrop-filter:none}.footer-links a,.footer-bottom>div a {color:#fff}}
@media(prefers-reduced-motion:reduce) {*,*:before,*:after {scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* The brand signature remains display typography rather than body copy. */
.footer-bottom .tagline {font-size:clamp(28px,7.7vw,112px)!important;line-height:1.5;letter-spacing:-.035em}
/* Full-width white navigation, with a quiet animated reveal. */
.header {transition:background-color .22s ease,color .22s ease}
.header.menu-active,.header:has(.nav-group[open]),.header:has(nav.open),
.dropdown,.model-dropdown {background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--color-label)}
.header.menu-active .logo img {content:url('/assets/2026_03_BirdieCar-Logo-Digital-Color.svg')}
.header.menu-active .menu-toggle {color:var(--color-label)}
.header.menu-active :is(a,button,summary):focus-visible {outline-color:var(--color-accent);box-shadow:none}
.dropdown,.model-dropdown {border:0;border-radius:0;box-shadow:0 20px 30px #0000000a}
.menu-backdrop {position:fixed;inset:0;z-index:9;background:#0005;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;pointer-events:none}
.menu-backdrop.visible {opacity:1;visibility:visible;pointer-events:auto}
.nav-group summary,.nav-link {padding:10px 16px;border-radius:6px;transition:background .2s}
.nav-group[open]>summary {background:#f2f2f2}
.nav-model {background:white;border-radius:8px;transition:background .2s}
.nav-model:hover {background:#f5f5f5}
.model-category-tabs button[aria-selected=true] {background:#f2f2f2;color:var(--color-label)}
@media(min-width:761px) {
 .header nav {gap:12px}
 .header nav>.nav-group {position:static}
 .header nav>.nav-group>.dropdown {left:0;right:0;top:80px;padding:48px max(6%,calc((100% - 1100px)/2));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 40px;min-height:200px}
 .header nav>.nav-group>.dropdown a {padding:16px;font-size:17px;font-weight:600;align-self:start}
 .model-dropdown {padding:40px 6% 48px;gap:40px;max-height:calc(100dvh - 96px)}
 .model-category-tabs {border-color:#e5e5e5}
 .language .dropdown {border-radius:8px}
}
@media(max-width:760px) {
 .header.menu-active {position:fixed}
 .header nav {max-height:calc(100dvh - 80px);overscroll-behavior:contain}
 .header nav.open {animation:mobile-menu-in .28s cubic-bezier(.22,1,.36,1)}
 .nav-group summary,.nav-link {padding:16px 0}
 .dropdown,.model-dropdown {box-shadow:none}
 .nav-group[open]>summary {background:transparent}
 .model-dropdown {padding-bottom:24px}
}
@keyframes mobile-menu-in {from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* Grouped discovery links: subdued category labels, clear link columns. */
.nav-columns {display:grid;grid-template-columns:repeat(var(--nav-columns),minmax(0,1fr));gap:48px;width:100%;max-width:1100px;margin-inline:auto}
.nav-column {min-width:0}
.header .nav-column-title {font-size:14px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--color-secondary);margin:0 0 20px}
.nav-column ul {list-style:none;margin:0;padding:0;display:grid;gap:4px}
.header .nav-column a {display:flex;align-items:center;min-height:44px;padding:10px 0;font-size:16px;font-weight:600;line-height:1.5;border-radius:0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .18s,color .18s}
.header .nav-column a:hover {color:var(--color-label);background:transparent;text-decoration-color:currentColor}
@media(min-width:761px) {
 .header nav>.nav-group>.grouped-dropdown {display:block;padding:48px max(6%,calc((100% - 1100px)/2)) 56px;min-height:260px;max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
 .nav-column+.nav-column {border-left:1px solid #e5e5e5;padding-left:40px}
}
@media(max-width:760px) {
 .nav-columns {grid-template-columns:1fr;gap:28px;padding:12px 8px 24px}
 .header .nav-column-title {font-size:13px;margin-bottom:8px}
 .header .nav-column a {font-size:15px}
 .nav-column+.nav-column {padding-top:24px;border-top:1px solid #e5e5e5}
}
.header nav>.nav-group>.grouped-dropdown .nav-column a {padding:10px 0;font-size:16px}
@media(max-width:760px) {.header nav>.nav-group>.grouped-dropdown .nav-column a {font-size:15px}}
/* Blur the page behind the open menu while keeping its white surface crisp. */
.menu-backdrop {backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity .25s ease,visibility .25s,backdrop-filter .25s ease,-webkit-backdrop-filter .25s ease}
.menu-backdrop.visible {backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media(prefers-reduced-transparency:reduce) {.menu-backdrop,.menu-backdrop.visible {backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Environment photography from each product's own hero. */
.catalog {--card-width:min(1120px,86vw)}
.catalog .model-track {gap:24px;padding-bottom:0}
.catalog .lifestyle-card {padding:0;position:relative;overflow:hidden;border-radius:20px;background:#171d19;opacity:.65;transform:scale(.97);color:#fff}
.catalog .lifestyle-card.active {opacity:1;transform:scale(1)}
.lifestyle-card>a {display:block;position:relative;isolation:isolate;min-height:560px;aspect-ratio:16/9}
.catalog .lifestyle-card img {position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;z-index:-2}
.lifestyle-card>a:after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#07130deb,transparent 75%),linear-gradient(90deg,#0004,transparent 70%)}
.model-card-copy {position:absolute;left:48px;right:48px;bottom:40px;max-width:620px}
.catalog .model-card-copy h3 {font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.025em}
.catalog .model-card-copy p {color:#fff;margin:12px 0;line-height:1.5}
.catalog .model-card-copy .model-card-price {font-size:15px!important;color:#e5e9e6;margin-bottom:24px}
.lifestyle-card a:focus-visible {outline:3px solid #fff;outline-offset:-6px}
.catalog .carousel-controls {margin:24px auto 0;max-width:1120px;width:86%;justify-content:flex-end;gap:12px}
.catalog .carousel-dots {margin-top:8px}
@media(max-width:760px) {
 .catalog {--card-width:88vw}
 .catalog .model-track {gap:16px}
 .catalog .lifestyle-card {border-radius:16px}
 /* Mobilon csak név, ár és gomb van: a kép kitölti a kártyát, a szöveg alul a képen ül. */
 .lifestyle-card>a {aspect-ratio:4/5;min-height:0}
 .catalog .lifestyle-card img {height:100%;object-position:center}
 .lifestyle-card>a:after {background:linear-gradient(0deg,#07130df2 0%,#07130d99 32%,transparent 62%)}
 .model-card-copy {left:20px;right:20px;bottom:20px}
 .catalog .model-card-copy h3 {font-size:26px}
 .catalog .model-card-copy .model-card-price {margin:6px 0 16px}
 .catalog .model-card-copy p {font-size:16px!important}
 .catalog .carousel-controls {width:88%;justify-content:space-between}
}
/* Keep native vertical scrolling; horizontal gestures move the model carousel. */
.catalog .carousel {touch-action:pan-y pinch-zoom;cursor:grab}
.catalog .carousel.is-dragging,.catalog .carousel.is-dragging a {cursor:grabbing;user-select:none;-webkit-user-select:none}
.catalog .carousel img {-webkit-user-drag:none;user-select:none}

/* Tablet (761–1100 px): az asztali menü itt szűkösen fér el – főleg a hosszabb angol feliratokkal –,
   ezért a logó megtartja a méretét, a menüpontok nem törnek, keskeny tableten pedig az
   Ajánlatkérés gomb a menüben marad (a mobilos „mobile-cta” helyett ott a Főmenüből érhető el). */
@media(min-width:761px) and (max-width:1100px) {
 .header {grid-template-columns:auto 1fr auto;gap:16px;padding:12px 20px}
 .header nav {justify-self:center;gap:4px}
 .header nav>.nav-group>summary,.header nav>.nav-link {white-space:nowrap;padding-inline:8px}
 .logo img {width:135px;height:auto}
 .header-end {gap:14px;margin-right:0}
 .header-cta {white-space:nowrap}
}
@media(min-width:761px) and (max-width:900px) {
 .header-cta {display:none}
 .footer-links {grid-template-columns:repeat(2,minmax(0,1fr))}
}