/* Responsibility for website */
html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Responsibility for images */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    h1 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }
}

/* Small animations */
a,
button {
    transition: all 0.3s ease-in-out;
}

/* Méretezés */

html {
    font-size: 112.5%;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

.text-xs {
    font-size: 0.875rem
        /* 14px */
        !important;
    line-height: 1.25rem !important;
}

.text-sm {
    font-size: 1rem
        /* 16px */
        !important;
    line-height: 1.5rem !important;
}

/* =====================================================================
   THEME SYSTEM: light (default, the original look) + dark (gold & black)
   The <html> element gets the class "dark" from style/theme.js.
   Everything below only ADDS to the original styling above.
   ===================================================================== */

/* ---------- Dark palette (change the gold/black here in one place) ---------- */
html.dark {
    --gold: #E3BE4A;
    --gold-soft: #E2BF55;
    --gold-light: #F7E29B;
    --gold-deep: #B8902E;
    --ink: #0C0A07;
    --ink-footer: #070605;
    --card: #14110C;
    --card-2: #1A160F;
    --ivory: #FFF9EA;
    --champagne: #F7ECCF;
    --muted: #E8DDC3;
    --faint: #D6CBAF;
    --line: rgba(212, 175, 55, 0.20);
    --line-strong: rgba(212, 175, 55, 0.38);
    color-scheme: dark;
}

::selection {
    background: rgba(140, 122, 107, 0.28);
}

html.dark ::selection {
    background: rgba(212, 175, 55, 0.35);
    color: #fff;
}

html {
    scrollbar-color: #B9A68A #F1E7D4;
}

html.dark {
    scrollbar-color: #6E5A25 #0C0A07;
}

.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: #B9A68A transparent;
}

html.dark .overflow-x-auto {
    scrollbar-color: #6E5A25 transparent;
}

/* Smooth colour change while switching (class added by theme.js for ~0.6s) */
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
    transition: background-color .5s ease, color .5s ease, border-color .5s ease,
        box-shadow .5s ease, fill .5s ease, stroke .5s ease !important;
}

/* Gentle page entrance */
@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

main {
    animation: pageIn .6s ease both;
}

/* ---------- Theme toggle button (sun / moon) ---------- */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    overflow: hidden;
    border-radius: 9999px;
    border: 1px solid #C4B091;
    background: #E9DDC5;
    color: #5A4636;
    cursor: pointer;
    transition: background-color .3s, border-color .3s, box-shadow .3s, transform .3s;
}

.theme-toggle svg {
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    pointer-events: none;
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}

.theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(.4);
}

html.dark .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(.4);
}

html.dark .theme-toggle .icon-moon {
    opacity: 1;
    transform: none;
}

html.dark .theme-toggle {
    background: var(--card-2);
    border-color: var(--line-strong);
    color: var(--gold);
}

.theme-toggle:active {
    transform: scale(.9);
}

/* ---------- Keyboard focus (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid #6B5642;
    outline-offset: 3px;
}

html.dark a:focus-visible,
html.dark button:focus-visible,
html.dark summary:focus-visible {
    outline-color: var(--gold);
}

/* ---------- Shared building blocks for hover effects ---------- */
header nav a {
    position: relative;
}

header nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: #6B5642;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
}

/* current page link (the one without a hover class) keeps its underline */
header nav a:not([class*="hover:"])::after {
    transform: scaleX(1);
}

footer a {
    position: relative;
}

footer a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

