/**
 * Modlino Design System — Layout
 * هدر، فوتر، sections مرتب
 */

/* ═══ HEADER ══════════════════════════════════════════════════ */

header.ct-header {
    background: var(--m-bg);
    border-bottom: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-xs);
}

[data-header*="type-1"] .ct-header [data-row*="middle"] {
    background: transparent;
    --height: var(--m-header-height);
    padding: 0;
}

header.ct-header [data-row="middle"] {
    position: relative;
}

header.ct-header [data-row="middle"] > .ct-container {
    max-width: var(--m-container-max);
    margin-inline: auto;
    padding-inline: var(--m-container-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-space-5);
    width: 100%;
    position: relative;
}

/* Logo */
.ct-header .site-title,
.ct-header [data-id="logo"] .site-title {
    color: var(--m-primary);
    font-weight: var(--m-weight-extrabold);
    font-size: var(--m-text-3xl);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Menu */
[data-header*="type-1"] .ct-header [data-id="menu"] {
    display: flex;
    justify-content: center;
}
[data-header*="type-1"] .ct-header [data-id="menu"] > ul {
    display: flex;
    gap: var(--m-space-1);
    direction: rtl;
    flex-wrap: nowrap;
}
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
    color: var(--m-text);
    font-weight: var(--m-weight-medium);
    font-size: var(--m-text-sm);
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 14px;
    border-radius: var(--m-radius-md);
    transition: background var(--m-duration-fast) var(--m-ease-standard),
                color var(--m-duration-fast) var(--m-ease-standard);
}
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:hover {
    color: var(--m-primary);
    background: var(--m-primary-soft);
}

/* Header icons (cart, account, search) */
.modlino-icons {
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: var(--m-container-gutter);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: var(--m-space-1);
    align-items: center;
    z-index: var(--m-z-raised);
}
.modlino-icons a {
    /* Inherit m-icon-btn behavior */
    width: 40px;
    height: 40px;
    border-radius: var(--m-radius-md);
    color: var(--m-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: background var(--m-duration-fast) var(--m-ease-standard),
                color var(--m-duration-fast) var(--m-ease-standard);
}
.modlino-icons a:hover {
    background: var(--m-primary-soft);
    color: var(--m-primary);
}
.modlino-icons svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.modlino-icons .cart-badge {
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--m-primary);
    color: var(--m-text-on-brand);
    border: 2px solid var(--m-bg);
    border-radius: var(--m-radius-full);
    font-size: 10px;
    font-weight: var(--m-weight-bold);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Breadcrumb */
.ct-breadcrumbs,
.woocommerce-breadcrumb {
    font-size: var(--m-text-sm);
    font-weight: var(--m-weight-medium);
    color: var(--m-text-muted);
    text-transform: none;
    letter-spacing: 0;
    padding: var(--m-space-4) 0;
}
.ct-breadcrumbs a,
.woocommerce-breadcrumb a {
    color: var(--m-text-muted);
}
.ct-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
    color: var(--m-primary);
}

/* ═══ FOOTER ══════════════════════════════════════════════════ */

[data-footer*="type-1"] .ct-footer {
    display: none;
}

.modlino-footer {
    background: var(--m-bg-subtle);
    border-top: 1px solid var(--m-border);
    padding: var(--m-space-12) 0 0;
    color: var(--m-text-muted);
    font-family: var(--m-font-sans);
}

.modlino-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: var(--m-space-10);
    max-width: var(--m-container-max);
    margin: 0 auto var(--m-space-8);
    padding: 0 var(--m-container-gutter);
}

@media (max-width: 999px) {
    .modlino-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--m-space-8); }
}
@media (max-width: 600px) {
    .modlino-footer-grid { grid-template-columns: 1fr; gap: var(--m-space-6); }
}

