/* =========================================================
   GLOBAL THEME: Brand palette + optional Bootstrap variables
   ========================================================= */

:root {
    --brand-accent: #f7961e; /* orange */
    --brand-accent-soft: rgba(247,150,30,.12);
    --brand-interactive: #2fa4a9; /* teal */
    --brand-interactive-soft: rgba(47,164,169,.12);
    --text: #333;
    --heading: #252525;
    --muted: #898989;
    --bg: #fff;
    --surface: #f7f7f7;
    --border: #e2e2e2;
    --focus-ring: #111;
    --header-bg: #fff;
    /* Optional Bootstrap hooks (safe) */
    --bs-primary: var(--brand-accent);
    --bs-link-color: var(--brand-accent);
    --bs-link-hover-color: var(--brand-interactive);
}

/* =========================================================
   GLOBAL BASE
   ========================================================= */

html,
body {
    background: var(--bg);
    color: var(--text);
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--heading);
}

/* =========================================================
   GLOBAL LINKS (brand override)
   ========================================================= */

a {
    color: var(--brand-accent);
    text-decoration: none;
}

    a:hover {
        color: var(--brand-interactive);
        text-decoration: underline;
    }

    /* =========================================================
   GLOBAL ACCESSIBILITY (focus parity)
   ========================================================= */

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 3px;
    }

    a:focus-visible {
        color: var(--brand-interactive);
        text-decoration: underline;
    }

/* =========================================================
   SKIP LINK (ADA)
   ========================================================= */

.skip-link {
    position: absolute;
    left: 12px;
    top: -44px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    z-index: 3000;
}

    .skip-link:focus {
        top: 12px;
    }

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */

.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
}

.site-logo {
    height: 44px;
    width: auto;
}

/* Hamburger */
.navbar-toggler {
    border: 1px solid var(--border);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2837,37,37,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nav links */
.navbar .nav-link {
    position: relative;
    font-weight: 600;
    padding: 0.75rem;
    color: var(--heading);
}

/* Nav hover/focus = color only (no underline) */
.navbar.navbar-light .navbar-nav .nav-link:hover,
.navbar.navbar-light .navbar-nav .nav-link:focus,
.navbar.navbar-light .navbar-nav .nav-link:focus-visible {
    color: var(--brand-interactive);
    text-decoration: none;
}

/* Active section underline (desktop only) */
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.35rem;
    height: 2px;
    background: var(--brand-accent);
}

/* =========================================================
   NAV DROPDOWN MECHANICS
   ========================================================= */

.nav-link-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.submenu-toggle {
    background: transparent;
    border: 0;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    color: var(--heading);
}

    .submenu-toggle:hover {
        background: rgba(0,0,0,.04);
    }

.chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.dcs-dropdown.submenu-open > .nav-link-wrapper .chevron {
    transform: rotate(-135deg);
}

/* =========================================================
   DROPDOWN ITEMS
   ========================================================= */

.dropdown-item {
    color: var(--heading);
}

    /* Standard dropdown items */
    .dropdown-item:hover,
    .dropdown-item:focus,
    .dropdown-item:focus-visible {
        background: var(--brand-interactive-soft);
        color: var(--brand-interactive);
        text-decoration: none;
    }

    /* CTA items:
   - "View all procedures"
   - "Patient information"
   Default: orange + bold (CTA emphasis) */
    .dropdown-item.view-all {
        font-weight: 700;
        color: var(--brand-accent);
    }

        /* CTA hover/focus:
   - SAME interaction feedback as other items
   - Text turns teal for consistency & accessibility */
        .dropdown-item.view-all:hover,
        .dropdown-item.view-all:focus,
        .dropdown-item.view-all:focus-visible {
            background: var(--brand-interactive-soft);
            color: var(--brand-interactive);
        }

/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumb {
    background: transparent;
}

    .breadcrumb a {
        color: var(--brand-accent);
        text-decoration: none;
    }

        .breadcrumb a:hover,
        .breadcrumb a:focus,
        .breadcrumb a:focus-visible {
            color: var(--brand-interactive);
            text-decoration: underline;
        }

.breadcrumb-item.active {
    color: var(--muted);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:focus-visible {
        background-color: var(--brand-interactive);
        border-color: var(--brand-interactive);
    }

.btn-outline-secondary {
    border-color: var(--border);
    color: var(--heading);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:focus-visible {
        background: rgba(0,0,0,.04);
        color: var(--brand-interactive);
    }

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 1.75rem 0;
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
}

    /* Footer button: keep it a button (JS hook), but remove link-like underline styling */
    .footer-links button {
        background: none;
        border: 0;
        padding: 0;
        color: var(--brand-accent);
        cursor: pointer;
    }

        .footer-links button:hover,
        .footer-links button:focus,
        .footer-links button:focus-visible {
            color: var(--brand-interactive);
        }

/* =========================================================
   COOKIE BANNER
   ========================================================= */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(0,0,0,.08);
    z-index: 2500;
    padding: 1rem 0;
}

.cookie-banner__inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   RESPONSIVE RULES
   ========================================================= */

@media (max-width: 1024px) {
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }

        .navbar-expand-lg .navbar-collapse.show {
            display: block !important;
        }

    .navbar .dropdown-menu {
        display: none;
        padding-left: 0.75rem;
    }

    .dcs-dropdown.submenu-open > .dropdown-menu {
        display: block;
    }

    /* Hide active underline on mobile/tablet */
    .navbar .nav-link.active::after {
        display: none;
    }
}

@media (min-width: 1025px) {
    .submenu-toggle {
        display: none;
    }

    .navbar .dcs-dropdown:hover > .dropdown-menu {
        display: block;
    }
}