a.underline {
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* Buttons: shine sweep element */
:is(a, button).rounded-full:is(.bg-\[\#4A4440\], .bg-\[\#8C7A6B\]) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

:is(a, button).rounded-full:is(.bg-\[\#4A4440\], .bg-\[\#8C7A6B\])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .75s ease;
}

/* Cards */
.rounded-2xl.border,
.rounded-3xl.border,
.contact-card-hover {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease, border-color .35s ease, background-color .3s ease;
}

.overflow-hidden img {
    transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}

.icon-box {
    transition: background-color .3s, color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1) !important;
}

/* Form fields */
input,
select,
textarea {
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 4px rgba(140, 122, 107, .18);
}

/* Mobile menu links */
#mobile-menu a {
    transition: transform .25s ease, color .25s ease;
}

/* =====================================================================
   DARK MODE: colour mapping (gold & black)
   ===================================================================== */

/* Backgrounds */
html.dark .bg-\[\#FBF9F5\] {
    background-color: var(--ink);
}

html.dark .bg-\[\#FBF9F5\]\/90 {
    background-color: rgba(12, 10, 7, .88);
}

html.dark .bg-white {
    background-color: var(--card);
}

html.dark .bg-\[\#F4F0EA\] {
    background-color: var(--card-2);
}

html.dark .bg-\[\#2C2A29\] {
    background-color: var(--ink-footer);
}

/* Text */
html.dark .text-\[\#2C2A29\] {
    color: var(--ivory);
}

html.dark .text-\[\#4A4440\] {
    color: var(--champagne);
}

html.dark .text-\[\#6B5E54\] {
    color: var(--muted);
}

html.dark .text-\[\#8C7A6B\] {
    color: var(--gold);
}

html.dark .text-\[\#A89F95\] {
    color: var(--faint);
}

/* Borders */
html.dark .border-\[\#EBE5DC\] {
    border-color: var(--line);
}

html.dark .border-\[\#D4C5B9\] {
    border-color: var(--line-strong);
}

html.dark .border-\[\#F4F0EA\] {
    border-color: rgba(212, 175, 55, .12);
}

html.dark .border-\[\#4A4440\] {
    border-color: var(--line-strong);
}

html.dark .border-\[\#8C7A6B\] {
    border-color: var(--gold);
}

/* Header, footer, cookie banner */
html.dark header {
    box-shadow: 0 1px 0 rgba(212, 175, 55, .10), 0 10px 30px -20px rgba(0, 0, 0, .8);
}

html.dark footer {
    border-top: 1px solid var(--line);
}

html.dark footer a {
    color: var(--faint);
}

html.dark #cookie-banner {
    box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .9);
}

/* Requested primary CTA buttons also use the dark-theme gold treatment in light mode. */
html:not(.dark) .gold-primary-button {
    background-color: #B8902E;
    background-image: linear-gradient(135deg, #B8902E 0%, #E8C65A 50%, #B8902E 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    color: #15110A;
    font-weight: 600;
    box-shadow: 0 8px 24px -10px rgba(212, 175, 55, .5);
}

html:not(.dark) .gold-primary-button:hover {
    background-position: 100% 0;
    box-shadow: 0 16px 36px -10px rgba(226, 191, 85, .6);
}

/* Gold buttons (primary actions + cookie accept) */
html.dark :is(a, button).bg-\[\#4A4440\],
html.dark :is(a, button).bg-\[\#8C7A6B\] {
    background-color: var(--gold-deep);
    background-image: linear-gradient(135deg, #B8902E 0%, #E8C65A 50%, #B8902E 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    color: #15110A;
    font-weight: 600;
    box-shadow: 0 8px 24px -10px rgba(212, 175, 55, .5);
}

/* Secondary (outlined) buttons and chips */
html.dark a.bg-\[\#F4F0EA\] {
    background-color: var(--card-2);
    color: var(--champagne);
    border-color: var(--line-strong);
}

/* Forms */
html.dark input,
html.dark select,
html.dark textarea {
    color: var(--ivory);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--faint);
}

html.dark select option {
    background: var(--card);
    color: var(--ivory);
}

html.dark input[type="checkbox"] {
    accent-color: var(--gold);
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--gold-soft);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .16);
}

/* Images and header underline */
html.dark img {
    filter: brightness(.93) contrast(1.02);
}

html.dark header nav a::after {
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
}

/* Contact cards (their base hover lives in the pages, dark variant here) */
html.dark .contact-card-hover:hover {
    border-color: var(--gold);
    box-shadow: 0 18px 40px -18px rgba(212, 175, 55, .45);
}

html.dark .contact-card-hover:hover .icon-box {
    background-color: var(--gold);
    color: #15110A;
}

