/**
 * Dorset Realty - Header Styles
 * 
 * Clean implementation using Design System Tokens
 * Based on design system specifications
 * 
 * @package DorsetRealty
 */

/* ============================================
   Header Container - Pure CSS Sticky
   ============================================ */
.dr-header {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 1021;
    transition: box-shadow 0.2s ease;
}

/* Scrolled state - shadow (requires minimal JS) */
.dr-header.is-scrolled {
    box-shadow: var(--drpm-shadow-lg);
}

/* WordPress Admin Bar */
.admin-bar .dr-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .dr-header {
        top: 46px;
    }
}

/* Fix: WP admin bar is position:absolute on mobile by default, make it sticky */
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}

/* ============================================
   Container Layout
   ============================================ */
.dr-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--drpm-space-6) var(--drpm-space-3);  /* 24px 12px */
    gap: var(--drpm-space-8);  /* 32px */
}

/* ============================================
   Logo
   ============================================ */
.dr-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: fit-content;
    color: var(--drpml-color-gray-900);
    font-weight: var(--drpml-fw-bold);
    font-size: var(--drpml-fs-text-xl);
    line-height: 1.2;
    text-decoration: none;
    transition: opacity var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-logo:hover {
    opacity: 0.8;
}

.dr-logo img {
    height: 40px;
    width: auto;
}

/* ============================================
   Navigation
   ============================================ */
