/**
 * DentalProMed — template.css v2
 * FIX: overflow-x horizontal scroll on mobile
 */

/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    overflow-x: clip;    /* clip does NOT break position:sticky unlike hidden */
    scroll-behavior: smooth;
}
body {
    font-family: var(--dp-font);
    font-size: var(--dp-text-base);
    color: var(--dp-neutral-900);
    background: var(--dp-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;    /* clip does NOT break position:sticky unlike hidden */
    max-width: 100%;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--dp-primary); text-decoration: none; transition: color var(--dp-dur-fast) var(--dp-ease); }
a:hover { color: var(--dp-primary-dark); }

/* ── Layout ───────────────────────────────────── */
.dp-container {
    width: 100%;
    max-width: var(--dp-container);
    margin-inline: auto;
    padding-inline: clamp(var(--dp-s4), 4vw, var(--dp-s8));
}

/* ── Topbar ───────────────────────────────────── */
.dp-topbar {
    background: var(--dp-neutral-900);
    color: var(--dp-neutral-400);
    font-size: var(--dp-text-sm);
    overflow: hidden;
    max-height: var(--dp-topbar-h);
    transition: max-height 0.4s ease, opacity 0.35s ease;
    opacity: 1;
}
.dp-header.is-scrolled .dp-topbar {
    max-height: 0;
    opacity: 0;
}
.dp-topbar .dp-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--dp-topbar-h);
    gap: var(--dp-s6);
}
/* mod_custom adds a wrapper div — make it inherit the flex layout */
.dp-topbar .dp-container > div {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--dp-s6);
    height: 100%;
}
.dp-topbar-left,
.dp-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--dp-s5);
    flex-shrink: 0;
}
.dp-topbar-link {
    color: var(--dp-neutral-400);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.dp-topbar-link:hover { color: var(--dp-primary-200, #BCF280); }
.dp-topbar-sep { color: var(--dp-neutral-700); margin-inline: 2px; }
.dp-topbar-right span { white-space: nowrap; }
@media (max-width: 768px) { .dp-topbar { display: none; } }

/* ── Header / Navbar ──────────────────────────── */
.dp-header {
    position: relative;
    z-index: var(--dp-z-sticky);
    background: var(--dp-white);
    box-shadow: var(--dp-shadow-sm);
    width: 100%;
}
.dp-sticky .dp-header { position: sticky; top: 0; }
.dp-header.is-scrolled { box-shadow: 0 2px 20px rgb(0 0 0 / .08); }

.dp-navbar-inner {
    display: flex;
    align-items: center;
    gap: var(--dp-s6);
    height: var(--dp-header-h);
    width: 100%;
}

.dp-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 2;
}
.dp-logo-img { height: 44px; width: auto; object-fit: contain; }
.dp-logo-text {
    font-size: var(--dp-text-2xl);
    font-weight: 900;
    letter-spacing: -.04em;
    color: var(--dp-neutral-900);
}
.dp-logo-text::after {
    content: '.';
    color: var(--dp-primary);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -.1em;
}

/* Desktop nav */
.dp-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dp-nav ul, .dp-nav .nav, .dp-nav .mod-list, .dp-nav .mod-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--dp-s1);
    flex-wrap: wrap;
    padding: 0; margin: 0;
}
.dp-nav li { position: relative; }
.dp-nav a, .dp-nav .nav-link {
    display: block;
    padding: var(--dp-s2) var(--dp-s4);
    font-size: var(--dp-text-sm);
    font-weight: 500;
    color: var(--dp-neutral-600) !important;
    text-decoration: none;
    border-radius: var(--dp-r-md);
    transition: color var(--dp-dur-fast) var(--dp-ease), background var(--dp-dur-fast) var(--dp-ease);
    white-space: nowrap;
}
.dp-nav a:hover, .dp-nav .nav-link:hover,
.dp-nav .active > a, .dp-nav .current > a {
    color: var(--dp-primary) !important;
    background: var(--dp-primary-light);
}

.dp-nav-cta { flex-shrink: 0; }

/* Hamburger */
.dp-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--dp-s2);
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    z-index: calc(var(--dp-z-sticky) + 5);
}
.dp-hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dp-neutral-900);
    border-radius: var(--dp-r-pill);
    transition: transform var(--dp-dur-base) var(--dp-ease), opacity var(--dp-dur-base) var(--dp-ease);
    pointer-events: none;
}
.dp-hamburger[aria-expanded="true"] .dp-hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dp-hamburger[aria-expanded="true"] .dp-hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.dp-hamburger[aria-expanded="true"] .dp-hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay */
.dp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .5);
    z-index: calc(var(--dp-z-sticky) - 1);
    -webkit-tap-highlight-color: transparent;
}
.dp-overlay.is-active { display: block; }

