/* ================================
   ALMA THEME - WordPress Components
   Minimal overrides for WordPress-specific elements
   Main styles are in main.css from HTML template
   ================================ */

/* ================================
   FONT FACES - Alma Brand Fonts
   ================================ */

/* Europa Nuova font */
@font-face {
    font-family: "Europa Nova";
    src: url("../fonts/europanuova.woff2") format("woff2"),
         url("../fonts/europanuova.woff") format("woff"),
         url("../fonts/europanuova.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Rezerv fonts */
@font-face {
    font-family: "Rezerv";
    src: url("../fonts/rezerv_regular.woff2") format("woff2"),
         url("../fonts/rezerv_regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rezerv";
    src: url("../fonts/rezerv_heavy.woff2") format("woff2"),
         url("../fonts/rezerv_heavy.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ================================
   0. FONT ENFORCEMENT (WordPress Override Protection)
   ================================ */

/* Ensure Alma brand fonts are used consistently across WordPress */
body {
    font-family: "Europa Nova", sans-serif !important;
}

/* Body text elements - Europa Nova (but NOT icons!) */
p:not([class*="fa-"]), 
a:not([class*="fa-"]):not(i), 
span:not([class*="fa-"]), 
li:not([class*="fa-"]), 
td, th, label, input, textarea, select,
.text, .content, .description {
    font-family: "Europa Nova", sans-serif !important;
}

/* Ensure icons inside links/spans still use Font Awesome */
a > i[class*="fa"],
span > i[class*="fa"],
.social-icon > a > i {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Headings use Rezerv font - HIGHEST PRIORITY */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.breadcrumb-title,
.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5,
.section-title h6 {
    font-family: "Rezerv", sans-serif !important;
    margin: 0px;
    padding: 0;
    color: var(--header);
    transition: all 0.4s ease-in-out;
}

/* SPECIAL: Only h2 with text-anim class use Europa Nova instead of Rezerv */
/* h1.text-anim keeps Rezerv font */
h2.text-anim {
    font-family: "Europa Nova", "Europa Nuova", sans-serif !important;
    font-weight: normal !important;
    font-display: swap;
    letter-spacing: -0.02em;
}

/* Additional text-anim elements (but not h1) */
.text-anim:not(h1) {
    font-family: "Europa Nova", "Europa Nuova", sans-serif !important;
}


/* Buttons and theme elements */
.theme-btn,
button:not([class*="fa-"]):not(.offcanvas__close) {
    font-family: "Europa Nova", sans-serif !important;
}

/* Font Awesome icons - CRITICAL - must keep their font family */
i[class*="fa"],
i.fab, i.fas, i.far, i.fal, i.fa,
.fab, .fas, .far, .fal, .fa,
.social-icon i,
.social-icon a i,
.offcanvas__content i,
[class*="fa-"],
i[class^="fa-"],
span[class*="fa-"]::before,
i[class*="fa-"]::before,
.fa::before,
.fab::before,
.fas::before,
.far::before,
.fal::before {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* WordPress admin bar and editor exceptions */
#wpadminbar,
#wpadminbar *,
.block-editor *,
.wp-admin * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}


/* ================================
   1. HEADER & MENU FIXES
   ================================ */

/* Logo display fix - Override main.css line 8465 (display: none) */
/* Main.css has: .header-4 .header-logo { display: none; } */
/* We need higher specificity selector to override without !important */

/* UNIVERSAL LOGO FIX - ALL SCREEN SIZES */
.header-4 .header-logo,
#header-sticky.header-4 .header-logo,
#header-sticky.header-4 .header-main .header-logo,
.header-4 .header-main .header-logo,
header.header-4 .header-logo,
header.header-4 .header-main .header-logo {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}

.header-4 .header-logo img,
#header-sticky.header-4 .header-logo img,
#header-sticky.header-4 .header-main .header-logo img,
.header-4 .header-main .header-logo img,
header.header-4 .header-logo img,
header.header-4 .header-main .header-logo img {
    display: block !important;
    max-height: 60px !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Flex layout stabilization (WP menu can be wider than in static HTML)
   We do NOT change the template's core .header-main flex rules from main.css.
   We only fix flex-item sizing so the logo can't collapse and the menu can shrink.
*/

/* 1) Keep logo always visible and reserve space for it */
#header-sticky.header-4 .header-main > .header-logo {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: 180px; /* reserve space so menu can't visually erase the logo */
}

/* 2) Allow the menu area to shrink but NOT forcibly grow (so space-between works) */
#header-sticky.header-4 .header-main > .mean__menu-wrapper {
    flex: 0 1 auto; /* change flex-grow from 1 to 0 */
    min-width: 0;
    /* Optional: Center content if it does grow, just in case */
    display: flex;
    justify-content: center;
}

#header-sticky.header-4 .header-main > .mean__menu-wrapper .main-menu,
#header-sticky.header-4 .header-main > .mean__menu-wrapper .main-menu__nav,
#header-sticky.header-4 .header-main > .mean__menu-wrapper ul {
    min-width: 0;
}

/* 3) Right side shouldn't overlap logo/menu */
#header-sticky.header-4 .header-right {
    flex: 0 0 auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* Desktop: keep menu in one line (match template intent), but allow it to clip if needed */
@media (min-width: 1200px) {
    #header-sticky.header-4 .header-main > .mean__menu-wrapper {
        overflow: hidden;
    }

    #header-sticky.header-4 .header-main > .mean__menu-wrapper .main-menu ul {
        white-space: nowrap;
    }
}

/* Mobile logo fix */
@media (max-width: 1399px) {
    .header-4 .header-logo,
    #header-sticky.header-4 .header-logo {
        display: block !important;
    }
}

@media (max-width: 1199px) {
    .header-4 .header-logo,
    #header-sticky.header-4 .header-logo {
        display: block !important;
    }
}