.dr-nav {
    flex: none;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

.dr-nav-menu {
    display: flex;
    align-items: center;
    gap: var(--drpm-space-1_5);  /* 6px */
    height: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================
   Nav Items - Simple Links
   ============================================ */
.dr-nav-item {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
}

.dr-nav-item.brxe-text-link {
    padding: var(--drpm-space-1) var(--drpm-space-1_5);  /* 4px 6px */
    font-weight: var(--drpml-fw-semibold);
    font-size: 1rem;  /* 16px - фиксированный */
    line-height: 1.5rem;  /* 24px */
    color: var(--drpml-color-gray-700);
    text-decoration: none;
    border-radius: var(--drpm-radius-lg);
    transition: all var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-nav-item.brxe-text-link:hover {
    color: var(--drpml-color-gray-900);
}

.dr-nav-item.brxe-text-link.is-active {
    color: var(--drpml-color-gray-900);
    background: var(--drpml-color-gray-100);
}

/* ============================================
   Dropdown Toggle
   ============================================ */
.dr-nav-item.has-dropdown .brx-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: var(--drpm-space-1) var(--drpm-space-1_5);  /* 4px 6px */
    gap: var(--drpm-space-0_5);  /* 2px */
    background: none;
    border: none;
    border-radius: var(--drpm-radius-lg);
    cursor: pointer;
    outline: none;
    transition: color var(--drpml-duration-normal) var(--drpml-ease-standard);
}

/* Toggle text */
.dr-nav-item.has-dropdown .brx-submenu-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 var(--drpm-space-0_5);  /* 0 2px */
    font-weight: var(--drpml-fw-semibold);
    font-size: 1rem;  /* 16px */
    line-height: 1.5rem;  /* 24px */
    color: var(--drpml-color-gray-700);
    transition: color var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-nav-item.has-dropdown .brx-submenu-toggle:hover span {
    color: var(--drpml-color-gray-900);
}

/* Chevron icon button */
.dr-nav-item.has-dropdown .brx-submenu-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-nav-item.has-dropdown .brx-submenu-toggle button svg {
    width: 16px;
    height: 16px;
    stroke: var(--drpml-color-gray-300);  /* Светлая иконка */
    stroke-width: 1.75px;
    transition: stroke var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-nav-item.has-dropdown .brx-submenu-toggle:hover button svg {
    stroke: var(--drpml-color-gray-600);
}

.dr-nav-item.has-dropdown[aria-expanded="true"] .brx-submenu-toggle button {
    transform: rotate(180deg);
}

/* ============================================
   Dropdown Menu
   ============================================ */
.dr-nav-item .brx-dropdown-content {
    position: absolute;
    top: calc(100% + var(--drpm-space-2));  /* 8px */
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    
    width: min(336px, 92vw);
    max-width: 336px;
    padding: var(--drpm-space-3);  /* 12px */
    
    background: var(--drpml-color-white);
    border: 1px solid var(--drpml-color-gray-200);
    border-radius: var(--drpm-radius-xl);  /* 12px */
    box-shadow: var(--drpm-shadow-lg);
    
    list-style: none;
    margin: 0;
    z-index: var(--drpml-z-dropdown);
    
    opacity: 0;
    visibility: hidden;
    transition: all var(--drpml-duration-normal) var(--drpml-ease-standard);
}

/* Hover только на desktop (не на тач устройствах) */
@media (hover: hover) and (pointer: fine) {
    .dr-nav-item.has-dropdown:hover .brx-dropdown-content {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================
   Dropdown Items (Title + Description)
   ============================================ */
.dr-nav-item .brx-dropdown-content .menu-item {
    list-style: none;
    margin: 0;
}

/* Item wrapper */
.dr-nav-item .brx-dropdown-content .menu-item > div {
    display: flex;
    flex-direction: column;
    gap: var(--drpm-space-1);  /* 4px */
    padding: var(--drpm-space-3);  /* 12px */
    border-radius: var(--drpm-radius-lg);
    transition: background-color var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-nav-item .brx-dropdown-content .menu-item > div:hover {
    background-color: var(--drpml-color-gray-50);
}

/* Explicit class wrapper */
.dr-dropdown-item.dr-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: var(--drpm-space-1);
    padding: var(--drpm-space-3);
    border-radius: var(--drpm-radius-lg);
    transition: background-color var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-dropdown-item.dr-dropdown-item:hover {
    background-color: var(--drpml-color-gray-50);
}

/* Title link */
.dr-nav-item .brx-dropdown-content .menu-item a {
    font-weight: var(--drpml-fw-semibold);
    font-size: 1rem;  /* 16px */
    line-height: 1.5rem;  /* 24px */
    color: var(--drpml-color-gray-900);
    text-decoration: none;
}

/* Explicit class title */
.dr-dropdown-title.dr-dropdown-title {
    font-weight: var(--drpml-fw-semibold);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--drpml-color-gray-900);
    text-decoration: none;
}

/* Simple links without wrapper */
.dr-nav-item .brx-dropdown-content .menu-item > a {
    display: block;
    padding: var(--drpm-space-3);
    border-radius: var(--drpm-radius-lg);
    transition: background-color var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-nav-item .brx-dropdown-content .menu-item > a:hover {
    background-color: var(--drpml-color-gray-50);
}

/* Links inside wrapper (with description) */
.dr-nav-item .brx-dropdown-content .menu-item > div a {
    padding: 0;
    transition: color var(--drpml-duration-normal) var(--drpml-ease-standard);
}

/* Description text */
.dr-nav-item .brx-dropdown-content .menu-item .brxe-text-basic {
    font-weight: var(--drpml-fw-regular);
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
    color: var(--drpml-color-gray-600);
}

/* Explicit class description */
.dr-dropdown-desc.dr-dropdown-desc {
    font-weight: var(--drpml-fw-regular);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--drpml-color-gray-600);
}

/* ============================================
   CTA Actions
   ============================================ */
.dr-actions {
    display: flex;
    align-items: center;
    gap: var(--drpm-space-3);
    flex-shrink: 0;
    margin-left: auto;
}

/* ============================================
   Buttons
   ============================================ */
.dr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--drpm-space-2);  /* 8px */
    padding: var(--drpm-space-2) var(--drpm-space-3_5);  /* 8px 14px */
    
    font-weight: var(--drpml-fw-semibold);
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    
    border: 1px solid transparent;
    border-radius: var(--drpm-radius-lg);
    cursor: pointer;
    transition: background-color var(--drpml-duration-normal) var(--drpml-ease-standard);
}

/* Primary Button - Brand с градиентом */
.dr-btn-primary {
    border-color: var(--drpml-color-brand-600);
    background-color: var(--drpml-color-brand-600);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    color: var(--drpml-color-white);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                inset 0px 1px 0px rgba(255, 255, 255, 0.12);
}

.dr-btn-primary:hover {
    border-color: var(--drpml-color-brand-700);
    background-color: var(--drpml-color-brand-700);
}

/* Secondary Button - design system Skeuomorphic Style */
.dr-btn-secondary {
    border-color: transparent;
    background-color: var(--drpml-color-white);
    background-image: none;
    color: var(--drpml-color-gray-700);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18);
}

.dr-btn-secondary:hover {
    background-color: var(--drpml-color-gray-50);
    color: var(--drpml-color-gray-800);
}

/* ============================================
   Responsive
   ============================================ */

/* Tablet adaptation: 1100px - 1200px (легкое уменьшение) */
@media (max-width: 1200px) {
    /* Уменьшаем логотип */
    .dr-logo img {
        height: 36px;  /* было 40px */
    }
    
    /* Уменьшаем отступы в контейнере */
    .dr-container {
        padding: var(--drpm-space-5) var(--drpm-space-3);  /* 20px 12px (было 24px 12px) */
        gap: var(--drpm-space-5);  /* 20px (было 32px) */
    }
    
    /* Уменьшаем gap между nav items */
    .dr-nav-menu {
        gap: var(--drpm-space-1);  /* 4px (было 6px) */
    }
    
    /* Уменьшаем font-size в nav items */
    .dr-nav-item.brxe-text-link {
        padding: var(--drpm-space-1) var(--drpm-space-1);  /* 4px 4px (было 4px 6px) */
        font-size: 0.9375rem;  /* 15px (было 16px) */
        line-height: 1.375rem;  /* 22px (было 24px) */
    }
    
    /* Уменьшаем font-size в dropdown toggles */
    .dr-nav-item.has-dropdown .brx-submenu-toggle {
        padding: var(--drpm-space-1) var(--drpm-space-1);  /* 4px 4px (было 4px 6px) */
    }
    
    .dr-nav-item.has-dropdown .brx-submenu-toggle span {
        font-size: 0.9375rem;  /* 15px (было 16px) */
        line-height: 1.375rem;  /* 22px (было 24px) */
    }
    
    /* Уменьшаем padding в dropdown content */
    .dr-nav-item .brx-dropdown-content {
        padding: var(--drpm-space-2);  /* 8px (было 12px) */
    }
    
    /* Уменьшаем padding в dropdown items */
    .dr-dropdown-item.dr-dropdown-item {
        padding: var(--drpm-space-2);  /* 8px (было 12px) */
    }
    
    .dr-nav-item .brx-dropdown-content .menu-item > div {
        padding: var(--drpm-space-2);  /* 8px (было 12px) */
    }
    
    .dr-nav-item .brx-dropdown-content .menu-item > a {
        padding: var(--drpm-space-2);  /* 8px (было 12px) */
    }
    
    /* Уменьшаем font-size в dropdown */
    .dr-dropdown-title.dr-dropdown-title {
        font-size: 0.9375rem;  /* 15px (было 16px) */
        line-height: 1.375rem;  /* 22px (было 24px) */
    }
    
    .dr-dropdown-desc.dr-dropdown-desc {
        font-size: 0.8125rem;  /* 13px (было 14px) */
        line-height: 1.125rem;  /* 18px (было 20px) */
    }
    
    /* Уменьшаем CTA buttons */
    .dr-btn {
        padding: var(--drpm-space-1_5) var(--drpm-space-3);  /* 6px 12px (было 8px 14px) */
        font-size: 0.8125rem;  /* 13px (было 14px) */
        line-height: 1.125rem;  /* 18px (было 20px) */
    }
}

/* Tablet narrow: 992px - 1100px (сбалансированное уменьшение) */
@media (max-width: 1100px) {
    /* Логотип компактный */
    .dr-logo img {
        height: 34px;  /* было 36px - немного меньше */
    }
    
    /* Компактные отступы */
    .dr-container {
        padding: var(--drpm-space-4) var(--drpm-space-2);  /* 16px 8px */
        gap: var(--drpm-space-4);  /* 16px */
    }
    
    /* Минимальный gap */
    .dr-nav-menu {
        gap: 2px;  /* минимум */
    }
    
    /* Компактный но читаемый font-size */
    .dr-nav-item.brxe-text-link {
        padding: var(--drpm-space-0_5) var(--drpm-space-1);  /* 2px 4px */
        font-size: 0.9375rem;  /* 15px - хорошая читаемость */
        line-height: 1.375rem;  /* 22px */
    }
    
    /* Dropdown toggles */
    .dr-nav-item.has-dropdown .brx-submenu-toggle {
        padding: var(--drpm-space-0_5) var(--drpm-space-1);  /* 2px 4px */
        gap: 2px;  /* минимум между текстом и chevron */
    }
    
    .dr-nav-item.has-dropdown .brx-submenu-toggle span {
        padding: 0;  /* убрать внутренний padding */
        font-size: 0.9375rem;  /* 15px - хорошая читаемость */
        line-height: 1.375rem;  /* 22px */
    }
    
    /* Dropdown content */
    .dr-nav-item .brx-dropdown-content {
        padding: var(--drpm-space-1_5);  /* 6px */
    }
    
    /* Dropdown items */
    .dr-dropdown-item.dr-dropdown-item {
        padding: var(--drpm-space-1_5);  /* 6px */
    }
    
    .dr-nav-item .brx-dropdown-content .menu-item > div {
        padding: var(--drpm-space-1_5);  /* 6px */
    }
    
    .dr-nav-item .brx-dropdown-content .menu-item > a {
        padding: var(--drpm-space-1_5);  /* 6px */
    }
    
    /* Dropdown font-size */
    .dr-dropdown-title.dr-dropdown-title {
        font-size: 0.9375rem;  /* 15px - хорошая читаемость */
        line-height: 1.375rem;  /* 22px */
    }
    
    .dr-dropdown-desc.dr-dropdown-desc {
        font-size: 0.8125rem;  /* 13px - читаемо */
        line-height: 1.125rem;  /* 18px */
    }
    
    /* CTA buttons - компактные но читаемые */
    .dr-btn {
        padding: var(--drpm-space-1_5) var(--drpm-space-2_5);  /* 6px 10px */
        font-size: 0.8125rem;  /* 13px - читаемо */
        line-height: 1.125rem;  /* 18px */
    }
    
    /* Уменьшаем gap между CTA */
    .dr-actions {
        gap: var(--drpm-space-2);  /* 8px (было 12px) */
    }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
    .dr-container {
        justify-content: space-between;
    }
}

/* ============================================
   Utilities
   ============================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   MOBILE OFFCANVAS MENU - Clean Styles
   ============================================ */

/* Menu item toggle (Commercial, Residential...) */
.dr-offcanvas .dr-menu-item__toggle,
.dr-offcanvas .dr-menu-item__toggle .brxe-heading {
    font-weight: 600;
    font-size: clamp(16px, 1.2vw, 24px);
    line-height: clamp(24px, 1.6vw, 32px);
    color: var(--drpml-color-gray-900);
    margin: 0;
    padding: 0;
}

/* Icon rotation */
.dr-offcanvas .dr-menu-item__toggle .brxe-icon {
    transition: transform var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-offcanvas .dr-menu-item.brx-open .dr-menu-item__toggle .brxe-icon {
    transform: rotate(90deg);
}

/* Dropdown content (карточка) */
.dr-offcanvas .dr-dropdown-content {
    padding: clamp(8px, 1vw, 12px) 0;
    width: 100%;
    background: var(--drpml-color-white);
    border: 1px solid var(--drpml-color-gray-200);
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
                0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: var(--drpm-radius-xl);
    margin-top: var(--drpm-space-2);
}

/* Dropdown item wrapper */
.dr-offcanvas .dr-dropdown-item {
    display: flex;
    flex-direction: column;
    padding: clamp(10px, 1.2vw, 12px);
    gap: var(--drpm-space-1);
    border-radius: var(--drpm-radius-lg);
    transition: background-color 0.15s ease-out;
}

.dr-offcanvas .dr-dropdown-item:hover {
    background-color: var(--drpml-color-gray-50);
}

/* Title */
.dr-offcanvas .dr-dropdown-title {
    font-weight: 600;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: clamp(20px, 1.6vw, 24px);
    color: #101828;
    text-decoration: none;
}

/* Description */
.dr-offcanvas .dr-dropdown-desc {
    font-weight: 400;
    font-size: clamp(13px, 1vw, 14px);
    line-height: clamp(18px, 1.4vw, 20px);
    color: #475467;
    text-decoration: none;
}

/* Performance hints - iOS smooth scroll */
.x-offcanvas_inner {
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   BUTTON SIZE MODIFIERS - design system Scale
   ============================================ */

/* Small - компактные кнопки */
.dr-btn-sm {
    padding: var(--drpm-space-2) var(--drpm-space-3);  /* 8px 12px */
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
}

/* Medium - стандарт (default) */
.dr-btn-md,
.dr-btn {
    padding: var(--drpm-space-2) var(--drpm-space-3_5);  /* 8px 14px */
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
}

/* Large - заметные кнопки для мобильных */
.dr-btn-lg {
    padding: var(--drpm-space-2_5) var(--drpm-space-4);  /* 10px 16px */
    font-size: 1rem;  /* 16px */
    line-height: 1.5rem;  /* 24px */
}

/* Extra Large - hero CTA */
.dr-btn-xl {
    padding: var(--drpm-space-3) var(--drpm-space-5);  /* 12px 20px */
    font-size: 1rem;  /* 16px */
    line-height: 1.5rem;  /* 24px */
}

/* Full Width - для мобильных actions */
.dr-btn-block {
    width: 100%;
    justify-content: center;
}

/* Mobile actions container */
.dr-offcanvas .dr-btn,
.dr-mobile-actions .dr-btn {
    width: 100%;  /* Full width на мобильных */
    padding: var(--drpm-space-2_5) var(--drpm-space-4);  /* 10px 16px - design system */
    font-size: 1rem;  /* 16px */
    line-height: 1.5rem;  /* 24px */
    /* Height = padding + line-height = 10px + 24px + 10px = 44px автоматически */
}