/* ============================================================================
   theme.css — Design-system / aesthetic refinement layer for Fartash Laser.
   Loaded LAST so it cascades over site.css + animations.css.
   Responsibility split:
     • animations.css/js  -> motion (reveal, hover-lift, shine, zoom, sticky)
     • theme.css          -> the elegant static look (color, depth, radius,
                             typography, buttons, cards, header, footer)
   RTL-aware. Composes with the motion layer (never redefines its :hover
   transforms). Neutral under prefers-reduced-motion.
   ========================================================================== */

:root {
    /* Brand */
    --c-primary: #03A9F4;
    --c-primary-600: #039be5;
    --c-primary-700: #0277bd;
    --c-accent: #00C853;
    --c-accent-600: #16b866;

    /* Ink & surfaces */
    --c-ink: #0b2147;          /* headings */
    --c-body: #54607a;         /* body copy */
    --c-muted: #8a93a6;
    --c-line: #e8edf4;
    --c-surface: #ffffff;
    --c-surface-2: #f4f8fc;

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #2bb6ff 0%, #0a86e0 55%, #2f6bed 100%);
    --grad-accent: linear-gradient(135deg, #2fd27a 0%, #00c853 100%);
    --grad-blue-band: linear-gradient(135deg, #2f6bed 0%, #1f49c7 100%);

    /* Radii */
    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    /* Elevation */
    --sh-sm: 0 2px 10px rgba(11, 33, 71, 0.06);
    --sh: 0 12px 30px rgba(11, 33, 71, 0.10);
    --sh-lg: 0 26px 60px rgba(11, 33, 71, 0.16);
    --sh-primary: 0 12px 26px rgba(3, 137, 229, 0.32);
    --sh-accent: 0 12px 26px rgba(0, 200, 83, 0.30);

    /* Motion */
    --t: 0.28s;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   1. Global polish
   --------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--c-primary);
    color: #fff;
}

body {
    color: var(--c-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Refined, accessible focus ring (keyboard only) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Tasteful scrollbar.
   Standard props (Firefox / Chrome 121+) are feature-detected; WebKit/Blink
   (Safari, Samsung, older Chrome) are covered by the ::-webkit-scrollbar rules. */
@supports (scrollbar-width: thin) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #c4cedd transparent;
    }
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
    background: #c4cedd;
    border: 3px solid #fff;
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }

/* ---------------------------------------------------------------------------
   2. Typography
   --------------------------------------------------------------------------- */
.works__title,
.portfolio__title,
.person-comments__title,
.newsletter__text,
.services-h1,
.faq__title,
.related__title,
.gallery-group__title {
    color: var(--c-ink);
    letter-spacing: -0.01em;
}

/* Eyebrow labels above section titles */
.works__text,
.portfolio__text {
    color: var(--c-primary-700);
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 0.82rem;
}

.services-h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   3. Buttons — unified premium treatment
   --------------------------------------------------------------------------- */
.header__link,
.header-content__link {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--grad-primary);
    background-size: 160% 160%;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--sh-primary);
    transition: transform var(--t) var(--ease),
                box-shadow var(--t) var(--ease),
                background-position var(--t) var(--ease),
                filter var(--t) var(--ease);
}

/* Keep label white despite the global `a:hover{color:black!important}` rule */
.header__link:hover,
.header-content__link:hover {
    color: #fff !important;
    transform: translateY(-2px);
    background-position: 100% 0;
    box-shadow: 0 18px 34px rgba(3, 137, 229, 0.42);
}

.header__link:active,
.header-content__link:active {
    transform: translateY(0) scale(0.98);
}

/* The hero's primary (first) CTA gets the green accent gradient */
.header-content__link:nth-child(1) {
    background: var(--grad-accent);
    box-shadow: var(--sh-accent);
}
.header-content__link:nth-child(1):hover {
    box-shadow: 0 18px 34px rgba(0, 200, 83, 0.40);
}

/* Footer call button: white, high-contrast on the blue band */
.call__btn {
    width: auto;
    min-width: 11rem;
    padding: 0.75rem 1.7rem;
    border: 0;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--c-primary-700);
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}
.call__btn:hover {
    color: var(--c-primary-700);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}