.modlino-footer-col h4 {
    color: var(--m-text-strong);
    font-size: var(--m-text-lg);
    font-weight: var(--m-weight-bold);
    margin: 0 0 var(--m-space-4);
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
}
.modlino-footer-col h4::before {
    content: "";
    width: 3px;
    height: 16px;
    background: var(--m-primary);
    border-radius: var(--m-radius-xs);
}
.modlino-footer-col a {
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
    color: var(--m-text-muted);
    text-decoration: none;
    font-size: var(--m-text-sm);
    margin-bottom: var(--m-space-2);
    transition: color var(--m-duration-fast) var(--m-ease-standard);
}
.modlino-footer-col a:hover { color: var(--m-primary); }
.modlino-footer-col a svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
    flex-shrink: 0;
}

.modlino-footer-about p {
    font-size: var(--m-text-sm);
    color: var(--m-text-muted);
    line-height: var(--m-leading-relaxed);
    margin: 0 0 var(--m-space-4);
}
.modlino-footer-logo {
    font-size: var(--m-text-3xl);
    font-weight: var(--m-weight-extrabold);
    color: var(--m-primary);
    margin-bottom: var(--m-space-3);
    display: block;
    letter-spacing: -0.02em;
}
.modlino-footer-social {
    display: flex;
    gap: var(--m-space-2);
}
.modlino-footer-social a {
    width: 40px;
    height: 40px;
    border-radius: var(--m-radius-md);
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: var(--m-text);
    transition: all var(--m-duration-normal) var(--m-ease-standard);
}
.modlino-footer-social a:hover {
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: var(--m-text-on-brand);
    transform: translateY(-2px);
}
.modlino-footer-social a svg { width: 18px; height: 18px; }

.modlino-footer-bottom {
    border-top: 1px solid var(--m-border);
    padding: var(--m-space-4) var(--m-container-gutter);
    max-width: var(--m-container-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--m-text-xs);
    color: var(--m-text-muted);
    flex-wrap: wrap;
    gap: var(--m-space-3);
}
.modlino-footer-bottom .badges {
    display: flex;
    gap: var(--m-space-3);
    align-items: center;
}
.modlino-footer-bottom .badge {
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-md);
    padding: 8px 14px;
    font-size: var(--m-text-xs);
    font-weight: var(--m-weight-semibold);
    color: var(--m-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-2);
}
.modlino-footer-bottom .badge svg {
    width: 14px; height: 14px;
    fill: var(--m-primary);
}

/* ═══ HERO SECTION (homepage) ════════════════════════════════ */

.modlino-hero {
    background: linear-gradient(135deg, var(--m-primary-soft) 0%, var(--m-bg) 70%);
    padding: var(--m-space-16) var(--m-container-gutter) var(--m-space-20);
    border-bottom: 1px solid var(--m-color-neutral-100);
}
.modlino-hero__inner {
    max-width: var(--m-container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-space-10);
    align-items: center;
}
.modlino-hero__text { position: relative; z-index: 2; }
.modlino-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.875rem);
    font-weight: var(--m-weight-extrabold);
    color: var(--m-text-strong);
    line-height: var(--m-leading-snug);
    margin: var(--m-space-4) 0 var(--m-space-3);
}
.modlino-hero h1 .accent { color: var(--m-primary); }
.modlino-hero p {
    font-size: var(--m-text-lg);
    color: var(--m-color-neutral-600);
    max-width: 540px;
    line-height: var(--m-leading-relaxed);
    margin: 0 0 var(--m-space-6);
}
.modlino-hero__actions {
    display: flex;
    gap: var(--m-space-3);
    flex-wrap: wrap;
}

@media (max-width: 999px) {
    .modlino-hero { padding: var(--m-space-10) var(--m-container-gutter); }
    .modlino-hero__inner { grid-template-columns: 1fr; gap: var(--m-space-6); }
    .modlino-hero__image { display: none; }
    .modlino-hero__actions { flex-direction: column; align-items: stretch; }
}


/* CRITICAL: constrain all SVGs in footer (markup uses hyphen-separated class names) */
.modlino-footer svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
    flex-shrink: 0;
}
.modlino-footer .modlino-footer-social svg {
    width: 18px !important;
    height: 18px !important;
}
.modlino-footer .modlino-footer-social a {
    width: 40px;
    height: 40px;
}
.modlino-footer-bottom .badge svg {
    width: 14px !important;
    height: 14px !important;
    fill: var(--m-primary);
}


