/*
Theme: Yama Ahmadi Pro
File: assets/css/main.css
Version: 7.2.1

=========================================================
GLOBAL FOUNDATION ONLY
=========================================================

THIS FILE CONTROLS ONLY:

- Browser/document reset
- WordPress wrapper safety
- Full-width page-content safety
- Media/embed safety
- Flex/grid overflow protection
- Gutenberg compatibility
- Tables
- Accessibility
- Blog/archive layout
- Single article layout
- Print

HEADER:
Controlled by header.php

FOOTER:
Controlled by footer.php

CHATBOT:
Controlled by blue-chat.css

INDIVIDUAL WORDPRESS PAGES:
Controlled by HTML/CSS inside each WordPress page.

IMPORTANT:
Do not put Services, About, Contact, Devis,
Solutions or homepage section styling here.
=========================================================
*/


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --ya-global-text: #243f3d;
    --ya-global-heading: #071b24;
    --ya-global-muted: #667b79;
    --ya-global-line: #dbe9e6;
    --ya-global-bg: #ffffff;
    --ya-global-soft-bg: #f7fbfa;
    --ya-global-teal: #006e67;
    --ya-global-dark: #002f2c;

    --ya-global-shell: min(
        1220px,
        calc(100% - 48px)
    );
}


/* =========================================================
   DOCUMENT RESET
========================================================= */