.call__btn:active {
    transform: translateY(0) scale(0.98);
}

/* ---------------------------------------------------------------------------
   4. Navigation links — animated underline (RTL: grows from the start edge)
   --------------------------------------------------------------------------- */
.menu__link {
    position: relative;
    color: var(--c-ink);
    font-weight: 600;
    transition: color var(--t) var(--ease);
}

.menu__link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.5rem;
    inset-inline-end: 0.5rem;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-primary);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--t) var(--ease);
}

/* Neutralize the old layout-shifting font-size hover from site.css */
.menu__link:hover {
    font-size: inherit !important;
    color: var(--c-primary-700) !important;
}
.menu__link:hover::after {
    transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
   5. Header & dropdown
   --------------------------------------------------------------------------- */
.header {
    border-bottom: 1px solid rgba(11, 33, 71, 0.06);
}

.dropdown__content {
    width: 200px;
    padding: 0.6rem;
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--c-line);
}

.dropdown:hover .dropdown__content {
    background-color: #fff;
}

.dropdown__content a {
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--c-ink);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

/* Replace the jumpy font-size hover from site.css with a smooth fill */
.dropdown__content__content:hover {
    font-size: inherit !important;
    color: var(--c-primary-700) !important;
    background-color: #eaf6ff;
}

/* ---------------------------------------------------------------------------
   6. Cards & containers
   --------------------------------------------------------------------------- */
.service-box {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: 1.8rem 1.7rem;
}

.service-box h2 {
    color: var(--c-ink);
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
    padding-inline-start: 0.85rem;
}
/* small gradient tick before each card heading (RTL start side) */
.service-box h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    border-radius: 4px;
    background: var(--grad-primary);
}

.service-box-gif {
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
}

.works-content__item {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: 1.6rem 1.2rem;
}

.works-content__title {
    color: var(--c-ink);
    font-weight: 700;
}

/* Testimonial / explanation cards */
.comment {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
}
.comment__info {
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-line);
}
.comment__person {
    color: var(--c-ink);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   7. Article hub cards (.flex-item) — refine + kill the layout-shift hovers
   --------------------------------------------------------------------------- */
.flex-item {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: 1.4rem;
    overflow: hidden;
}

/* site.css grows padding/font on hover (layout shift) — neutralize it */
.flex-item:hover {
    padding: 1.4rem !important;
    font-size: 1rem !important;
    color: inherit !important;
}

.felex-item-tag {
    color: var(--c-ink) !important;
    font-size: 1.45rem !important;
    font-weight: 700;
    line-height: 1.6;
    transition: color var(--t) var(--ease);
}
.felex-item-tag:hover,
.flex-item:hover .felex-item-tag {
    font-size: 1.45rem !important;
    color: var(--c-primary-700) !important;
}

.flex-item-description {
    color: var(--c-body);
}

/* ---------------------------------------------------------------------------
   8. Galleries — refined frame + soft hover overlay (zoom comes from anim layer)
   --------------------------------------------------------------------------- */
.portfolio__item {
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    position: relative;
}
.portfolio__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(11, 33, 71, 0.28), transparent 55%);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
    pointer-events: none;
}
.portfolio__item:hover::after {
    opacity: 1;
}

.works-img {
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
}

/* ---------------------------------------------------------------------------
   9. FAQ / breadcrumb / related / page-intro refinements
   --------------------------------------------------------------------------- */
.faq__item {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-sm);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq__item[open] {
    border-color: #bfe3fb;
    box-shadow: var(--sh-sm);
}
.faq__q { color: var(--c-ink); font-weight: 700; }

.related {
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem;
    box-shadow: var(--sh-sm);
}
.related__link {
    border: 1px solid var(--c-line);
    background: #fff;
    box-shadow: var(--sh-sm);
    font-weight: 600;
}
.related__link:hover {
    background: var(--grad-primary);
    border-color: transparent;
    color: #fff !important;
    box-shadow: var(--sh-primary);
    transform: translateY(-2px);
}

.page-intro {
    color: var(--c-body);
    font-size: 1.05rem;
}

.breadcrumb-link { font-weight: 600; }