/* =====================================================================
   HOVER EFFECTS (only on devices that really hover, so phones don't get stuck states)
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {

    /* Menu */
    header nav a:hover::after {
        transform: scaleX(1);
    }

    footer a:hover::after {
        transform: scaleX(1);
    }

    #mobile-menu a:hover {
        transform: translateX(6px);
    }

    a.underline:hover {
        text-decoration-thickness: 2px;
    }

    /* Buttons: lift + shine */
    :is(a, button).rounded-full:is(.bg-\[\#4A4440\], .bg-\[\#8C7A6B\]):hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px -12px rgba(44, 42, 41, .55);
    }

    :is(a, button).rounded-full:is(.bg-\[\#4A4440\], .bg-\[\#8C7A6B\]):hover::after {
        transform: translateX(130%);
    }

    a.rounded-full.bg-\[\#F4F0EA\]:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -12px rgba(74, 68, 64, .35);
        border-color: #8C7A6B;
    }

    /* Cards */
    .rounded-2xl.border:hover,
    .snap-center:hover {
        transform: translateY(-5px);
        border-color: #A58E69;
        box-shadow: 0 18px 34px -18px rgba(74, 68, 64, .28);
    }

    .rounded-3xl.border:hover {
        border-color: #A58E69;
        box-shadow: 0 16px 40px -22px rgba(74, 68, 64, .25);
    }

    .overflow-hidden:hover img {
        transform: scale(1.04);
    }

    .contact-card-hover:hover .icon-box {
        transform: scale(1.1) rotate(-6deg);
    }

    /* Theme toggle */
    .theme-toggle:hover {
        background: #DDCFB3;
        border-color: #6B5642;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -10px rgba(74, 68, 64, .45);
    }

    .theme-toggle:hover .icon-sun {
        transform: rotate(35deg) scale(1.1);
    }

    /* ---- Dark versions (gold glow instead of soft brown shadow) ---- */
    html.dark .hover\:text-\[\#8C7A6B\]:hover {
        color: var(--gold-light);
    }

    html.dark .hover\:text-\[\#2C2A29\]:hover {
        color: #FFF6DC;
    }

    html.dark footer a:hover {
        color: var(--gold-light);
    }

    html.dark :is(a, button).rounded-full:is(.bg-\[\#4A4440\], .bg-\[\#8C7A6B\]):hover {
        background-position: 100% 0;
        box-shadow: 0 16px 36px -10px rgba(226, 191, 85, .6);
    }

    html.dark a.bg-\[\#F4F0EA\]:hover {
        background-color: rgba(212, 175, 55, .14);
        border-color: var(--gold);
        color: var(--gold-light);
        box-shadow: 0 10px 26px -12px rgba(212, 175, 55, .55);
    }

    html.dark .rounded-2xl.border:hover,
    html.dark .snap-center:hover {
        border-color: rgba(212, 175, 55, .6);
        box-shadow: 0 0 0 1px rgba(212, 175, 55, .15), 0 20px 42px -18px rgba(212, 175, 55, .35);
    }

    html.dark .rounded-3xl.border:hover {
        border-color: rgba(212, 175, 55, .45);
        box-shadow: 0 18px 44px -24px rgba(212, 175, 55, .3);
    }

    html.dark .theme-toggle:hover {
        background: rgba(212, 175, 55, .14);
        border-color: var(--gold);
        box-shadow: 0 0 0 4px rgba(212, 175, 55, .12), 0 10px 24px -10px rgba(212, 175, 55, .6);
    }

    html.dark .theme-toggle:hover .icon-moon {
        transform: rotate(-18deg) scale(1.12);
    }
}

/* =====================================================================
   PRESSED (while clicking)
   ===================================================================== */
:is(a, button).rounded-full:active {
    transform: translateY(0) scale(.97) !important;
    transition-duration: .1s;
}

.contact-card-hover:active,
.rounded-2xl.border:active {
    transform: scale(.985);
}

header nav a:active,
footer a:active {
    opacity: .7;
}

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Fix: feedback cards were clipped at the top when lifting on hover.
   The scroll container (overflow-x-auto) also crops vertically, so it gets
   extra room above/below; the negative margins keep the page layout unchanged. */
.snap-x {
    padding-top: 1.25rem;
    margin-top: -1.25rem;
    padding-bottom: 2rem;
    margin-bottom: -0.5rem;
}


/* =====================================================================
   READABILITY + BEIGE LIGHT THEME UPDATE
   - Light theme: beige page background, darker and bolder text
   - Dark theme: brighter and bolder text (palette values are at the top)
   - Heavier font weights in BOTH themes
   ===================================================================== */

html {
    background: #F1E7D4;
}

html.dark {
    background: #0C0A07;
}

body {
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-light {
    font-weight: 400;
}

.font-normal {
    font-weight: 500;
}

.font-medium {
    font-weight: 600;
}

.font-semibold {
    font-weight: 700;
}

.font-bold {
    font-weight: 800;
}

/* ---------- Light theme: beige palette ---------- */
html:not(.dark) .bg-\[\#FBF9F5\] {
    background-color: #F1E7D4;
}

html:not(.dark) .bg-\[\#FBF9F5\]\/90 {
    background-color: rgba(241, 231, 212, .93);
}

html:not(.dark) .bg-white {
    background-color: #FFFCF5;
}

html:not(.dark) .bg-\[\#F4F0EA\] {
    background-color: #E9DDC5;
}

html:not(.dark) .bg-\[\#8C7A6B\] {
    background-color: #6B5642;
}

html:not(.dark) .text-\[\#2C2A29\] {
    color: #14110D;
}

html:not(.dark) .text-\[\#4A4440\] {
    color: #231E19;
}

html:not(.dark) .text-\[\#6B5E54\] {
    color: #3A3029;
}

html:not(.dark) .text-\[\#8C7A6B\] {
    color: #6B5642;
}

html:not(.dark) .text-\[\#A89F95\] {
    color: #54483D;
}

html:not(.dark) .border-\[\#EBE5DC\] {
    border-color: #D6C6AA;
}

html:not(.dark) .border-\[\#D4C5B9\] {
    border-color: #C4B091;
}

html:not(.dark) .border-\[\#F4F0EA\] {
    border-color: #E2D5BD;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    color: #14110D;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #6F6253;
}

/* The footer and cookie banner stay dark in the light theme, so their text stays light */
html:not(.dark) footer .text-\[\#A89F95\],
html:not(.dark) #cookie-banner .text-\[\#A89F95\] {
    color: #E2D8C6;
}

html:not(.dark) footer a {
    color: #E2D8C6;
}

/* Hover colours that the overrides above would otherwise cancel (light theme only) */
html:not(.dark) .hover\:text-\[\#8C7A6B\]:hover {
    color: #3F2F20;
}

html:not(.dark) .hover\:text-\[\#2C2A29\]:hover {
    color: #000;
}

html:not(.dark) .hover\:text-white:hover {
    color: #fff;
}

html:not(.dark) .hover\:bg-\[\#4A4440\]:hover {
    background-color: #4A4440;
}

html:not(.dark) .hover\:bg-\[\#EBE5DC\]:hover {
    background-color: #DDCFB3;
}

html:not(.dark) .hover\:bg-\[\#726255\]:hover {
    background-color: #54422F;
}

html:not(.dark) footer a:hover,
html:not(.dark) footer .hover\:text-\[\#8C7A6B\]:hover {
    color: #F0E3C8;
}

html:not(.dark) #cookie-banner .hover\:text-\[\#8C7A6B\]:hover {
    color: #F0E3C8;
}

/* ---------- Calendly booking box ---------- */
#calendly-embed {
    position: relative;
    transition: opacity .3s ease;
}

#calendly-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* =====================================================================
   TEXT STRENGTH CONTROL  <<< change the text look in THIS block >>>
   - Weights: 400 = normal, 500 = medium, 600 = semi-bold, 700 = bold
   - Light theme text colours: closer to #000000 = blacker
   - Dark theme text colours: closer to #FFFFFF = whiter
   ===================================================================== */
:root {
    /* weights (both themes) */
    --w-light: 500;
    /* was thin text */
    --w-normal: 600;
    /* normal paragraphs */
    --w-medium: 700;
    /* buttons, labels */
    --w-semibold: 800;
    --w-bold: 800;

    /* LIGHT theme text colours */
    --l-text-1: #050403;
    /* headings, main text */
    --l-text-2: #100C09;
    /* secondary text */
    --l-text-3: #1C1510;
    /* paragraphs, descriptions */
    --l-accent: #4E3A27;
    /* brown labels and links */
    --l-small: #2E241B;
    /* small notes */
}

html.dark {
    /* DARK theme text colours */
    --ivory: #FFFFFF;
    /* headings, main text */
    --champagne: #FFFCF2;
    /* secondary text */
    --muted: #F8F0DD;
    /* paragraphs, descriptions */
    --faint: #EBE2CB;
    /* small notes */
    --gold: #F2CE5C;
    /* gold labels and links */
    --gold-light: #FFE9A8;
    /* gold on hover */
}

body {
    font-weight: var(--w-normal);
    text-rendering: optimizeLegibility;
}

.font-light {
    font-weight: var(--w-light);
}

.font-normal {
    font-weight: var(--w-normal);
}

.font-medium {
    font-weight: var(--w-medium);
}

.font-semibold {
    font-weight: var(--w-semibold);
}

.font-bold {
    font-weight: var(--w-bold);
}

html:not(.dark) .text-\[\#2C2A29\] {
    color: var(--l-text-1);
}

html:not(.dark) .text-\[\#4A4440\] {
    color: var(--l-text-2);
}

html:not(.dark) .text-\[\#6B5E54\] {
    color: var(--l-text-3);
}

html:not(.dark) .text-\[\#8C7A6B\] {
    color: var(--l-accent);
}

html:not(.dark) .text-\[\#A89F95\] {
    color: var(--l-small);
}

html:not(.dark) footer .text-\[\#A89F95\],
html:not(.dark) #cookie-banner .text-\[\#A89F95\] {
    color: #F1E9DA;
}

html:not(.dark) footer a {
    color: #F1E9DA;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    color: var(--l-text-1);
}

html:not(.dark) .hover\:text-\[\#8C7A6B\]:hover {
    color: #2A1D12;
}

html:not(.dark) footer a:hover,
html:not(.dark) footer .hover\:text-\[\#8C7A6B\]:hover {
    color: #FFF3D6;
}

html:not(.dark) #cookie-banner .hover\:text-\[\#8C7A6B\]:hover {
    color: #FFF3D6;
}