/* Header colors - Override main.css line 7766 (gray text) */
#header-sticky.header-4 .main-menu ul li a {
    color: #fff !important;
}

/* Desktop: menu visibility */
@media (min-width: 1200px) {
    /* Hide MeanMenu mobile navigation on desktop */
    .mean-container {
        display: none !important;
    }
    
    /* Show desktop menu */
    #header-sticky.header-4 .main-menu,
    #header-sticky.header-4 .main-menu nav {
        display: block !important;
    }
    
    /* WordPress adds .menu-item class - ensure inline display */
    #header-sticky.header-4 .main-menu ul li.menu-item {
        display: inline-block !important;
    }
}

/* Mobile: hide desktop menu, show MeanMenu */
@media (max-width: 1199px) {
    #header-sticky.header-4 .main-menu nav {
        display: none !important;
    }
    
    .mean-container {
        display: block !important;
    }
}

/* Header spacing adjustments for WordPress */
/* Reduce padding to match HTML template on all screens */
#header-sticky.header-4 .header-main {
    padding: 10px 0;
}

/* Ensure navigation items don't add extra spacing */
#header-sticky.header-4 .main-menu ul li a {
    padding: 20px 0;
}

/* CRITICAL: Reduce hero section padding to match HTML template visual height */
.hero-4,
.hero-section-4 {
    padding: 200px 0 220px !important;
}

@media (max-width: 1399px) {
    .hero-4,
    .hero-section-4 {
        padding: 160px 0 120px !important;
    }
}

@media (max-width: 1199px) {
    .hero-4,
    .hero-section-4 {
        padding: 140px 0 80px !important;
    }
}

@media (max-width: 991px) {
    .hero-4,
    .hero-section-4 {
        padding: 120px 0 60px !important;
    }
}

@media (max-width: 767px) {
    .hero-4,
    .hero-section-4 {
        padding: 100px 0 50px !important;
    }
}

/* Adjust hero section top position if needed (matches template: top: 89px) */
.hero-4 .hero-right-image {
    top: 89px;
}

@media (max-width: 1199px) {
    .hero-4 .hero-right-image {
        position: relative;        
    }

    
}


/* ================================
   2. POLYLANG LANGUAGE SWITCHER
   ================================ */

/* Style language switcher (works with both static buttons and Polylang) */
.language-switcher {
    margin: 0 25px;
    display: flex;
    align-items: center;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 25px;
}

/* Style for both <a> tags (static and Polylang) */
.lang-toggle a,
.lang-toggle .lang-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 6px 12px;
    border-radius: 50%; /* Круглі кнопки */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    text-transform: uppercase;
    font-family: "Europa Nova", sans-serif !important;
}

.lang-toggle a:hover,
.lang-toggle .lang-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Active language (current) - works for both static and Polylang */
.lang-toggle a.active,
.lang-toggle .lang-btn.active,
.lang-toggle a.current-lang {
    background: var(--theme-3) !important;
    color: #fff !important;
}

/* Polylang generated list styles */
.lang-toggle ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-toggle ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

@media (max-width: 991px) {
    .language-switcher {
        margin: 0 10px;
    }
}

@media (max-width: 576px) {
    .language-switcher {
        display: none;
    }
    .mobile-single-lang {
    display: block !important;
    width: 47px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--theme-3);
    
    }

    .mobile-single-lang .mobile-lang-btn {
        color: var(--white);
    }
}


/* ================================
   3. HERO SECTION FIXES
   ================================ */