/* ── Mobile Nav ───────────────────────────────── */
@media (max-width: 1024px) {
    .dp-hamburger { display: flex; }
    .dp-nav-cta   { display: none; }

    .dp-nav {
        /* Use transform instead of right — avoids horizontal scroll trigger */
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: min(320px, 85vw);
        height: 100dvh;
        height: 100vh; /* fallback */
        background: var(--dp-white);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: calc(var(--dp-header-h) + var(--dp-s8)) var(--dp-s6) var(--dp-s6);
        box-shadow: var(--dp-shadow-xl);
        z-index: var(--dp-z-sticky);
        transition: transform var(--dp-dur-slow) var(--dp-ease);
        overflow-y: auto;
        overflow-x: clip;
        /* GPU acceleration */
        will-change: transform;
        -webkit-overflow-scrolling: touch;
    }
    .dp-nav.is-open { transform: translateX(0); }

    .dp-nav ul, .dp-nav .nav, .dp-nav .mod-list, .dp-nav .mod-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    .dp-nav li { width: 100%; }
    .dp-nav a, .dp-nav .nav-link {
        font-size: var(--dp-text-base);
        padding: var(--dp-s4) var(--dp-s4);
        border-bottom: 1px solid var(--dp-neutral-100);
        border-radius: 0;
        width: 100%;
        min-height: 44px;  /* Touch target */
        display: flex;
        align-items: center;
    }
}

/* ── Breadcrumb ───────────────────────────────── */
.dp-breadcrumb-bar {
    background: var(--dp-neutral-50);
    padding-block: var(--dp-s3);
    border-bottom: 1px solid var(--dp-neutral-100);
    font-size: var(--dp-text-sm);
}
.dp-breadcrumb-bar .breadcrumb {
    margin: 0; padding: 0; background: none;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-s1);
    align-items: center;
}
.dp-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { content: '›'; color: var(--dp-neutral-400); padding-inline: var(--dp-s2); }
.dp-breadcrumb-bar .breadcrumb-item a { color: var(--dp-primary); }
.dp-breadcrumb-bar .breadcrumb-item.active { color: var(--dp-neutral-600); }

/* ── Content area ─────────────────────────────── */
.dp-content-wrap { padding-block: var(--dp-s12); }
.dp-content-row { display: grid; grid-template-columns: 1fr; gap: var(--dp-s8); }
.dp-layout-sidebar .dp-content-row { grid-template-columns: 1fr 280px; }
@media (max-width: 1024px) { .dp-layout-sidebar .dp-content-row { grid-template-columns: 1fr; } }

/* ── Buttons ──────────────────────────────────── */
.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-s2);
    font-family: var(--dp-font);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--dp-r-md);
    transition: all var(--dp-dur-base) var(--dp-ease);
    white-space: nowrap;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.dp-btn:focus-visible { outline: 2px solid var(--dp-primary); outline-offset: 2px; }
.dp-btn-sm  { padding: var(--dp-s2) var(--dp-s5);  font-size: var(--dp-text-sm);   min-height: 36px; }
.dp-btn-md  { padding: var(--dp-s3) var(--dp-s8);  font-size: var(--dp-text-sm);   min-height: 44px; }
.dp-btn-lg  { padding: var(--dp-s4) var(--dp-s10); font-size: var(--dp-text-base); min-height: 52px; }

.dp-btn-primary { background: var(--dp-primary) !important; color: var(--dp-white) !important; border-color: var(--dp-primary) !important; box-shadow: 0 1px 3px rgb(13 148 136 / .3); }
.dp-btn-primary:hover { background: var(--dp-primary-dark) !important; border-color: var(--dp-primary-dark) !important; box-shadow: 0 4px 12px rgb(13 148 136 / .4); transform: translateY(-1px); color: var(--dp-white) !important; }
.dp-btn-secondary { background: transparent; color: var(--dp-primary) !important; border-color: var(--dp-primary) !important; }
.dp-btn-secondary:hover { background: var(--dp-primary); color: var(--dp-white) !important; border-color: var(--dp-primary) !important; }
.dp-btn-ghost { background: transparent; color: var(--dp-neutral-700) !important; border-color: var(--dp-neutral-300); }
.dp-btn-ghost:hover { background: var(--dp-neutral-50); border-color: var(--dp-neutral-400); }
.dp-btn-white { background: var(--dp-white); color: var(--dp-primary-dark) !important; border-color: var(--dp-white); box-shadow: 0 4px 16px rgb(0 0 0 / .12); }
.dp-btn-white:hover { background: var(--dp-primary); border-color: var(--dp-primary); transform: translateY(-1px); color: #fff !important; }

/* ── Cards ────────────────────────────────────── */
.dp-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-neutral-100);
    border-radius: var(--dp-r-xl);
    padding: var(--dp-s8);
    box-shadow: var(--dp-shadow-sm);
    transition: box-shadow var(--dp-dur-base) var(--dp-ease), transform var(--dp-dur-base) var(--dp-ease);
}
.dp-card:hover { box-shadow: var(--dp-shadow-xl); transform: translateY(-2px); }

