/* ============================================================
   Darvio Theme — typography, color tokens, decorative helpers
   ============================================================ */

/* Web fonts — fallback faces for the body / numeric / script families and a
   safety net for Lyon & STIX (the licensed primaries declared below). */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@200;300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=El+Messiri:wght@400;500;600;700&family=Italianno&family=Pathway+Extreme:opsz,wght@8..144,400;8..144,500;8..144,600&family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

/* ════════════════════════════════════════════════════════════
   CUSTOM (licensed) FONTS — uploaded & active

   Arabic  →  public/themes/darvio/assets/fonts/lyon/
              lyon-light.otf    (weight 300)
              lyon-regular.otf  (weight 400)
              lyon-bold.otf     (weight 700)

   English →  public/themes/darvio/assets/fonts/stix/
              stix-regular.ttf  (variable, normal — weight 100–900)
              stix-italic.ttf   (variable, italic — weight 100–900)
   ════════════════════════════════════════════════════════════ */

/* ---- Lyon Arabic Display (Arabic locale) ---- */
@font-face {
    font-family: "Lyon Arabic Display";
    src: url("../fonts/lyon/lyon-light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lyon Arabic Display";
    src: url("../fonts/lyon/lyon-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lyon Arabic Display";
    src: url("../fonts/lyon/lyon-bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- STIX Two Text (English serif) — variable weight 100–900 ---- */
@font-face {
    font-family: "STIX Two Text";
    src: url("../fonts/stix/stix-regular.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "STIX Two Text";
    src: url("../fonts/stix/stix-italic.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --darvio-brand: #291612;
    --darvio-canvas: #c6bbae;
    --darvio-cream-from: #f8e7d8;
    --darvio-cream-to: #ffffff;
    --darvio-text-inverse: #ffffff;
    --darvio-text-inverse-secondary: #ebebeb;
    --darvio-text-soft: #f7f3e3;
    --darvio-overlay-dark: #083139;
    --darvio-border: #e5e1db;
}

/* --- Font utilities --------------------------------------- */
/* !important keeps the Darvio typography intact when a tenant has picked a
   global website_font (font-loader.blade.php emits a `body, h1, …` rule with
   !important that would otherwise force Almarai/Poppins onto everything). */

/* Arabic display → licensed "Lyon Arabic Display", El Messiri as fallback */
.darvio-font-arabic-display,
.font-darvio-ar {
    font-family: "Lyon Arabic Display", "El Messiri", "Tajawal", "Cairo", system-ui, sans-serif !important;
}
.darvio-font-latin-display {
    font-family: "Lyon Arabic Display", "Cormorant Garamond", "Times New Roman", serif !important;
}
/* English serif → licensed "STIX Two Text" (uploaded), Google STIX as fallback */
.darvio-font-serif,
.font-darvio-serif {
    font-family: "STIX Two Text", "Times New Roman", Georgia, serif !important;
}
.darvio-font-numeric,
.font-darvio-num {
    font-family: "Pathway Extreme", "Inter", system-ui, sans-serif !important;
    font-variation-settings: "wdth" 100;
}
.darvio-font-script,
.font-darvio-script {
    font-family: "Italianno", "Brush Script MT", cursive !important;
}
.darvio-font-body,
.font-darvio-body {
    font-family: "Alexandria", "Inter", system-ui, sans-serif !important;
}

/* --- Page-level canvas ----------------------------------- */
.darvio-page {
    background-color: var(--darvio-canvas);
    color: var(--darvio-brand);
    font-family: "Lyon Arabic Display", "El Messiri", "Alexandria", system-ui, sans-serif;
}

.darvio-page * {
    box-sizing: border-box;
}

/* --- Decorative gradients -------------------------------- */
.darvio-hero-bg-gradient {
    background-image: linear-gradient(
        270deg,
        var(--darvio-cream-from) 0%,
        var(--darvio-cream-to) 100%
    );
}

.darvio-card-shade {
    background-image: linear-gradient(
        to top,
        var(--darvio-brand) 15%,
        rgba(41, 22, 18, 0) 74.608%
    );
}

.darvio-pill-dark {
    background-image: linear-gradient(
        to right,
        rgba(41, 41, 41, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 100%
    );
}
.darvio-pill-button-light {
    background-image: linear-gradient(
        to right,
        rgba(41, 41, 41, 0.1) 0%,
        rgba(0, 0, 0, 0.1) 100%
    );
    color: #292929;
}
.darvio-pill-button-dark {
    background-image: linear-gradient(
        to right,
        rgba(41, 41, 41, 0.7) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
}
.darvio-badge-gradient {
    background-image: linear-gradient(
        109.246deg,
        #291612 29.77%,
        rgba(41, 22, 18, 0.7) 89.793%
    );
}

/* --- Hero specific --------------------------------------- */
.darvio-hero {
    position: relative;
    width: 100%;
    min-height: 900px;
    overflow: hidden;
}
.darvio-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.darvio-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Subtle film overlay so foreground text always reads */
.darvio-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(30, 16, 14, 0.25) 0%,
        rgba(30, 16, 14, 0) 32%,
        rgba(30, 16, 14, 0) 60%,
        rgba(30, 16, 14, 0.45) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* --- Identity / Intro section (pixel-perfect cqw canvas) -- */
/* Figma frame 6:155 "Intro Section" — 1440 × 851.
   The canvas uses container-query width units so every child can be
   positioned in cqw and scales pixel-perfectly at any viewport width.   */
.darvio-identity {
    position: relative;
    width: 100%;
    container-type: inline-size;
    aspect-ratio: 1440 / 851;
    background-color: #1e100e;
    overflow: hidden;
    isolation: isolate;
}
.darvio-identity__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.darvio-identity__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Figma node 6:158 — flat #1E100E fill, 0.88 opacity, multiply blend */
.darvio-identity__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: #1e100e;
    opacity: 0.88;
    mix-blend-mode: multiply;
}
/* Solid black band behind the 4-column identity grid (Figma node 6:159) */
.darvio-identity__band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #0c0704;
}
.darvio-identity__el {
    position: absolute;
    z-index: 3;
}

/* Mobile fallback — stacked, readable, no fixed aspect ratio */
.darvio-identity-mobile {
    background-color: #1e100e;
    color: #fff;
}

/* --- About section (pixel-perfect cqw canvas) ------------ */
/* Figma frame 89:443 "About Us" — 1440 × 900. */
.darvio-about {
    position: relative;
    width: 100%;
    container-type: inline-size;
    aspect-ratio: 1440 / 980;
    background-color: #fcf4ec;
    overflow: hidden;
}
.darvio-about__el {
    position: absolute;
    z-index: 3;
}
.darvio-about-mobile {
    background-color: #fcf4ec;
    color: var(--darvio-brand);
}

/* --- Vision & Mission section (pixel-perfect cqw canvas) - */
/* Figma rectangle 6:225 — 1440 × 781. */
.darvio-vision-mission {
    position: relative;
    width: 100%;
    container-type: inline-size;
    aspect-ratio: 1440 / 781;
    background-color: #1e100e;
    overflow: hidden;
}
.darvio-vision-mission__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.darvio-vision-mission__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}
.darvio-vision-mission__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.darvio-vision-mission__el {
    position: absolute;
    z-index: 3;
}
.darvio-vision-mission-mobile {
    background-color: #1e100e;
    color: #fff;
}

/* --- Services section (pixel-perfect cqw canvas) -------- */
/* Figma block 5 — left column 208:524 + right title/subtitle/image. 1440 × 760. */
.darvio-services {
    position: relative;
    width: 100%;
    container-type: inline-size;
    aspect-ratio: 1440 / 760;
    background-color: #c6bbae;
    overflow: hidden;
}
.darvio-services__el {
    position: absolute;
    z-index: 3;
}
.darvio-services-mobile {
    background-color: #c6bbae;
    color: var(--darvio-brand);
}

/* --- Projects sliders ----------------------------------- */
.darvio-project-slider {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge  */
    scroll-padding-inline: clamp(20px, calc((100vw - 1320px) / 2), 60px);
}
.darvio-project-slider::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

/* --- Logo slider (Sister Companies) --------------------- */
.darvio-logo-slider {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.darvio-logo-slider::-webkit-scrollbar {
    display: none;
}

/* --- Contact section (pixel-perfect cqw canvas) --------- */
/* Figma frame 166:127 "Frame 128" within 166:128 — 1320 × 476. */
.darvio-contact {
    position: relative;
    width: 100%;
    container-type: inline-size;
    aspect-ratio: 1320 / 476;
    background-color: #c6bbae;
}
.darvio-contact__el {
    position: absolute;
    z-index: 2;
}
.darvio-contact-mobile {
    background-color: #c6bbae;
    color: var(--darvio-brand);
}

/* --- Contact form (Figma 88:403–88:429) ------------------ */
/* Label = Lyon Arabic Display 22px regular, right-aligned, 6px gap to input. */
.darvio-contact-form label {
    display: block;
    margin-bottom: 6px;
    text-align: right;
    font-family: "Lyon Arabic Display", "El Messiri", "Tajawal", "Cairo", system-ui, sans-serif !important;
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: var(--darvio-brand);
}
/* Input/textarea = single 1px brand border, square corners, transparent fill. */
.darvio-field {
    width: 100%;
    /* !important on background overrides the Tailwind Forms reset rule
       (`[type="email"], textarea, …`) that ties on specificity but loads later. */
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--darvio-brand);
    border-radius: 0;
    padding: 11px 14px;
    font-family: "Lyon Arabic Display", "El Messiri", "Tajawal", "Cairo", system-ui, sans-serif !important;
    font-size: 16px;
    color: var(--darvio-brand);
    outline: none;
    transition: box-shadow 0.15s ease;
}
.darvio-field:focus {
    box-shadow: 0 0 0 2px rgba(41, 22, 18, 0.18);
}
textarea.darvio-field {
    resize: vertical;
    min-height: 171px;
    line-height: 1.6;
}
.darvio-field-error {
    display: block;
    margin-top: 4px;
    text-align: right;
    font-size: 12px;
    color: #b03a2e;
}
/* Submit pill = 238 × 44, sharp corners, brand fill, white text, centered. */
.darvio-submit {
    background: var(--darvio-brand);
    color: #fff;
    border: 1px solid var(--darvio-brand);
    border-radius: 0;
    width: 238px;
    height: 44px;
    padding: 0 24px;
    font-family: "Lyon Arabic Display", "El Messiri", "Tajawal", "Cairo", system-ui, sans-serif !important;
    font-size: 16px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.darvio-submit:hover {
    opacity: 0.9;
}
.darvio-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.darvio-project-card {
    scroll-snap-align: start;
}

/* --- Reusable section header tokens ---------------------- */
.darvio-h-display {
    font-family: "El Messiri", "Tajawal", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--darvio-brand);
}
.darvio-h-italic-en {
    font-family: "STIX Two Text", serif;
    font-style: italic;
    color: var(--darvio-brand);
}

/* --- Responsive scaling for the 1440-design grid --------- */
@media (max-width: 1440px) {
    .darvio-hero {
        min-height: 720px;
    }
}
@media (max-width: 1024px) {
    .darvio-hero {
        min-height: 620px;
    }
}
@media (max-width: 640px) {
    .darvio-hero {
        min-height: 520px;
    }
}

/* --- Location map: desktop ratio matches Figma (1320×462). On tablet/mobile
   the iframe is widened to a taller ratio so Google Maps tiles actually render. */
.darvio-location__map {
    aspect-ratio: 1320 / 462;
}
@media (max-width: 1024px) {
    .darvio-location__map {
        aspect-ratio: 16 / 9;
    }
}
@media (max-width: 640px) {
    .darvio-location__map {
        aspect-ratio: 343 / 462;
    }
}

/* --- Direction-aware container width --------------------- */
.darvio-container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 60px);
}

/* --- Reset bootstrap leaks for the theme ----------------- */
.darvio-page section,
.darvio-page main {
    position: relative;
}
.darvio-page p {
    margin-bottom: 0;
}