/* custom-fonts.css - Global Font Override AND CORS Bypass */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

@font-face {
    font-family: 'Helvetica Neue LT Pro';
    src: local('Helvetica Neue LT Pro'), local('HelveticaNeueLTPro-Roman'), local('Helvetica Neue');
    font-weight: normal;
    font-style: normal;
}

body,
p,
span,
li,
a,
div {
    font-family: 'Helvetica Neue LT Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.elementor-heading-title,
.elementor-widget-heading p,
.slogan-text,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

h1,
h2,
h3,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.menu-item a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

/* ICONS FIX */
@font-face {
    font-family: 'FontAwesome';
    src: url('assets/fonts/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome';
    src: url('assets/fonts/fa-regular-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'fontawesome';
    src: url('assets/fonts/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

i.fa,
i.fas,
i.far,
i.fal,
.fa::before,
.fas::before,
.far::before,
.fal::before {
    font-family: 'FontAwesome', sans-serif !important;
    font-weight: 900 !important;
}

.fa-qrcode::before {
    content: "\f029" !important;
    font-family: 'FontAwesome' !important;
    font-weight: 900 !important;
}

.fa-phone-alt::before {
    content: "\f879" !important;
    font-family: 'FontAwesome' !important;
    font-weight: 900 !important;
}

.fa-comment-alt::before {
    content: "\f27a" !important;
    font-family: 'FontAwesome' !important;
    font-weight: 900 !important;
}

.w-nav-arrow {
    font-family: 'FontAwesome' !important;
    font-weight: 900 !important;
}

/* DROPDOWN HOVER FIXES */
.w-nav.type_desktop .w-nav-item.level_1.menu-item-has-children:hover>.w-nav-list.level_2 {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    margin-top: 0 !important;
    transition: opacity 0.3s ease;
}

/* ── Mobile Menu Close Icon Fix ── */
.w-nav-close:before {
    content: "\f00d" !important;
    font-family: 'Font Awesome 5 Pro', 'FontAwesome', sans-serif !important;
    font-weight: 300 !important;
}

/* =========================================
   SOLIS CHOCOLATE COFFEE — BRAND TOKENS
   ========================================= */

:root {
    /* ══════════════════════════════════════
       BRAND ANCHORS (user-provided)
       ══════════════════════════════════════ */
    --brand-beige: #F3D5B5;
    /* primary light – highlight, badges, header bg */
    --brand-brown: #583101;
    /* primary dark  – buttons, accents, CTA        */

    /* ══════════════════════════════════════
       EXPANDED HARMONIOUS PALETTE
       ══════════════════════════════════════ */

    /* Backgrounds — light-to-dark warm cream scale */
    --bg-page: #FDF8F3;
    /* main page background — very soft cream        */
    --bg-surface: #FFFFFF;
    /* cards, content blocks — clean white            */
    --bg-surface-alt: #FAF0E6;
    /* alternating sections — linen / warm white      */
    --bg-muted: #F5E6D3;
    /* subtle highlight areas — lighter than beige    */

    /* Text — warm brown hierarchy */
    --text-primary: #2C1A05;
    /* headings, body text — near-black warm brown    */
    --text-secondary: #3D2200;
    /* subheadings, secondary info — dark brown        */
    --text-muted: #7A5C3C;
    /* captions, placeholders, help text — warm brown */
    --text-inverse: #FFFFFF;
    /* text on dark backgrounds — pure white           */

    /* Accent / Interactive */
    --accent-primary: #583101;
    /* = brand-brown — buttons, links, CTA            */
    --accent-hover: #6E4210;
    /* button/link hover — lighter warm brown          */
    --accent-active: #3D2200;
    /* pressed/active state — deeper brown             */
    --accent-light: #F3D5B5;
    /* = brand-beige — badges, header, highlight       */
    --accent-light-hover: #EABD91;
    /* beige hover — slightly richer                  */

    /* Borders & Separators */
    --border-light: #E8D5C0;
    /* subtle warm borders — cards, inputs             */
    --border-medium: #D4B896;
    /* visible borders — sections, dividers            */
    --border-strong: #B89B78;
    /* prominent borders — focus state                 */

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(44, 26, 5, 0.08);
    --shadow-md: 0 4px 12px rgba(44, 26, 5, 0.10);
    --shadow-lg: 0 8px 24px rgba(44, 26, 5, 0.12);

    /* Overlays — brown-based */
    --overlay-light: rgba(88, 49, 1, 0.05);
    --overlay-15: rgba(88, 49, 1, 0.15);
    --overlay-30: rgba(88, 49, 1, 0.30);
    --overlay-60: rgba(88, 49, 1, 0.60);
    --overlay-85: rgba(88, 49, 1, 0.85);

    /* Dark sections (footer, alt-content, CTA banners) */
    --dark-bg: #3B2506;
    /* footer, dark sections — rich deep brown        */
    --dark-bg-alt: #2C1A05;
    /* subfooter, deeper layer                        */
    --dark-border: rgba(243, 213, 181, 0.2);
    /* subtle border on dark bg             */
    --dark-text: #F3D5B5;
    /* text on dark bg — brand beige                  */
    --dark-text-muted: rgba(243, 213, 181, 0.90);
    /* body text on dark bg — high visibility          */
    --dark-link-hover: #FFFFFF;
    /* link hover on dark bg                          */

    /* Status / Utility (optional, for forms etc) */
    --success: #5A7A3A;
    /* earthy green                                   */
    --error: #A63D2B;
    /* warm red-brown                                 */
    --warning: #C68B2C;
    /* amber / gold                                   */
    --info: #5B7C8A;
    /* slate blue-gray                                */

    /* ══════════════════════════════════════
       THEME VARIABLE OVERRIDES (Impreza)
       ══════════════════════════════════════ */

    /* ── Header ── */
    --color-header-middle-bg: var(--bg-page) !important;
    --color-header-middle-bg-grad: var(--bg-page) !important;
    --color-header-middle-text: var(--text-primary) !important;
    --color-header-middle-text-hover: var(--accent-primary) !important;
    --color-header-transparent-bg: var(--dark-bg) !important;
    --color-header-transparent-bg-grad: linear-gradient(360deg, rgba(59, 37, 6, 0), rgba(59, 37, 6, 0.75)) !important;
    --color-header-transparent-text: var(--text-inverse) !important;
    --color-header-transparent-text-hover: var(--accent-light) !important;
    --color-chrome-toolbar: var(--bg-page) !important;
    --color-chrome-toolbar-grad: var(--bg-page) !important;
    --color-header-top-bg: var(--accent-light) !important;
    --color-header-top-bg-grad: linear-gradient(0deg, var(--accent-light), var(--bg-page)) !important;
    --color-header-top-text: var(--text-secondary) !important;
    --color-header-top-text-hover: var(--accent-primary) !important;
    --color-header-top-transparent-bg: rgba(59, 37, 6, 0.2) !important;
    --color-header-top-transparent-bg-grad: rgba(59, 37, 6, 0.2) !important;
    --color-header-top-transparent-text: rgba(253, 248, 243, 0.8) !important;
    --color-header-top-transparent-text-hover: var(--accent-light) !important;

    /* ── Content ── */
    --color-content-bg: var(--bg-page) !important;
    --color-content-bg-grad: var(--bg-page) !important;
    --color-content-bg-alt: var(--bg-surface-alt) !important;
    --color-content-bg-alt-grad: var(--bg-surface-alt) !important;
    --color-content-border: var(--border-light) !important;
    --color-content-heading: var(--text-primary) !important;
    --color-content-heading-grad: var(--text-primary) !important;
    --color-content-text: var(--text-primary) !important;
    --color-content-link: var(--accent-primary) !important;
    --color-content-link-hover: var(--accent-hover) !important;
    --color-content-primary: var(--accent-primary) !important;
    --color-content-primary-grad: var(--accent-primary) !important;
    --color-content-secondary: var(--accent-hover) !important;
    --color-content-secondary-grad: var(--accent-hover) !important;
    --color-content-faded: var(--text-muted) !important;
    --color-content-overlay: var(--overlay-85) !important;
    --color-content-overlay-grad: var(--overlay-85) !important;

    /* ── Alt Content (dark sections) ── */
    --color-alt-content-bg: var(--dark-bg) !important;
    --color-alt-content-bg-grad: var(--dark-bg) !important;
    --color-alt-content-bg-alt: var(--dark-bg-alt) !important;
    --color-alt-content-bg-alt-grad: var(--dark-bg-alt) !important;
    --color-alt-content-border: var(--dark-border) !important;
    --color-alt-content-heading: var(--dark-text) !important;
    --color-alt-content-heading-grad: var(--dark-text) !important;
    --color-alt-content-text: var(--dark-text) !important;
    --color-alt-content-link: var(--accent-light) !important;
    --color-alt-content-link-hover: var(--dark-link-hover) !important;
    --color-alt-content-primary: var(--accent-light) !important;
    --color-alt-content-primary-grad: linear-gradient(0deg, var(--accent-light), #FFFFFF) !important;
    --color-alt-content-secondary: var(--accent-light-hover) !important;
    --color-alt-content-secondary-grad: var(--accent-light-hover) !important;

    /* ── Footer ── */
    --color-footer-bg: var(--dark-bg) !important;
    --color-footer-bg-grad: var(--dark-bg) !important;
    --color-footer-bg-alt: var(--dark-bg-alt) !important;
    --color-footer-bg-alt-grad: var(--dark-bg-alt) !important;
    --color-footer-border: var(--dark-border) !important;
    --color-footer-heading: var(--dark-text) !important;
    --color-footer-heading-grad: var(--dark-text) !important;
    --color-footer-text: var(--dark-text) !important;
    --color-footer-link: var(--accent-light) !important;
    --color-footer-link-hover: var(--dark-link-hover) !important;

    /* ── Subfooter ── */
    --color-subfooter-bg: var(--dark-bg-alt) !important;
    --color-subfooter-bg-grad: var(--dark-bg-alt) !important;
    --color-subfooter-text: var(--dark-text) !important;
    --color-subfooter-link: var(--accent-light) !important;
    --color-subfooter-link-hover: var(--dark-link-hover) !important;

    /* ── Misc ── */
    --color-content-primary-faded: var(--overlay-15) !important;
    --box-shadow: var(--shadow-md) !important;
    --box-shadow-up: 0 -4px 12px rgba(44, 26, 5, 0.10) !important;

    /* ── Layout ── */
    --site-canvas-width: 1300px !important;
    --site-content-width: 1300px !important;
    --text-block-margin-bottom: 1rem !important;
    --inputs-font-size: 1rem !important;
    --inputs-height: 2.8rem !important;
    --inputs-padding: 1.2rem !important;
    --inputs-border-width: 1px !important;
    --inputs-text-color: var(--text-primary) !important;
}

/* ══════════════════════════════════════
   STRUCTURAL OVERRIDES
   ══════════════════════════════════════ */

/* Page background — soft warm cream, not full beige */
body,
.l-canvas,
.l-main,
#page-content {
    background-color: var(--bg-page) !important;
}

/* Dark accent sections */
.l-section.color_primary {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Content sections — subtle alternating backgrounds */
.l-section.color_alternate {
    background-color: var(--bg-surface-alt) !important;
}

/* ── Header bar with brand beige accent ── */
.l-subheader.at_middle {
    border-bottom: 2px solid var(--accent-light) !important;
}

/* ── Header QR Menü button — must be visible on light bg ── */
.l-subheader .w-btn,
.l-subheader .us-btn-style_4 {
    background-color: var(--accent-primary) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: var(--accent-primary) !important;
}

.l-subheader .w-btn .w-btn-label {
    color: #FFFFFF !important;
}

.l-subheader .w-btn:hover,
.l-subheader .us-btn-style_4:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #FFFFFF !important;
}

/* ── Links ── */
a {
    color: var(--accent-primary) !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: var(--accent-hover) !important;
}

/* ── Headings — near-black for strong hierarchy ── */
h1,
h2,
h3,
h4,
h5,
h6,
.w-text-h {
    color: var(--text-primary) !important;
}

/* ── Body text — dark brown, easy to read ── */
p,
li,
span,
div,
.wpb_text_column {
    color: var(--text-primary) !important;
}

/* ── Muted text ── */
.w-text.has_text_color,
small,
figcaption,
.text-muted {
    color: var(--text-muted) !important;
}

/* ── Buttons — primary (brown fill) ── */
.w-btn,
.btn-primary,
.us-btn-style_4 {
    background-color: var(--accent-primary) !important;
    background-image: none !important;
    color: var(--text-inverse) !important;
    border: 2px solid var(--accent-primary) !important;
    border-radius: 4px !important;
    transition: all 0.25s ease !important;
}

.w-btn .w-btn-label {
    color: inherit !important;
}

.w-btn:hover,
.btn-primary:hover,
.us-btn-style_4:hover {
    background-color: var(--accent-hover) !important;
    background-image: none !important;
    border-color: var(--accent-hover) !important;
    color: var(--text-inverse) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Ghost/outline button variant */
.us-btn-style_3,
.us-btn-style_5 {
    background-color: var(--accent-primary) !important;
    background-image: none !important;
    color: var(--text-inverse) !important;
    border: 2px solid var(--accent-primary) !important;
    transition: all 0.25s ease !important;
}

.us-btn-style_3:hover,
.us-btn-style_5:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--text-inverse) !important;
}

/* ── Cards / Image containers ── */
.w-video,
.w-image {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ── Borders & Separators ── */
.w-separator,
hr {
    border-color: var(--border-light) !important;
}

/* ══════════════════════════════════════════════════════
   DARK BACKGROUND SECTIONS — ALL TEXT MUST BE LIGHT
   (titlebar, color_primary, color_alternate, footer)
   ══════════════════════════════════════════════════════ */

/* ── Footer — rich dark brown ── */
.l-footer {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.l-footer h1,
.l-footer h2,
.l-footer h3,
.l-footer h4,
.l-footer h5,
.l-footer h6,
.l-footer .w-text-h,
.l-footer .widget-title {
    color: var(--dark-text) !important;
}

.l-footer p,
.l-footer li,
.l-footer span,
.l-footer div {
    color: var(--dark-text) !important;
}

.l-footer a,
.l-footer a span {
    color: var(--accent-light) !important;
    transition: color 0.2s ease !important;
}

.l-footer a:hover,
.l-footer a:hover span {
    color: var(--dark-link-hover) !important;
}

/* ── Subfooter ── */
.l-subfooter,
.l-subfooter p,
.l-subfooter span,
.l-subfooter div,
.l-subfooter a {
    color: var(--dark-text) !important;
}

/* ══════════════════════════════════════════════════════
   TITLEBAR / PAGE BANNER (dark sections on sub-pages)
   ══════════════════════════════════════════════════════ */
.l-section.color_primary {
    color: var(--dark-text) !important;
}

/* Headings inside dark sections */
.l-section.color_primary h1,
.l-section.color_primary h2,
.l-section.color_primary h3,
.l-section.color_primary h4,
.l-section.color_primary h5,
.l-section.color_primary h6,
.l-section.color_primary .w-text-h {
    color: var(--dark-text) !important;
}

/* Body text inside dark sections */
.l-section.color_primary p,
.l-section.color_primary li,
.l-section.color_primary span,
.l-section.color_primary div {
    color: var(--dark-text) !important;
}

/* Links inside dark sections */
.l-section.color_primary a,
.l-section.color_primary a span {
    color: var(--accent-light) !important;
}

.l-section.color_primary a:hover {
    color: var(--dark-link-hover) !important;
}

/* Breadcrumbs in dark sections */
.l-section.color_primary .w-breadcrumbs,
.l-section.color_primary .w-breadcrumbs span,
.l-section.color_primary .w-breadcrumbs a {
    color: var(--accent-light) !important;
}

/* Buttons inside dark sections — keep brand fill + white text */
.l-section.color_primary .w-btn,
.l-section.color_primary .w-btn .w-btn-label {
    color: #FFFFFF !important;
    background-color: var(--accent-primary) !important;
    background-image: none !important;
    border-color: var(--accent-light) !important;
}

/* ══════════════════════════════════════════════════════
   ALT-CONTENT SECTIONS (another dark variant)
   ══════════════════════════════════════════════════════ */
[class*="color_alt-content"] h1,
[class*="color_alt-content"] h2,
[class*="color_alt-content"] h3,
[class*="color_alt-content"] h4,
[class*="color_alt-content"] .w-text-h {
    color: var(--dark-text) !important;
}

[class*="color_alt-content"] p,
[class*="color_alt-content"] span,
[class*="color_alt-content"] div,
[class*="color_alt-content"] li {
    color: var(--dark-text) !important;
}

[class*="color_alt-content"] a {
    color: var(--accent-light) !important;
}

[class*="color_alt-content"] a:hover {
    color: var(--dark-link-hover) !important;
}

/* ══════════════════════════════════════════════════════
   FOOTER-BOTTOM SECTIONS (footer pattern used in sub-pages)
   ══════════════════════════════════════════════════════ */
.color_footer-bottom,
.color_footer-bottom h1,
.color_footer-bottom h2,
.color_footer-bottom h3,
.color_footer-bottom h4,
.color_footer-bottom h5,
.color_footer-bottom h6,
.color_footer-bottom .w-text-h {
    color: var(--dark-text) !important;
}

.color_footer-bottom p,
.color_footer-bottom li,
.color_footer-bottom span,
.color_footer-bottom div {
    color: var(--dark-text) !important;
}

.color_footer-bottom a,
.color_footer-bottom a span,
.color_footer-bottom a .w-text-value {
    color: var(--accent-light) !important;
}

.color_footer-bottom a:hover,
.color_footer-bottom a:hover span {
    color: var(--dark-link-hover) !important;
}

.color_footer-bottom .w-btn,
.color_footer-bottom .w-btn .w-btn-label {
    color: #FFFFFF !important;
    background-color: var(--accent-primary) !important;
    background-image: none !important;
    border-color: var(--accent-light) !important;
}

/* ══════════════════════════════════════════════════════
   OVERLAY SECTIONS (titlebar with l-section-overlay)
   Catches sections that use overlay bg without color_ class
   ══════════════════════════════════════════════════════ */
.l-section>.l-section-overlay~.l-section-h h1,
.l-section>.l-section-overlay~.l-section-h h2,
.l-section>.l-section-overlay~.l-section-h h3,
.l-section>.l-section-overlay~.l-section-h .w-text-h {
    color: var(--dark-text) !important;
}

.l-section>.l-section-overlay~.l-section-h p,
.l-section>.l-section-overlay~.l-section-h span,
.l-section>.l-section-overlay~.l-section-h div {
    color: var(--dark-text) !important;
}

.l-section>.l-section-overlay~.l-section-h a,
.l-section>.l-section-overlay~.l-section-h a span {
    color: var(--accent-light) !important;
}

.l-section>.l-section-overlay~.l-section-h .g-breadcrumbs,
.l-section>.l-section-overlay~.l-section-h .g-breadcrumbs span,
.l-section>.l-section-overlay~.l-section-h .g-breadcrumbs a {
    color: var(--accent-light) !important;
}

/* ══════════════════════════════════════════════════════
   STORY SECTION ("Lezzetlerimize sevgi kattık…")
   This section has dark bg via --color-alt-content-bg-alt
   but no color_primary class, so needs explicit rules.
   ══════════════════════════════════════════════════════ */
.us_custom_5fb9c346 h1,
.us_custom_5fb9c346 h2,
.us_custom_5fb9c346 h3,
.us_custom_5fb9c346 h4,
.us_custom_5fb9c346 .w-text-h {
    color: #FFFFFF !important;
}

.us_custom_5fb9c346 p,
.us_custom_5fb9c346 span,
.us_custom_5fb9c346 div,
.us_custom_5fb9c346 li,
.us_custom_5fb9c346 strong {
    color: rgba(255, 255, 255, 0.92) !important;
}

.us_custom_5fb9c346 a,
.us_custom_5fb9c346 a span {
    color: var(--accent-light) !important;
}

.us_custom_5fb9c346 .w-btn,
.us_custom_5fb9c346 .w-btn .w-btn-label {
    color: #FFFFFF !important;
}

/* ── Nav menu hover ── */
.w-nav-anchor:hover .w-nav-title {
    color: var(--accent-primary) !important;
}

/* ── Form inputs ── */
input,
textarea,
select {
    border-color: var(--border-medium) !important;
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    transition: border-color 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--overlay-15) !important;
}

/* ══════════════════════════════════════════════════════
   MOBILE SPECIFIC FIXES (Menu & Readability)
   ══════════════════════════════════════════════════════ */

/* Force menu close icon opacity for visibility */
.w-nav-close {
    opacity: 1 !important;
    background-color: var(--bg-surface) !important;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

/* Prevent mobile menu from sliding in instead of fading */
.w-nav.m_effect_fade>.w-nav-list.level_1 {
    transform: none !important;
    /* Forces no slide effect */
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Fix "Konseptimiz" readability on mobile due to thin font */
@media (max-width: 768px) {

    .us_custom_49ef08cd p,
    .us_custom_49ef08cd span {
        font-weight: 500 !important;
        color: var(--text-primary) !important;
    }
}

/* ══════════════════════════════════════════════════════
   MISSING INLINE CSS FIXES (For Breadcrumbs & Titles)
   ══════════════════════════════════════════════════════ */
.us_custom_bddc4a52 {
    margin-bottom: 10px !important;
    animation-name: aft !important;
}

.us_custom_84ad589f {
    color: var(--color-alt-content-secondary) !important;
    animation-name: afb !important;
    animation-delay: 0.5s !important;
}

/* Base animation definitions to ensure visibility */
.us_animate_this {
    opacity: 1 !important;
    animation-fill-mode: both;
}

@keyframes aft {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes afb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}