/* ── Typography helpers ───────────────────────── */
.dp-eyebrow {
    display: inline-block;
    font-size: var(--dp-text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dp-primary);
    margin-bottom: var(--dp-s3);
}
.dp-heading-section { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.2; color: var(--dp-neutral-900); letter-spacing: -.02em; }
.dp-text-muted { color: var(--dp-neutral-600); font-weight: 300; }

/* Section header helper */
.dp-section-header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--dp-s16); }
.dp-section-header h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; color: var(--dp-neutral-900); letter-spacing: -.02em; margin-bottom: var(--dp-s4); }
.dp-section-header p { color: var(--dp-neutral-600); font-weight: 300; font-size: var(--dp-text-lg); }

/* ── Forms ────────────────────────────────────── */
.dp-form-group { margin-bottom: var(--dp-s5); }
.dp-form-label { display: block; font-size: var(--dp-text-sm); font-weight: 500; color: var(--dp-neutral-700); margin-bottom: var(--dp-s2); }
.dp-form-input,
.dp-form-select,
.dp-form-textarea,
input[type="text"]:not(.dp-bypass),
input[type="email"]:not(.dp-bypass),
input[type="tel"]:not(.dp-bypass),
input[type="date"]:not(.dp-bypass),
select:not(.dp-bypass),
textarea:not(.dp-bypass) {
    font-family: var(--dp-font);
    font-size: 1rem; /* Exactly 16px — prevents iOS zoom */
    color: var(--dp-neutral-900);
    background: var(--dp-white);
    border: 1px solid var(--dp-neutral-200);
    border-radius: var(--dp-r-md);
    padding: var(--dp-s3) var(--dp-s4);
    width: 100%;
    min-height: 44px;
    transition: border-color var(--dp-dur-fast) var(--dp-ease), box-shadow var(--dp-dur-fast) var(--dp-ease);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="date"]:focus, select:focus, textarea:focus,
.dp-form-input:focus, .dp-form-select:focus, .dp-form-textarea:focus {
    border-color: var(--dp-primary);
    box-shadow: 0 0 0 3px rgb(13 148 136 / .15);
}
textarea { resize: vertical; min-height: 120px; }
.dp-form-error { color: var(--dp-error); font-size: var(--dp-text-xs); margin-top: var(--dp-s1); }

/* Checkbox */
.dp-checkbox-wrap { display: flex; align-items: flex-start; gap: var(--dp-s3); cursor: pointer; }
.dp-checkbox-wrap input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin-top: 2px; accent-color: var(--dp-primary); cursor: pointer; }
.dp-checkbox-wrap span { font-size: var(--dp-text-sm); color: var(--dp-neutral-600); line-height: 1.5; }

/* ── Footer ───────────────────────────────────── */
.dp-footer { background: var(--dp-neutral-900); color: var(--dp-neutral-400); }
.dp-footer-cols { padding-block: var(--dp-s20); }
.dp-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--dp-s12);
}
.dp-footer a { color: var(--dp-neutral-400); }
.dp-footer a:hover { color: var(--dp-primary-200); }
.dp-footer-bottom {
    border-top: 1px solid var(--dp-neutral-800);
    padding-block: var(--dp-s6);
    font-size: var(--dp-text-sm);
}
.dp-footer-bottom .dp-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dp-s4);
}

/* ── Module zones ─────────────────────────────── */
.dp-zone { width: 100%; overflow: hidden; }
.dp-zone-a, .dp-zone-c { background: var(--dp-white); }
.dp-zone-b, .dp-zone-d { background: var(--dp-neutral-50); }

/* ── Component (com_content) overrides ───────── */
.dp-component h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.dp-component h2 { font-size: clamp(1.4rem, 2.5vw, 1.875rem); font-weight: 700; }
.dp-component h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; }
.dp-component p   { color: var(--dp-neutral-600); line-height: 1.75; margin-bottom: var(--dp-s4); }
.page-header { border-bottom: 2px solid var(--dp-primary-100); padding-bottom: var(--dp-s4); margin-bottom: var(--dp-s8); }

/* ── Responsive final safety ──────────────────── */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .dp-container { padding-inline: var(--dp-s4); }
}
@media (max-width: 360px) {
    .dp-container { padding-inline: var(--dp-s3); }
}


/* ── Mobile fixes (added) ── */
@media (max-width: 1024px) {
    /* Show Programare CTA on mobile and push it right, next to hamburger */
    .dp-nav-cta {
        display: inline-flex !important;
        margin-left: auto;
        padding: 0.45rem 1rem;
        font-size: 0.875rem;
    }
    /* Hamburger follows immediately after — remove its own auto margin */
    .dp-hamburger {
        margin-left: 0.5rem;
    }
}