/*
Theme Name: Explab Child
Theme URI: https://expert-themes.com/wp/explab
Author: Expert Themes
Author URI: https://themeforest.net/user/expert-themes
Template: explab
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: explab-child
Tags: responsive, retina, rtl-language-support, construction, architecture, custom-colors, live-editor
*/


/* ═══════════════════════════════════════════════════════════════════
   GRUNGE / HUMAN REBRAND LAYER  — ported from ittech-child to ExpLab.
   Palette vars (--mh-*, --dream-color-*) live in functions.php.
   Additive only; delete this block to revert to ExpLab defaults.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global surface: off-white "paper" + grain overlay ─────────────── */
body {
    background-color: var(--mh-bg) !important;
    color: var(--mh-ink);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typography: Bricolage display font on all headings ────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.exp-section-title, .exp-title, .exp-heading {
    font-family: "Bricolage Grotesque", "Nunito", sans-serif !important;
    letter-spacing: -0.01em;
}

/* Hand-drawn amber underline under section h2s (opt out: .mh-no-underline) */
.entry-content h2:not(.mh-no-underline),
.elementor-widget-heading h2.elementor-heading-title:not(.mh-no-underline) {
    display: inline-block;
    padding-bottom: 0.35em;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 Q 28 3 55 7 T 108 6' stroke='%23e09f3e' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Buttons: rounder, friendlier, "pop" on hover ─────────────────── */
.btn, button, input[type="submit"],
.elementor-button,
.exp-item--button, .exp-post--button,
.dtbtn, .exp-header-cta-btn,         /* header CTA */
.pricing-button a, a.pricing-button {/* pricing buttons (anchor only) */
    border-radius: 14px 12px 16px 11px !important;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
    box-shadow: 3px 3px 0 0 var(--dream-color-secondary) !important;
}
.btn:hover, button:hover, input[type="submit"]:hover,
.elementor-button:hover,
.exp-item--button:hover, .exp-post--button:hover,
.dtbtn:hover, .exp-header-cta-btn:hover,
.pricing-button a:hover, a.pricing-button:hover {
    transform: translate(-2px, -2px) rotate(-0.6deg) !important;
    box-shadow: 6px 6px 0 0 var(--dream-color-secondary) !important;
}

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

blockquote {
    background: var(--mh-paper);
    border-left: 6px solid var(--mh-accent) !important;
    border-radius: 4px 18px 18px 4px;
    transform: rotate(-0.4deg);
}

/* ── FIX: giant pricing-table icons (dreamit pricing widget) ───────── */
.pricing ul.features li svg,
.pricing .pricing-body li svg,
.pricing ul.features li .e-font-icon-svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto;
    fill: var(--dream-color-primary);
    margin-left: 10px;
}

/* ═══ EXPLAB NATIVE HEADER ═════════════════════════════════════════ */

/* Layout: logo left, menu + CTA pushed right, vertically centred */
#exp-header-default .d-flex { align-items: center; }
#exp-header-default .exp-header-menu { margin-left: auto; }
#exp-header-default .exp-header-branding img { max-height: 46px; width: auto; }

/* Menu links → Bricolage, sized to match (theme default runs larger) */
.exp-menu-primary > li > a,
.exp-menu-primary > li > a span {
    font-family: "Bricolage Grotesque", "Nunito", sans-serif !important;
    font-size: 15px !important;
    letter-spacing: 0;
    font-weight: 600;
}
.exp-menu-primary > li > a:hover span,
.exp-menu-primary > li.current-menu-item > a span {
    color: var(--dream-color-primary) !important;
}

/* CTA button: spacing + brand colour (shape/pop inherited from button rule) */
#exp-header-default .exp-header-cta { margin-left: 22px; }
.exp-header-cta-btn {
    display: inline-block;
    padding: 12px 22px;
    background: var(--dream-color-primary);
    color: #fff !important;
    font-family: "Bricolage Grotesque", "Nunito", sans-serif !important;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.exp-header-cta-btn:hover { color: #fff !important; }

@media (max-width: 1024px) {
    #exp-header-default .exp-header-cta { display: none; }  /* keep mobile bar clean */
}


/* ═══ OPT-IN UTILITY CLASSES (use in Elementor → Advanced → CSS Classes) ═══ */
.mh-mark {
    background-image: linear-gradient(105deg,
        rgba(224,159,62,0) 0%, rgba(224,159,62,.55) 6%,
        rgba(224,159,62,.55) 94%, rgba(224,159,62,0) 100%);
    padding: 0 .15em;
    border-radius: 2px;
}
.mh-card {
    position: relative;
    background: var(--mh-paper);
    padding: 2rem;
    border-radius: 6px;
    transform: rotate(-0.7deg);
    box-shadow: 6px 7px 18px rgba(38,48,58,.12);
}
.mh-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2.5px solid var(--mh-ink);
    border-radius: 8px;
    filter: url(#mh-rough);
    pointer-events: none;
}
.mh-card:nth-child(even) { transform: rotate(0.6deg); }
.mh-tape { position: relative; transform: rotate(-1deg); }
.mh-tape::before {
    content: "";
    position: absolute; top: -12px; left: 50%;
    width: 90px; height: 26px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(224,159,62,.45);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.mh-sticker {
    display: inline-block;
    background: var(--mh-paper);
    color: var(--mh-ink);
    padding: .5em 1em;
    border-radius: 999px;
    border: 2px solid var(--mh-ink);
    transform: rotate(-2deg);
    box-shadow: 3px 4px 0 rgba(38,48,58,.18);
    filter: url(#mh-rough);
}
.mh-rough-edge { filter: url(#mh-rough-strong); }
.mh-brush-divider {
    height: 26px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 120 4 200 24 340 14 C 480 4 560 26 720 15 C 880 5 980 24 1080 14 C 1140 9 1180 16 1200 13 L 1200 26 L 0 26 Z' fill='%233a6ea5'/%3E%3C/svg%3E");
}