/* =====================================================================
   MOBILE RESPONSIVENESS FIXES
   ===================================================================== */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; max-width: 100%; }
.grid > *, .flex > * { min-width: 0; }
h1, h2, h3, h4, p, li, a, span, label { overflow-wrap: break-word; }
iframe, video, svg, table { max-width: 100%; }

/* Navbar: logo + controls stay on one line, vertically centred */
header .flex.items-center { gap: .5rem; }
header > div > div { gap: .75rem; }
header a, header button { line-height: 1.2; }
header nav a { white-space: nowrap; display: inline-flex; align-items: center; }
header .theme-toggle { flex-shrink: 0; }
header > div > div > :first-child { min-width: 0; }
header a[href="index.html"].font-serif,
header .flex-shrink-0 > a { white-space: nowrap; display: inline-block; }
#menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; flex-shrink: 0; }
#mobile-menu { max-height: calc(100vh - 5rem); overflow-y: auto; }
@media (max-width: 480px) {
    header a.font-serif, header .flex-shrink-0 > a { font-size: 1.05rem !important; letter-spacing: .03em !important; }
    header .theme-toggle, #menu-btn { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 360px) {
    header a.font-serif, header .flex-shrink-0 > a { font-size: .92rem !important; letter-spacing: .01em !important; }
    header > div { padding-left: .75rem; padding-right: .75rem; }
}
/* between 1024 and 1180px keep the desktop nav compact so nothing is cut */
@media (min-width: 1024px) and (max-width: 1180px) {
    header nav { column-gap: 1.25rem; }
    header nav.space-x-8 > * + * { margin-left: 0 !important; }
}