/* Fix hero background image scale/position to match HTML template */
.hero-4.bg-cover,
.hero-section-4.bg-cover {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Alternative: if background should be slightly zoomed like in template */
.hero-4,
.hero-section-4 {
    background-size: cover;
    background-position: center;
}

/* Fix hero right image (slider) scaling */
.hero-4 .hero-right-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Fix subtitle text wrapping issue (2 lines → 1 line) */
.hero-4 .hero-left-content h6,
.hero-4 .hero-left-content .sub-title,
.hero-section-4 .hero-left-content h6,
.hero-section-4 .hero-left-content .sub-title {
    white-space: nowrap !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Fix sub-title in all sections (not just hero) */
.sub-title,
h6.sub-title,
.section-title .sub-title,
.section-title h6.sub-title {
    font-size: 14px !important;
    font-family: "DM Sans", sans-serif !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
}

.sub-title img,
h6.sub-title img {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0;
}

/* On smaller screens, reduce font to fit better */
@media (max-width: 1399px) {
    .hero-4 .hero-left-content h6,
    .hero-4 .hero-left-content .sub-title,
    .hero-section-4 .hero-left-content h6,
    .hero-section-4 .hero-left-content .sub-title {
        font-size: 14px !important;
    }
}

@media (max-width: 1199px) {
    .hero-4 .hero-left-content h6,
    .hero-4 .hero-left-content .sub-title,
    .hero-section-4 .hero-left-content h6,
    .hero-section-4 .hero-left-content .sub-title {
        white-space: normal !important;
        font-size: 11px !important;
    }
}

@media (max-width: 767px) {
    .hero-4 .hero-left-content h6,
    .hero-4 .hero-left-content .sub-title,
    .hero-section-4 .hero-left-content h6,
    .hero-section-4 .hero-left-content .sub-title {
        font-size: 10px !important;
    }
}


/* Hero counter items - increase h2 size for better visibility */
.hero-4 .hero-counter-items-1 h2,
.hero-4 .hero-counter-items-2 h2,
.hero-section-4 .hero-counter-items-1 h2,
.hero-section-4 .hero-counter-items-2 h2 {
    font-size: 3rem !important;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 1399px) {
    .hero-4 .hero-counter-items-1 h2,
    .hero-4 .hero-counter-items-2 h2,
    .hero-section-4 .hero-counter-items-1 h2,
    .hero-section-4 .hero-counter-items-2 h2 {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 991px) {
    .hero-4 .hero-counter-items-1 h2,
    .hero-4 .hero-counter-items-2 h2,
    .hero-section-4 .hero-counter-items-1 h2,
    .hero-section-4 .hero-counter-items-2 h2 {
        font-size: 2rem !important;
    }
}


/* ================================
   4. WP ADMIN BAR FIXES
   ================================ */

/* Keep sticky header below admin bar */
body.admin-bar #header-sticky.sticky {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar #header-sticky.sticky {
        top: 46px;
    }
}

/* Realign hero image when admin bar is present */
body.admin-bar .hero-4 .hero-right-image {
    top: 121px; /* 89px + 32px admin bar */
}

@media (max-width: 782px) {
    body.admin-bar .hero-4 .hero-right-image {
        top: 135px;
    }
}


/* ================================
   5. CONTACT FORM 7 STYLING
   ================================ */

.alma-cf7-wrap .wpcf7-form {
    margin-top: 20px;
}

.alma-cf7-wrap .wpcf7-form p {
    margin-bottom: 0;
}

.alma-cf7-wrap .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}

.alma-cf7-wrap .wpcf7-form input[type="text"],
.alma-cf7-wrap .wpcf7-form input[type="email"],
.alma-cf7-wrap .wpcf7-form input[type="tel"],
.alma-cf7-wrap .wpcf7-form textarea {
    width: 100%;
}

.alma-cf7-wrap .wpcf7-form .wpcf7-submit {
    border: 0;
}

.alma-cf7-wrap .wpcf7-response-output,
.alma-cf7-wrap .wpcf7-not-valid-tip {
    margin-top: 12px;
}

/* ================================
   Additional Contact Information Cards
   ================================ */
.additional-contact-info {
    margin-top: 40px;
}

.contact-info-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    transition: all 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.contact-info-card .card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--bg-3);
}

.contact-info-card .card-header .icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--theme-3), var(--theme-4));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-card .card-header .icon i {
    font-size: 26px;
    color: #fff;
}

.contact-info-card .card-header h4 {
    font-size: 22px;
    font-weight: 600;
    color: var(--header);
    margin: 0;
    font-family: "Rezerv", sans-serif;
}

.contact-info-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-card .info-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.contact-info-card .info-item > i {
    font-size: 18px;
    color: var(--theme-3);
    margin-top: 3px;
    flex-shrink: 0;
}

.contact-info-card .info-item > div {
    flex: 1;
}

