/*
Theme Name: Uzinzi Theme
Author: Assistant
Description: Custom theme for Uzinzi website using ACF Pro and Classic Editor.
Version: 1.5
Text Domain: uzinzi
*/

:root {
    --primary-color: #0056b3;
    --text-color: #0F172A;
    --font-main: 'Neue Haas Unica', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --container-width: 1400px;
    --site-header-offset: 72px;
    --admin-bar-offset: 0px;
}

@media (min-width: 1600px) {
    :root {
        --container-width: 1560px;
    }

    .container,
    .header-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1920px) {
    :root {
        --container-width: 1680px;
    }

    .container,
    .header-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: #F5F9FF;
    -webkit-font-smoothing: antialiased;
    padding-top: calc(var(--site-header-offset) + var(--admin-bar-offset));
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 500;
}

p {
    margin: 0 0 1.5em;
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 30px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 400;
    /* Regular as requested */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-primary {
    background: #fff;
    color: #13519C;
    /* Exact color requested */
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background: #fff;
    transform: none;
    /* Minimalistic - no translate */
    box-shadow: none;
    opacity: 0.95;
}

/* =========================================
   HEADER STYLES
   ========================================= */

/* Base Header */
.site-header {
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    position: fixed;
    top: var(--admin-bar-offset);
    left: 0;
    right: 0;
}

.header-container {
    max-width: var(--container-width);
    margin: 0 auto;
    height: var(--site-header-offset);
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.site-branding {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.header-logo-link {
    height: 100%;
    display: flex;
    align-items: center;
}

.header-logo {
    height: 40px; /* Adjust based on logo aspect ratio */
    width: auto;
    display: block;
}

/* Navigation */
.main-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 40px;
    align-items: stretch;
    height: 100%;
}

.header-menu {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

.header-menu > li {
    position: relative;
    display: flex;
    align-items: stretch;
}

.header-menu > li > a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 5px;
    transition: opacity 0.3s ease;
    padding: 0 20px;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;
}

.header-menu > li > a:hover {
    opacity: 0.8;
}

.header-menu > li.current-menu-item > a,
.header-menu > li.current_page_item > a,
.header-menu > li.current-menu-ancestor > a,
.header-menu > li.current_page_ancestor > a {
    background: #2E5CB41A;
    border-bottom-color: #2E5CB4;
    opacity: 1;
}

.header-menu .fa-chevron-down {
    font-size: 10px;
}

.header-menu > li.menu-item-has-children > a::after {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
    background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M14.1671%207.64174C14.0109%207.48653%2013.7997%207.39941%2013.5796%207.39941C13.3594%207.39941%2013.1482%207.48653%2012.9921%207.64174L10.0004%2010.5917L7.0504%207.64174C6.89427%207.48653%206.68306%207.39941%206.4629%207.39941C6.24275%207.39941%206.03154%207.48653%205.8754%207.64174C5.7973%207.71921%205.7353%207.81138%205.693%207.91293C5.65069%208.01448%205.62891%208.1234%205.62891%208.23341C5.62891%208.34342%205.65069%208.45234%205.693%208.55389C5.7353%208.65544%205.7973%208.74761%205.8754%208.82507L9.40874%2012.3584C9.48621%2012.4365%209.57837%2012.4985%209.67992%2012.5408C9.78147%2012.5831%209.89039%2012.6049%2010.0004%2012.6049C10.1104%2012.6049%2010.2193%2012.5831%2010.3209%2012.5408C10.4224%2012.4985%2010.5146%2012.4365%2010.5921%2012.3584L14.1671%208.82507C14.2452%208.74761%2014.3072%208.65544%2014.3495%208.55389C14.3918%208.45234%2014.4136%208.34342%2014.4136%208.23341C14.4136%208.1234%2014.3918%208.01448%2014.3495%207.91293C14.3072%207.81138%2014.2452%207.71921%2014.1671%207.64174Z%22%20fill%3D%22url(%23paint0_linear)%22/%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear%22%20x1%3D%229.8689%22%20y1%3D%227.69327%22%20x2%3D%229.8689%22%20y2%3D%2212.2061%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2314284E%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232E5CB4%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.header-menu > li.menu-item-has-children.active > a::after {
    transform: rotate(180deg);
}

/* Dropdown */
.header-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    padding: 10px 0;
    z-index: 1001;
}

.header-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-menu .sub-menu li a {
    display: block;
    padding: 8px 20px;
    color: #14284E;
    font-size: 14px;
    transition: background 0.2s ease;
}

.header-menu .sub-menu li a:hover {
    background: #f5f9ff;
    color: #0056b3;
}

/* Language Switcher */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-switcher {
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.current-lang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.current-lang .fa-globe {
    font-size: 16px;
}

.current-lang .fa-chevron-down {
    font-size: 10px;
    margin-left: 2px;
}


/* -----------------------------------------
   TRANSPARENT HEADER (Homepage)
   ----------------------------------------- */
.site-header-transparent {
    background: transparent;
    border-bottom: none;
}

.site-header-transparent .header-menu > li > a,
.site-header-transparent .lang-switcher {
    color: #fff;
}

.site-header-transparent .header-logo {
    /* If SVG is used inline, fill could be changed, but here we swap images */
}

.site-header-transparent .lang-icon path {
    fill: #FFFD00;
}

.site-header-transparent .header-menu > li.current-menu-item > a,
.site-header-transparent .header-menu > li.current_page_item > a,
.site-header-transparent .header-menu > li.current-menu-ancestor > a,
.site-header-transparent .header-menu > li.current_page_ancestor > a {
    background: transparent;
    border-bottom-color: transparent;
}


/* -----------------------------------------
   WHITE HEADER (Other Pages)
   ----------------------------------------- */
.site-header-white {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body.admin-bar {
    --admin-bar-offset: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --admin-bar-offset: 46px;
    }
}

.site-header-white .header-menu > li > a,
.site-header-white .lang-switcher {
    color: #14284E; /* Dark Blue */
}

.site-header-white .lang-icon path {
    fill: #13519C;
}


html {
    overflow-x: hidden;
    overscroll-behavior-y: none;
}

body {
    overflow-x: visible;
}

/* Responsive */
@media (max-width: 1200px) {
    .header-logo {
        height: 34px;
    }

    /* Mobile Menu Toggle */
    .menu-toggle {
        display: block; /* Was flex */
        position: relative;
        width: 32px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1005; /* Higher than menu */
        margin-left: 20px;
    }

    .menu-toggle .bar {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #14284E;
        margin: 6px 0;
        transition: all 0.3s ease;
    }

    .menu-toggle .bar {
        transform-origin: center;
    }

    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Adjust hamburger color for transparent header */
    .site-header-transparent .menu-toggle .bar {
        background-color: #fff;
    }
    
    body.menu-open .site-header-transparent .menu-toggle .bar {
        background-color: #14284E;
    }

    /* Mobile Menu Container */
    .main-navigation {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(180deg, rgba(245, 249, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 60%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.4s ease, opacity 0.2s ease;
        z-index: 1000;
        margin-right: 0;
    }

    .main-navigation.active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .header-menu {
        flex-direction: column;
        gap: 30px;
        height: auto;
        align-items: center;
        justify-content: center;
    }

    .header-menu > li > a {
        font-size: 24px;
        color: #14284E;
        padding: 10px 18px;
        border-radius: 999px;
    }

    .header-menu > li.current-menu-item > a,
    .header-menu > li.current_page_item > a,
    .header-menu > li.current-menu-ancestor > a,
    .header-menu > li.current_page_ancestor > a {
        background: rgba(19, 81, 156, 0.08);
        border-bottom-color: transparent;
        color: #13519C;
        opacity: 1;
    }

    body.menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.menu-open-locked {
        overflow: hidden;
        touch-action: none;
    }
    
    /* Header Actions in Mobile Menu? 
       Usually we want lang switcher inside menu on mobile or keep it in header.
       Here it stays in header-actions which is outside main-navigation.
       We might need to adjust header-actions position or visibility.
    */
    .header-actions {
        display: flex;
        align-items: center;
    }

    /* Invert white logo to black when menu is open on transparent header */
    body.menu-open .site-header-transparent .header-logo {
        filter: invert(1) grayscale(1) brightness(0);
        transition: filter 0.3s ease;
    }
    
    /* Also ensure language switcher text turns dark if needed */
    body.menu-open .site-header-transparent .lang-switcher {
        color: #14284E;
    }
    
    body.menu-open .site-header-transparent .lang-switcher svg {
        fill: #14284E; /* Assuming SVG uses fill */
    }

    body.menu-open .site-header-transparent .header-menu > li > a {
        color: #14284E;
    }
}

@media (max-width: 768px) {
    .header-logo {
        height: 30px;
    }
}

@media (max-width: 480px) {
    .header-logo {
        height: 26px;
    }
}


/* Hide toggle on desktop */
@media (min-width: 1201px) {
    .menu-toggle {
        display: none;
    }
}

.btn-circle-arrow {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    /* Tighter spacing "прилипает" */
    transition: transform 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.btn-circle-arrow:hover {
    transform: rotate(-45deg);
    /* Rotate animation only */
    box-shadow: none;
}

/* =========================================
   LANGUAGE SWITCHER DROPDOWN
   ========================================= */
.lang-switcher {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.lang-switcher:hover .lang-dropdown,
.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lang-dropdown li {
    margin: 0;
}

.lang-dropdown li a {
    display: block;
    padding: 8px 20px;
    color: #14284E;
    font-size: 14px;
    transition: background 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.lang-dropdown li a:hover {
    background: #F5F9FF;
    color: #13519C;
}

/* Ensure text color in dropdown is always dark, even on transparent header */
.site-header-transparent .lang-dropdown {
    background: #fff;
}
.site-header-transparent .lang-dropdown li a {
    color: #14284E;
}