/* Calendly: no forced min-width, minimal white gap around the embed */
#calendly-embed, #calendly-embed .calendly-inline-widget { min-width: 0 !important; width: 100%; max-width: 100%; }
@media (max-width: 640px) {
    #idopontfoglalas { padding-left: 0 !important; padding-right: 0 !important; border-radius: 1.25rem; }
    #idopontfoglalas > .text-center { padding-left: 1rem; padding-right: 1rem; }
    #calendly-embed { margin-left: -.25rem; margin-right: -.25rem; width: calc(100% + .5rem); }
}

/* Cookie banner + buttons on small screens */
#cookie-banner { max-width: 100vw; }
@media (max-width: 640px) {
    #cookie-banner { padding-left: 1rem !important; padding-right: 1rem !important; }
    .whitespace-nowrap { white-space: normal !important; }
    h1 { font-size: clamp(1.7rem, 8vw, 2.25rem) !important; }
    h2 { font-size: clamp(1.4rem, 6.5vw, 1.75rem) !important; }
}


/* =====================================================================
   CALENDLY: always stays inside its box
   ===================================================================== */
#idopontfoglalas { overflow: hidden; max-width: 100%; }
#calendly-embed { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden; }
#calendly-embed .calendly-inline-widget,
#calendly-embed iframe { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
@media (max-width: 640px) {
    #calendly-embed { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
}