html {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


body {
    width: 100%;
    max-width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    color: var(--ya-global-text);
    background: var(--ya-global-bg);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   GLOBAL LAYOUT SAFETY
========================================================= */

main,
section,
article,
aside,
header,
footer,
nav,
div,
figure,
form {
    min-width: 0;
}


main {
    display: block;
}


#main-content {
    position: relative;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   PAGE CONTENT WRAPPERS

   IMPORTANT:
   These wrappers deliberately add NO:
   - max-width
   - horizontal padding
   - background
   - typography
   - section spacing
========================================================= */

.ya-page-content,
.ya-home-content,
.ya-single-content,
.ya-article-content {
    position: relative;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
    overflow-y: visible;
}


.ya-page-content > *,
.ya-home-content > *,
.ya-single-content > *,
.ya-article-content > * {
    min-width: 0;
    max-width: 100%;
}


/* =========================================================
   IMPORTANT:
   CUSTOM PAGE SECTIONS KEEP THEIR OWN DESIGN
========================================================= */

/*
Never add rules here such as:

.ya-services-*
.ya-contact-*
.ya-devis-*
.ya-process-*
.ya-tech-*
.ya-final-*
.ya-why-*
.ya-areas-*
.ya-home-hero
.ya-service-card
.ya-btn

Those belong inside the individual WordPress pages.
*/


/* =========================================================
   FLEX / GRID OVERFLOW PROTECTION
========================================================= */

.ya-page-content [class*="grid"],
.ya-page-content [class*="wrap"],
.ya-page-content [class*="container"],
.ya-home-content [class*="grid"],
.ya-home-content [class*="wrap"],
.ya-home-content [class*="container"] {
    min-width: 0;
}


.ya-page-content [class*="grid"] > *,
.ya-home-content [class*="grid"] > * {
    min-width: 0;
}


/* =========================================================
   MEDIA SAFETY
========================================================= */

img,
svg,
video,
canvas,
iframe,
picture {
    max-width: 100%;
}


img,
video,
picture {
    height: auto;
}


img {
    vertical-align: middle;
}


video {
    object-fit: cover;
}


iframe {
    border: 0;
}


/* =========================================================
   FORM BASELINE
========================================================= */

button,
input,
select,
textarea {
    max-width: 100%;

    font: inherit;
}


input,
select,
textarea {
    min-width: 0;
}


textarea {
    resize: vertical;
}


/* =========================================================
   TOUCH SAFETY
========================================================= */

a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}


a,
button {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   LINKS
========================================================= */

a {
    color: inherit;
}


/* =========================================================
   WORDPRESS / GUTENBERG FOUNDATION
========================================================= */

.entry-content,
.wp-site-blocks,
.wp-block-post-content,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-html {
    min-width: 0;
    max-width: 100%;
}


/* =========================================================
   CUSTOM HTML BLOCKS

   Custom page HTML must be allowed to control itself.
========================================================= */

.ya-page-content > .wp-block-html,
.ya-home-content > .wp-block-html,
.ya-single-content > .wp-block-html,
.ya-article-content > .wp-block-html {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   WORDPRESS BLOCK SPACING SAFETY
========================================================= */

.ya-page-content > .wp-block-group,
.ya-home-content > .wp-block-group,
.ya-single-content > .wp-block-group,
.ya-article-content > .wp-block-group,
.ya-page-content > .wp-block-columns,
.ya-home-content > .wp-block-columns,
.ya-single-content > .wp-block-columns,
.ya-article-content > .wp-block-columns {
    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================================
   FULL WIDTH BLOCKS
========================================================= */

.ya-page-content .alignfull,
.ya-home-content .alignfull,
.ya-single-content .alignfull,
.ya-article-content .alignfull {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}


.ya-page-content .alignwide,
.ya-home-content .alignwide,
.ya-single-content .alignwide,
.ya-article-content .alignwide {
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   FIGURES
========================================================= */

figure,
.wp-block-image {
    max-width: 100%;

    margin-left: 0;
    margin-right: 0;
}


.wp-block-image img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   EMBEDS
========================================================= */

.wp-block-embed,
.wp-block-video,
.wp-block-audio {
    width: 100%;
    max-width: 100%;
}


.wp-block-embed iframe,
.wp-block-video video {
    max-width: 100%;
}


/* =========================================================
   TABLE SAFETY
========================================================= */

.ya-page-content table,
.ya-home-content table,
.ya-single-content table,
.ya-article-content table {
    width: 100%;
    max-width: 100%;

    border-collapse: collapse;
}


/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

@media (max-width: 782px) {

    html {
        scroll-padding-top: 46px;
    }
}


/* =========================================================
   SCREEN READER TEXT
========================================================= */

.screen-reader-text {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.screen-reader-text:focus {
    position: fixed !important;

    z-index: 2147483647;

    top: 12px;
    left: 12px;

    width: auto;
    height: auto;

    margin: 0;

    padding: 11px 15px;

    overflow: visible;

    clip: auto;

    white-space: normal;

    color: #002f2c;
    background: #ffffff;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, .22);
}


/* =========================================================
   BLOG / ARCHIVE
========================================================= */

.ya-blog-index,
.ya-blog-page {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    background: #ffffff;
}


/* =========================================================
   BLOG HERO
========================================================= */

.ya-inner-hero,
.ya-blog-hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(150px, 12vw, 180px)
        24px
        clamp(65px, 7vw, 90px);

    color: #ffffff;

    background:
        radial-gradient(
            circle at 17% 42%,
            rgba(0, 150, 140, .24),
            transparent 48%
        ),
        linear-gradient(
            110deg,
            #001522 0%,
            #001c2d 48%,
            #003d3a 100%
        );
}


.ya-inner-hero-small {
    min-height: 390px;
}


.ya-inner-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(120, 255, 244, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120, 255, 244, .045) 1px,
            transparent 1px
        );

    background-size: 46px 46px;
}


.ya-inner-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 45px;

    width: var(--ya-global-shell);
    max-width: 1220px;

    margin: 0 auto;
}


.ya-inner-hero h1 {
    max-width: 760px;

    margin:
        14px
        0
        18px !important;

    color: #ffffff !important;

    font-size: clamp(
        34px,
        4.7vw,
        54px
    );

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: -1px;
}


.ya-inner-hero p {
    max-width: 680px;

    margin: 0 !important;

    color:
        rgba(255, 255, 255, .82) !important;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   BLOG KICKER
========================================================= */

.ya-kicker {
    display: inline-flex;

    align-items: center;

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(120, 255, 244, .22);

    border-radius: 999px;

    color: #80fff3;

    background:
        rgba(255, 255, 255, .065);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =========================================================
   BLOG SYMBOL
========================================================= */

.ya-inner-symbol {
    display: grid;

    place-items: center;

    width: 110px;
    height: 110px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 28px;

    color: #7ff5e8;

    background:
        rgba(255, 255, 255, .06);

    font-size: 38px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   BLOG CONTENT SECTION
========================================================= */

.ya-blog-index .ya-section {
    padding:
        80px
        24px
        100px;

    background: #f7fbfa;
}


.ya-blog-index .ya-section > .ya-shell {
    width: var(--ya-global-shell);
    max-width: 1220px;

    margin: 0 auto;
}


/* =========================================================
   BLOG GRID
========================================================= */

.ya-post-grid,
.ya-blog-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 26px;
}


/* =========================================================
   BLOG CARD
========================================================= */

.ya-post-card,
.ya-blog-card {
    overflow: hidden;

    border:
        1px solid
        rgba(0, 47, 44, .10);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 20px 55px
        rgba(0, 35, 50, .07);

    transition:
        transform .32s ease,
        box-shadow .32s ease,
        border-color .32s ease;
}


.ya-post-card:hover,
.ya-blog-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(0, 47, 44, .23);

    box-shadow:
        0 30px 72px
        rgba(0, 47, 44, .14);
}


/* =========================================================
   BLOG IMAGE
========================================================= */

.ya-post-card > a {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #e8f3f1;
}


.ya-post-card > a img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}


.ya-post-card:hover > a img {
    transform: scale(1.04);
}


/* =========================================================
   BLOG CARD CONTENT
========================================================= */

.ya-post-card > div {
    padding: 24px;
}


.ya-post-card .ya-kicker {
    margin-bottom: 12px;

    padding: 0;

    border: 0;

    color: #00746d;

    background: transparent;

    letter-spacing: .7px;
}


.ya-post-card h2 {
    margin:
        0
        0
        13px !important;

    color: #071b24 !important;

    font-size: 21px;

    line-height: 1.28;

    font-weight: 900;
}


.ya-post-card h2 a {
    color: inherit !important;

    text-decoration: none !important;
}


.ya-post-card p {
    margin:
        0
        0
        18px !important;

    color: #5f6b6d !important;

    font-size: 14.5px;

    line-height: 1.7;
}


/* =========================================================
   BLOG TEXT LINK
========================================================= */

.ya-text-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #002f2c !important;

    font-size: 13.5px;

    font-weight: 900;

    text-decoration: none !important;
}


.ya-text-link i {
    transition:
        transform .22s ease;
}


.ya-text-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   BLOG PAGINATION
========================================================= */

.ya-pagination {
    margin-top: 48px;
}


.ya-pagination .nav-links {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;
}


.ya-pagination .page-numbers {
    display: grid;

    place-items: center;

    min-width: 42px;
    height: 42px;

    padding: 0 12px;

    border:
        1px solid
        rgba(0, 47, 44, .13);

    border-radius: 11px;

    color: #002f2c !important;

    background: #ffffff;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none !important;
}


.ya-pagination .page-numbers.current,
.ya-pagination .page-numbers:hover {
    color: #ffffff !important;

    border-color: #002f2c;

    background: #002f2c;
}


/* =========================================================
   SINGLE ARTICLE
========================================================= */

body.single .ya-single-content {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding:
        150px
        24px
        90px;

    background: #f7fbfa;
}


body.single .ya-single-article {
    width: min(
        900px,
        100%
    );

    margin: 0 auto;

    overflow: hidden;

    border:
        1px solid
        rgba(0, 47, 44, .08);

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 25px 70px
        rgba(0, 35, 50, .08);
}


body.single .ya-single-article-header {
    padding:
        46px
        48px
        30px;
}


body.single .ya-single-article-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;

    color: #607470;

    font-size: 13px;
}