.gallery-group__title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.6rem;
}
.gallery-group__title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 3rem;
    height: 3px;
    border-radius: 3px;
    background: var(--grad-primary);
}

/* ---------------------------------------------------------------------------
   10. Coloured bands (hero comments + footer) -> refined gradients
   --------------------------------------------------------------------------- */
.person-comments {
    background: var(--grad-blue-band);
}
.newsletter {
    background: var(--grad-blue-band);
}
.newsletter__text {
    color: #fff;
}
.call__link {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* size to content instead of site.css's fixed 30rem (which overflowed
       phones and wrapped the address); never exceed the container */
    width: auto;
    max-width: 100%;
    padding: 0.9rem 1.2rem;
    gap: 0.25rem 0.5rem;
}
.call__link br { display: none; }
.call__btn { white-space: nowrap; }
#address {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    white-space: nowrap;
}

.footer .copy-right {
    background: #0b1733;
    color: #9fb0d0;
}
.copy-right__text { color: #9fb0d0; }

/* ---------------------------------------------------------------------------
   11. Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .header__link,
    .header-content__link,
    .call__btn,
    .related__link,
    .menu__link::after,
    .portfolio__item::after {
        transition: none !important;
    }
    .header__link:hover,
    .header-content__link:hover,
    .call__btn:hover,
    .social__link,
    .social__link:hover,
    .related__link:hover { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   12. SEO/UI overhaul — button spacing, footer social, service icons,
       underline removal, image sizing. (Static look only; motion stays in
       animations.css. The shared .LaserCut-img is never touched globally.)
   --------------------------------------------------------------------------- */

/* 12.1 Comfortable icon <-> label spacing on every icon button (items 3, 32) */
.header__link,
.header-content__link,
.call__btn,
.dropdown__btn {
    gap: 0.6rem;
}
.header__link svg,
.header-content__link svg,
.call__btn svg,
.dropdown__btn svg {
    margin: 0;
}

/* 12.2 Footer social links (item 18) */
.social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 2.6rem;
}
.social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    color: #fff !important;
    font-size: 1.15rem;
    border: 0;
    box-shadow: var(--sh-sm);
    transition: transform var(--t) var(--ease), filter var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.social__link:hover {
    color: #fff !important;
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}
.social__link svg { width: 20px; height: 20px; }
/* Official Bale/Eitaa/Rubika logos are coloured marks — sit them on a white badge. */
.social__link img { width: 66%; height: 66%; object-fit: contain; }
/* Telegram/Instagram/WhatsApp keep their brand colour behind a white FA glyph. */
.social__link--telegram { background: #29a9eb; }
.social__link--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 92%); }
.social__link--whatsapp { background: #25d366; }
.social__link--bale { background: #fff; }
.social__link--rubika { background: #fff; }
.social__link--eitaa { background: #fff; }

/* 12.3 Remove the underlines beneath the "Our Services" headings (item 20) */
.works__title::after { content: none; }
.works-content__title a,
.works-content__title a:hover { text-decoration: none; }

/* 12.4 Homepage service grid: ~25% tighter horizontal gap, matching vertical gap.
   (Replaces the wider `justify-content: space-around` spread; gap drives both axes.) */
.works-content {
    justify-content: center;
    gap: 1.35rem;
}
.works-content__item {
    margin-bottom: 0;
}

/* Homepage service-card icons (items 4, 5) */
.works-content__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background: #eaf6ff;
    color: var(--c-primary-700);
}
.works-content__icon svg { width: 30px; height: 30px; }

/* 12.5 "Entrust your work" section — square icons instead of repeated logos (items 5, 22) */
.comment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: #eaf6ff;
    color: var(--c-primary-700);
    flex-shrink: 0;
}
.comment__icon svg { width: 24px; height: 24px; }
.companies__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin: 0.6rem 1rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    font-weight: 600;
}
.companies__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #fff;
}
.companies__icon svg { width: 32px; height: 32px; }

/* 12.6 De-stretch / equalize images & white photo backgrounds
        (items 19, 21, 25, 27, 28, 30) */