.contact-info-card .info-item .label {
    display: block;
    font-size: 14px;
    color: #6b6b6b;
    margin-bottom: 5px;
    font-weight: 500;
}

.contact-info-card .info-item a {
    color: var(--header);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.contact-info-card .info-item a:hover {
    color: var(--theme-3);
}

.contact-info-card .info-item a.hotline-number {
    font-size: 20px;
    color: var(--theme-3);
    font-weight: 700;
}

.contact-info-card .info-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--header);
}

/* Mobile responsive */
@media (max-width: 991px) {
    .contact-info-card {
        padding: 25px;
    }
    
    .contact-info-card .card-header h4 {
        font-size: 20px;
    }
    
    .contact-info-card .card-header .icon {
        width: 50px;
        height: 50px;
    }
    
    .contact-info-card .card-header .icon i {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .additional-contact-info {
        margin-top: 30px;
    }
    
    .contact-info-card {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .contact-info-card .card-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .contact-info-card .card-header h4 {
        font-size: 18px;
    }
    
    .contact-info-card .info-item a.hotline-number {
        font-size: 18px;
    }
}


/* ================================
   6. WORDPRESS CONTENT FIXES
   ================================ */

/* Ensure WordPress images are responsive */
.wp-post-image,
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* WordPress alignments */
.alignleft {
    float: left;
    margin-right: 20px;
}

.alignright {
    float: right;
    margin-left: 20px;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* ================================
   7. STORE LOCATOR (WordPress specific)
   ================================ */

/* Store custom post type styles will be added here when needed */


/* ================================
   8. FOOTER ICON CENTERING FIX
   ================================ */

/* Center images inside footer info icons */
.footer-info-wrapper-2 .info-items .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer-info-wrapper-2 .info-items .icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}


/* ================================
   9. ABOUT PAGE - COUNTER BOXES FIX
   ================================ */

/* Counter numbers in about page - use Rezerv font */
.about-content-style-1 .bottom-items .icon-box-items .content h2 {
    font-family: "Rezerv", sans-serif !important;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--header);
    margin: 0;
}

.about-content-style-1 .bottom-items .icon-box-items .content h2 .count {
    font-family: "Rezerv", sans-serif !important;
}

/* Global counter class - ensure Rezerv font */
.count,
span.count,
h2 .count,
h3 .count {
    font-family: "Rezerv", sans-serif !important;
}


/* ================================
   10. ABOUT PAGE - LIST WITH ICONS FIX
   ================================ */

/* Fix list items with icons to prevent wrapping on mobile */
.about-content-style-1 .list-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Center feature boxes on mobile */
.feature-box-items-2 {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-box-items-2 h2 {
    margin: 0 auto !important;
    text-align: center !important;
}

.feature-box-items-2 .content {
    text-align: center !important;
    width: 100%;
}

.feature-box-items-2 .content h4,
.feature-box-items-2 .content p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.about-content-style-1 .list-items ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.about-content-style-1 .list-items ul li img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .about-content-style-1 .list-items ul li {
        gap: 10px;
        margin-bottom: 15px;
        font-size: 14px;
    }
    
    .about-content-style-1 .list-items ul li img {
        width: 20px;
        height: 20px;
    }
    
    /* Center video on mobile */
    .choose-us-right-items-style-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .choose-us-right-items-style-4 .about-image {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .choose-us-right-items-style-4 .about-image video {
        margin: 0 auto;
        display: block;
    }
}


/* ================================
   11. CHOOSE US SECTION - LIST ITEMS FIX
   ================================ */

/* Fix list items alignment in Choose Us section */
.choose-us-right-items-style-4 .list-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.choose-us-right-items-style-4 .list-items ul li,
.choose-us-right-items-style-4 .list-items-area ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    white-space: normal;
    word-wrap: break-word;
}

.choose-us-right-items-style-4 .list-items ul li img,
.choose-us-right-items-style-4 .list-items-area ul li img {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    margin-top: 3px !important;
    margin-right: 0 !important;
    display: block;
}

/* Fix circle-box pointer icon centering */
.choose-us-right-items-style-4 .circle-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.choose-us-right-items-style-4 .circle-box .text-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.choose-us-right-items-style-4 .circle-box .arrow-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .choose-us-right-items-style-4 .list-items ul li,
    .choose-us-right-items-style-4 .list-items-area ul li {
        gap: 10px !important;
        margin-bottom: 12px;
        font-size: 16px;
    }
    
    .choose-us-right-items-style-4 .list-items ul li img,
    .choose-us-right-items-style-4 .list-items-area ul li img {
        width: 20px !important;
        height: 20px !important;
        margin-top: 2px !important;
    }
}


/* ================================
   END OF COMPONENTS
   ================================ */