/* =====================================================================
   MOBILE MENU: smooth slide-down, staggered links, burger -> X
   ===================================================================== */
@media (max-width: 1023.98px) {
    #mobile-menu {
        display: block;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transform-origin: top;
        transition: max-height .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease,
            transform .42s cubic-bezier(.22, 1, .36, 1), padding .42s cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear .42s;
    }
    #mobile-menu:not(.open) { padding-top: 0 !important; padding-bottom: 0 !important; border-bottom-width: 0 !important; }
    #mobile-menu.open {
        max-height: calc(100vh - 5rem);
        opacity: 1;
        visibility: visible;
        transform: none;
        overflow-y: auto;
        transition-delay: 0s;
    }
    #mobile-menu > a {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .35s ease, transform .4s cubic-bezier(.22, 1, .36, 1), color .25s ease;
    }
    #mobile-menu.open > a { opacity: 1; transform: none; }
    #mobile-menu.open > a:nth-child(1) { transition-delay: .06s; }
    #mobile-menu.open > a:nth-child(2) { transition-delay: .11s; }
    #mobile-menu.open > a:nth-child(3) { transition-delay: .16s; }
    #mobile-menu.open > a:nth-child(4) { transition-delay: .21s; }
    #mobile-menu.open > a:nth-child(5) { transition-delay: .26s; }
    #mobile-menu > a:active { transform: scale(.97) !important; opacity: .8; transition-delay: 0s; }
}
#menu-btn { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); -webkit-tap-highlight-color: transparent; }
#menu-btn:active { transform: scale(.88); }
#menu-btn.is-open { transform: rotate(90deg); }
#menu-btn.is-open:active { transform: rotate(90deg) scale(.88); }
#menu-btn .burger line { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
#menu-btn.is-open .b1 { transform: translateY(6px) rotate(45deg); }
#menu-btn.is-open .b2 { opacity: 0; transform: scaleX(.2); }
#menu-btn.is-open .b3 { transform: translateY(-6px) rotate(-45deg); }


/* =====================================================================
   REVIEWS CAROUSEL + iPHONE ZOOM FIX
   ===================================================================== */
/* iOS Safari zooms in on rapid taps (double-tap zoom) and on focused form
   fields smaller than 16px. These keep pinch-zoom for accessibility but stop
   the accidental zoom when pressing the arrow buttons / links / inputs. */
button, a, [role="button"], summary, label, select, input, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: 16px; }
#scroll-left, #scroll-right { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

#testimonials-container { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-padding-inline: 0; }
#testimonials-container > div { box-sizing: border-box; }

@media (min-width: 640px) {
    #testimonials-container > div { width: 340px; min-width: 340px !important; max-width: 340px !important; }
}

/* Phones: exactly one full card fits the container, arrows sit below it */
@media (max-width: 639.98px) {
    #testimonials-container { gap: 1rem; scroll-snap-type: x mandatory; }
    #testimonials-container > div {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    #scroll-left, #scroll-right {
        top: auto !important;
        bottom: 0 !important;
        transform: none !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    #scroll-left { left: calc(50% - 3.5rem) !important; right: auto !important; }
    #scroll-right { right: calc(50% - 3.5rem) !important; left: auto !important; }
    #scroll-left:active, #scroll-right:active { transform: scale(.92) !important; }
    #testimonials-container { margin-bottom: 0 !important; }
    .relative.max-w-6xl { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 3.5rem !important; }
}


/* Cookie banner: long text and button always fit inside the box (desktop + phone) */
#cookie-banner { box-sizing: border-box; width: 100%; max-height: 90vh; overflow-y: auto; padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
#cookie-banner > div { width: 100%; min-width: 0; }
#cookie-banner p { overflow-wrap: anywhere; }
#cookie-banner button { white-space: normal !important; }
@media (max-width: 639.98px) {
    #cookie-banner > div { flex-direction: column; align-items: stretch; }
    #cookie-banner button { padding-top: .75rem; padding-bottom: .75rem; }
}


/* Cookie banner: two buttons stack on phones/tablets, sit side by side on wide screens */
#cookie-banner button { width: 100%; }
@media (min-width: 640px) { #cookie-banner button { width: 100%; max-width: 16rem; } }
@media (min-width: 1024px) { #cookie-banner button { width: auto; } }