body.single .ya-single-article-meta a {
    color: #006e67;

    text-decoration: none;
}


body.single .ya-single-article h1 {
    margin: 0 !important;

    color: #071b24 !important;

    font-size: clamp(
        34px,
        5vw,
        52px
    );

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: -1px;
}


body.single .ya-single-featured-image {
    width: 100%;

    margin: 0;
}


body.single .ya-single-featured-image img {
    display: block;

    width: 100%;
    height: auto;
}


body.single .ya-single-article-body {
    padding:
        38px
        48px
        54px;

    color: #344946;

    font-size: 17px;

    line-height: 1.8;
}


body.single .ya-single-article-body > *:first-child {
    margin-top: 0;
}


body.single .ya-single-article-body > *:last-child {
    margin-bottom: 0;
}


body.single .ya-single-article-body img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   BASIC FALLBACK
========================================================= */

.ya-basic-page {
    width: min(
        900px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    padding:
        150px
        0
        90px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    :root {
        --ya-global-shell: min(
            1220px,
            calc(100% - 40px)
        );
    }


    .ya-post-grid,
    .ya-blog-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .ya-inner-symbol {
        width: 90px;
        height: 90px;

        font-size: 31px;
    }


    body.single .ya-single-content {
        padding:
            130px
            20px
            75px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    :root {
        --ya-global-shell: min(
            1220px,
            calc(100% - 28px)
        );
    }


    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    #main-content,
    .ya-page-content,
    .ya-home-content,
    .ya-single-content,
    .ya-article-content {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin-left: 0;
        margin-right: 0;
    }


    /*
     * Do NOT force custom page grids to stack here.
     * Their own page CSS controls their mobile design.
     */


    .wp-block-columns,
    .wp-block-column {
        min-width: 0 !important;
    }


    .ya-page-content table,
    .ya-home-content table,
    .ya-single-content table,
    .ya-article-content table {
        display: block;

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .ya-inner-hero,
    .ya-blog-hero {
        padding:
            120px
            16px
            56px;
    }


    .ya-inner-hero-small {
        min-height: 330px;
    }


    .ya-inner-hero-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .ya-inner-symbol {
        display: none;
    }


    .ya-inner-hero h1 {
        font-size: 31px;
    }


    .ya-inner-hero p {
        font-size: 14.5px;
    }


    .ya-blog-index .ya-section {
        padding:
            58px
            14px
            75px;
    }


    .ya-post-grid,
    .ya-blog-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .ya-post-card > div {
        padding: 20px;
    }


    body.single .ya-single-content {
        padding:
            110px
            14px
            60px;
    }


    body.single .ya-single-article {
        border-radius: 20px;
    }


    body.single .ya-single-article-header {
        padding:
            30px
            22px
            24px;
    }


    body.single .ya-single-article h1 {
        font-size: 32px;
    }


    body.single .ya-single-article-body {
        padding:
            28px
            22px
            38px;

        font-size: 16px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    :root {
        --ya-global-shell: min(
            1220px,
            calc(100% - 22px)
        );
    }


    .ya-inner-hero {
        padding-left: 12px;
        padding-right: 12px;
    }


    .ya-inner-hero h1 {
        font-size: 28px;
    }


    body.single .ya-single-content {
        padding-left: 10px;
        padding-right: 10px;
    }


    body.single .ya-single-article-header {
        padding:
            26px
            18px
            21px;
    }


    body.single .ya-single-article h1 {
        font-size: 28px;
    }


    body.single .ya-single-article-body {
        padding:
            24px
            18px
            32px;

        font-size: 15.5px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {
    outline:
        3px solid
        #67d9cd;

    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    .ya-blog-index *,
    .ya-blog-index *::before,
    .ya-blog-index *::after,
    .ya-single-content *,
    .ya-single-content *::before,
    .ya-single-content *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}


/* =========================================================
   PRINT
========================================================= */

@media print {

    #ya-header,
    .ya-footer,
    .ya-chatbot,
    .ya-back-top,
    .ya-skip {
        display: none !important;
    }


    html,
    body {
        overflow: visible;

        color: #000000;
        background: #ffffff;
    }


    .ya-page-content,
    .ya-home-content,
    .ya-single-content,
    .ya-article-content {
        width: 100%;

        margin: 0;
        padding: 0;
    }


    body.single .ya-single-article {
        width: 100%;

        border: 0;
        box-shadow: none;
    }


    a {
        color: #000000;
    }
}

/* =========================================================
   FULL-WIDTH SITE SHELL — preserves page-owned hero designs.
   Keep header, footer and single-column block wrappers aligned.
========================================================= */

html,
body {
    max-width: 100%;
}

#ya-header,
.ya-footer,
#main-content {
    width: 100%;
    max-width: 100%;
}

body #ya-header .ya-header-shell,
body .ya-footer .ya-footer-shell {
    width: min(1540px, calc(100% - 48px)) !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:not(.wp-admin) :is(.ya-page-content, .ya-home-content, .ya-article-v4-body) > :is(.wp-block-columns, .wp-block-group),
body:not(.wp-admin) :is(.ya-page-content, .ya-home-content, .ya-article-v4-body) .wp-block-columns:has(> .wp-block-column:only-child),
body:not(.wp-admin) :is(.ya-page-content, .ya-home-content, .ya-article-v4-body) .wp-block-column:only-child {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    body #ya-header .ya-header-shell,
    body .ya-footer .ya-footer-shell {
        width: calc(100% - 30px) !important;
    }
}