/**
 * Driven Theme - Header Styles
 * Exact replica of the original static site header design
 *
 * @package Driven
 * @since 1.0.0
 */

/* ========================================
   HEADER CONTAINER
   ======================================== */

.driven-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header, 9999);
}

.driven-header > .relative {
    background: var(--color-white);
}

/* Header bottom shadow overlay */
.driven-header .absolute.inset-0.pointer-events-none {
    box-shadow: inset 0px -3px 6px -4px rgba(0, 0, 0, 0.25);
}

/* ========================================
   DESKTOP NAVIGATION
   ======================================== */

.driven-header nav.flex {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: var(--color-black);
    gap: 3px;
}

/* Navigation item container */
.driven-nav-item {
    flex: 1;
    overflow: hidden;
    background-color: var(--color-white);
    transition: background-color 0.2s ease;
}

/* Navigation link inside item */
.driven-nav-item a,
.driven-nav-item > div > div > a,
.driven-nav-item > div > div > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: max(10%, 0.6em);
    width: 100%;
    padding: 0.75rem var(--spacing-container);
    font-family: var(--driven-nav-font-family, var(--font-business-system));
    font-size: var(--driven-nav-font-size, var(--text-headline-base));
    font-weight: var(--driven-nav-font-weight, 700);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--driven-nav-text-color, var(--color-black));
    line-height: 1.3;
}

@media (min-width: 1280px) {
    .driven-nav-item a,
    .driven-nav-item > div > div > a,
    .driven-nav-item > div > div > div {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Logo in nav - smaller than link text */
.driven-nav-item .h-\[1\.25em\] {
    height: 1.25em;
    width: auto;
    object-fit: contain;
}

/* ========================================
   NAVIGATION DOT INDICATOR
   ======================================== */

.driven-nav-dot {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    background-color: #F3F3F3;
    width: 1.05em;
}

.driven-nav-dot::before {
    content: '';
    position: absolute;
    z-index: 10;
    inset: 0;
    border-radius: 9999px;
    box-shadow: 0px 0.13em 0.13em 0px rgba(0, 0, 0, 0.25) inset;
}

.driven-nav-dot-fill {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: var(--driven-dot-active-color, #e80300);
    transition: transform 0.3s ease;
}

.driven-nav-dot-fill.scale-0 {
    transform: scale(0);
}

.driven-nav-dot-fill.scale-100 {
    transform: scale(1);
}

/* ========================================
   MOBILE HEADER
   ======================================== */

.driven-header .block.md\:hidden {
    display: block;
}

@media (min-width: 768px) {
    .driven-header .block.md\:hidden {
        display: none;
    }
    .driven-header .hidden.md\:block {
        display: block;
    }
}

@media (max-width: 767px) {
    .driven-header .hidden.md\:block {
        display: none;
    }
}

/* Mobile header bar */
.driven-header .container.py-\[10px\] {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Mobile logo */
.driven-header .h-\[1\.4em\] {
    height: 1.4em;
    width: auto;
    object-fit: contain;
}

/* Mobile page title */
.driven-mobile-page-title {
    font-family: var(--driven-nav-font-family, var(--font-business-system));
}

/* ========================================
   MOBILE MENU OVERLAY
   ======================================== */

#nav-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    overflow: hidden;
    font-family: var(--driven-nav-font-family, var(--font-business-system));
    font-size: var(--text-headline);
    font-weight: var(--driven-nav-font-weight, 700);
    text-transform: uppercase;
    z-index: 100;
}

#nav-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav-mobile li {
    overflow: hidden;
}

#nav-mobile li > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: var(--spacing-container);
    padding-right: var(--spacing-container);
    border-bottom: 2px solid var(--color-black);
    background-color: var(--color-white);
    transform: translateY(-101%);
    transition: transform 0.3s ease-out;
}

#nav-mobile li:first-child > div {
    border-top: 2px solid var(--color-black);
}

#nav-mobile li a {
    flex: 1;
    padding: 0.5625rem 0;
    text-decoration: none;
    color: var(--driven-nav-text-color, var(--color-black));
    font-family: var(--driven-nav-font-family, var(--font-business-system));
}

/* Mobile menu dot - slightly smaller */
#nav-mobile .driven-nav-dot {
    width: 0.8em;
}

/* ========================================
   BURGER ICON (Mobile menu toggle)
   Red bracket-style: top/bottom U-shaped brackets
   with 3 red horizontal lines inside
   ======================================== */

button[aria-controls="nav-mobile"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle {
    width: 34px;
    height: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 3px;
    box-sizing: border-box;
}

/* Top bracket: red ┌─┐ shape (left, top, right borders) */
.mobile-menu-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-top: 1.5px solid #e80300;
    border-left: 1.5px solid #e80300;
    border-right: 1.5px solid #e80300;
    border-bottom: none;
}

/* Bottom bracket: red └─┘ shape (left, bottom, right borders) */
.mobile-menu-toggle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-bottom: 1.5px solid #e80300;
    border-left: 1.5px solid #e80300;
    border-right: 1.5px solid #e80300;
    border-top: none;
}

.burger-icon {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Three horizontal red lines */
.burger-icon::before,
.burger-icon::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    border-top: 1.5px solid #e80300;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.burger-icon::before {
    order: 0;
}

.burger-icon::after {
    order: 2;
}

/* Middle line */
.burger-icon__strike {
    display: block;
    width: 100%;
    height: 0;
    border-top: 1.5px solid #e80300;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Open state: fade out the 3 lines */
.mobile-menu-toggle.is-open .burger-icon::before {
    opacity: 0;
    transform: translateY(5px);
}

.mobile-menu-toggle.is-open .burger-icon::after {
    opacity: 0;
    transform: translateY(-5px);
}

.mobile-menu-toggle.is-open .burger-icon__strike {
    opacity: 0;
}

/* ========================================
   HEADER END IMAGE (Right side decoration)
   ======================================== */

.driven-nav-item .h-\[1em\] {
    height: 1em;
    width: auto;
}

/* ========================================
   HEADER HOVER EFFECTS
   ======================================== */

.driven-nav-item a:hover .driven-nav-dot-fill.scale-0 {
    transform: scale(0.5);
    opacity: 0.4;
}

/* ========================================
   ADMIN BAR OFFSET
   ======================================== */

.admin-bar .driven-header {
    top: 32px;
}

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