/* ═══ HIDE Blocksy native header icons (we have our own) ═══ */
header.ct-header [data-id="cart"],
header.ct-header [data-id="account"],
header.ct-header [data-id="search"],
header.ct-header [data-id="trigger"]:not(.modlino-keep),
header.ct-header .ct-search-trigger,
header.ct-header .ct-cart-item,
header.ct-header > .ct-toggle-button,
header.ct-header .ct-header-cart {
    display: none !important;
}
/* Also hide on offcanvas-based elements */
[data-id="cart"]:not(.modlino-icons [data-id="cart"]) {
    display: none !important;
}

/* Make sure our icons are visible and well-positioned */
.modlino-icons {
    z-index: 100;
}

/* Logo must not be overlapped by icons - add right padding for menu */



/* === AGGRESSIVE: Hide ALL Blocksy header elements except logo and menu === */
header.ct-header [data-row="middle"] [data-id]:not([data-id="logo"]):not([data-id="menu"]) {
    display: none !important;
}
header.ct-header [data-row="middle"] .ct-header-search,
header.ct-header [data-row="middle"] .ct-header-cart,
header.ct-header [data-row="middle"] .ct-header-account,
header.ct-header [data-row="middle"] .ct-header-trigger,
header.ct-header [data-row="middle"] [class*="ct-header-"]:not([class*="logo"]):not([class*="menu"]) {
    display: none !important;
}

/* Also hide top & bottom rows entirely (we don't use them) */
header.ct-header [data-row="top"],
header.ct-header [data-row="bottom"] {
    display: none !important;
}


/* ═══ Header row: flex layout for logo + menu + icons ══════ */
header.ct-header [data-row="middle"] {
    display: flex !important;
    align-items: center !important;
    gap: var(--m-space-5);
    padding: 0 var(--m-container-gutter);
}
header.ct-header [data-row="middle"] > *:not(.modlino-icons) {
    /* Logo & menu wrappers keep their natural width */
    flex-shrink: 0;
}
header.ct-header [data-row="middle"] > .ct-container {
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
}
.modlino-icons {
    margin-inline-start: auto !important; /* RTL: visual left */
}


/* === Icons MUST be horizontal === */
.modlino-icons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    min-width: 132px;  /* 3 × 40 + 2 × gap-1 = 128px ~ */
}


/* === SCORCHED EARTH: Hide every Blocksy header element === */
header.ct-header .ct-header-search,
header.ct-header .ct-header-cart,
header.ct-header .ct-header-account,
header.ct-header .ct-header-trigger,
header.ct-header .ct-header-button,
header.ct-header .ct-header-text,
header.ct-header .ct-header-divider,
header.ct-header .ct-header-html,
header.ct-header .ct-header-socials,
header.ct-header .ct-toggle,
header.ct-header [class^="ct-header-"]:not([class*="logo"]):not([class*="menu"]):not(.ct-header):not(.ct-header-cart-fragment) {
    display: none !important;
}

/* Hide entire ct-container that doesn't contain logo or menu */
header.ct-header [data-row="middle"] > .ct-container:not(:has([data-id="logo"])):not(:has([data-id="menu"])):not(:has(.modlino-icons)) {
    display: none !important;
}


/* === Final force: icons row, no wrap === */
.modlino-icons,
header .modlino-icons,
header.ct-header .modlino-icons,
[data-row="middle"] .modlino-icons {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 144px !important;
    height: auto !important;
    overflow: visible !important;
    align-items: center !important;
    white-space: nowrap !important;
}
.modlino-icons > a {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* === Header content constrained to same width as footer === */
header.ct-header [data-row="middle"] {
    max-width: var(--m-container-max) !important;
    margin: 0 auto !important;
    width: 100% !important;
}
/* Background stays full width on the outer header element */
header.ct-header {
    background: #ffffff !important;
    width: 100% !important;
}