.header-content__img {
    width: 100%;
    height: clamp(200px, 30vw, 300px);
    object-fit: cover;
}
.works-img__img {
    height: clamp(220px, 28vw, 320px);
    object-fit: cover;
}
/* inline machine/article photos sit on white instead of the page tint */
.service-box-gif,
.service-box-gif img {
    background: #fff;
}
/* Articles hub: equal-height image on a white frame, no distortion.
   Subtle border makes the rounded corners read against the white card. */
.flex-container .flex-item img,
.flex-container .flex-item picture img {
    height: 340px;
    width: 100%;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 16px;
}

/* ---------------------------------------------------------------------------
   13. Mobile overflow fixes
       Anything wider than the phone viewport makes the whole page scroll
       sideways, which drags the fixed header (and its hamburger) off-screen.
       Every rule here only clamps widths; it never resizes a specific image.
   --------------------------------------------------------------------------- */

/* Belt and braces: never let stray overflow create a horizontal scrollbar
   (`clip` keeps the root from becoming a scroll container; `hidden` is the
   fallback for older engines). Fixed elements are unaffected. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Shared media class: keep its 600px cap but never wider than the container,
   and let height follow the aspect ratio instead of the HTML height attribute
   (which stretched the LaserCut hero GIF). Inline per-image styles still win. */
.LaserCut-img {
    max-width: min(600px, 100%);
    height: auto;
}

/* Explane pages: at <=768px .services-section becomes a grid; its 1fr tracks
   must be allowed to shrink below the intrinsic width of an inline-sized photo. */
.services-section > * {
    min-width: 0;
    max-width: 100%;
}
.service-box-gif img {
    max-width: 100%;
}

/* Tap-to-open state for the services submenu (toggled by site.js on touch /
   drawer layouts, where :hover can't be used). Mirrors the hover rule. */
.dropdown--open .dropdown__content {
    visibility: visible;
    opacity: 1;
    transform: translateY(2px);
    background-color: #fff;
}
.dropdown--open .dropdown__btn svg {
    transform: rotate(180deg);
}

/* Off-canvas drawer (<=768px, blue background): site.css paints the links
   white but §4's desktop ink colour was overriding it. */
@media only screen and (max-width: 768px) {
    .menu .menu__link,
    .menu .menu__link:hover {
        color: #fff !important;
    }

    /* Inside the drawer the submenu flows inline under "خدمات" (not floating)
       and only appears once tapped open. */
    .menu .dropdown__content {
        display: none;
        position: static;
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.4rem;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: none;
        text-align: inherit;
    }
    .menu .dropdown--open .dropdown__content,
    .menu .dropdown:hover .dropdown__content {
        display: block;
        background: rgba(255, 255, 255, 0.12);
    }
    .menu .dropdown__content a {
        color: #fff;
        font-size: 1rem;
        padding: 0.5rem 0.8rem;
        margin: 0;
    }
    .menu .dropdown__content a:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.15);
    }
    /* Drawer paints above the header's positioned "تماس با ما" button;
       the toggle stays on top so the ✕ is always tappable. */
    .menu {
        z-index: 10;
        overflow-y: auto;
    }
    .header__icon {
        position: relative;
        z-index: 11;
    }
}

@media only screen and (max-width: 576px) {
    /* Phones: every hero/inline photo simply fills the column. Overrides the
       per-image inline `width:auto; max-height:…` sizing that was tuned for
       desktop and made 400-600px-wide GIFs spill past the viewport. */
    .LaserCut-img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .service-box,
    .service-box-gif {
        margin-left: 0;
        margin-right: 0;
    }
    /* landing-page hero sits directly in <main>; give the full-width GIF a gutter */
    .services-section1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Footer address/phone box: stack, shrink, and stay inside the viewport */
    .newsletter {
        padding: 4rem 0;
    }
    .newsletter__text {
        font-size: 1.25rem;
    }
    .call__link {
        flex-direction: column;
        width: 100%;
        padding: 1rem;
    }
    .call__btn {
        margin: 0;
        min-width: 0;
        width: 100%;
        max-width: 16rem;
        font-size: 0.95rem;
    }
    #address {
        margin-top: 0.8rem;
        font-size: 0.92rem;
        white-space: normal;
        text-align: center;
        line-height: 1.8;
    }
}