/* ═══════════════════════════════════════════
   Maeiah Child Theme – Global Styles
═══════════════════════════════════════════ */

/* ─── Astra Reset ─── */
#ast-desktop-header,
#ast-mobile-header,
.ast-site-header-wrap,
.ast-main-header-bar,
.main-header-bar,
.site-footer,
.ast-footer-overlay {
    display: none !important;
}

.ast-container,
.ast-grid-right-section,
.ast-grid-left-section {
    max-width: 100% !important;
    padding: 0 !important;
}

.site-content {
    margin: 0 !important;
    padding: 0 !important;
}

#primary,
#content,
.ast-article-single {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Tajawal', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-headline {
    font-family: 'Cairo', sans-serif;
}

/* ─── Glass Card ─── */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(188, 202, 188, 0.25);
}

/* ─── Minimalist Input ─── */
.minimalist-input,
.maeiah-cf7-wrapper .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
    border: 0 !important;
    border-bottom: 2px solid #e4e2e1 !important;
    background: transparent !important;
    padding: 12px 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease;
    width: 100%;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    color: #1b1c1c;
}

.minimalist-input:focus,
.maeiah-cf7-wrapper .wpcf7-form-control:focus:not([type="submit"]) {
    box-shadow: none !important;
    border-color: #18A558 !important;
}

/* ─── CF7 Wrapper Overrides ─── */
.maeiah-cf7-wrapper .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
}

.maeiah-cf7-wrapper .wpcf7-form p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.maeiah-cf7-wrapper .wpcf7-form p:nth-child(5),
.maeiah-cf7-wrapper .wpcf7-form p:nth-child(6) {
    grid-column: span 2;
}

.maeiah-cf7-wrapper .wpcf7-submit {
    background-color: #18A558;
    color: white;
    border: none;
    padding: 1rem 3rem;
    border-radius: 0.5rem;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.maeiah-cf7-wrapper .wpcf7-submit:hover {
    background-color: #0B6B3A;
}

.maeiah-cf7-wrapper .wpcf7-submit:active {
    transform: scale(0.97);
}

@media (max-width: 768px) {
    .maeiah-cf7-wrapper .wpcf7-form {
        grid-template-columns: 1fr;
    }
    .maeiah-cf7-wrapper .wpcf7-form p:nth-child(5),
    .maeiah-cf7-wrapper .wpcf7-form p:nth-child(6) {
        grid-column: span 1;
    }
}

/* ─── Reveal on Scroll ─── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children inside a revealed parent */
.reveal-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.reveal-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.reveal-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.reveal-on-scroll:nth-child(5) { transition-delay: 0.4s; }

/* ─── Ken Burns (About hero image) ─── */
@keyframes kenburns {
    0%   { transform: scale(1)    translateX(0); }
    100% { transform: scale(1.08) translateX(-12px); }
}

.ken-burns {
    animation: kenburns 12s ease-in-out infinite alternate;
}

/* ─── Mobile Menu ─── */
#maeiah-mobile-menu {
    display: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

#maeiah-mobile-menu.open {
    display: block;
    max-height: 600px;
    opacity: 1;
}

/* ─── Header scroll shadow ─── */
#maeiah-header.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* ─── Blog / Post Content ─── */
.maeiah-content {
    line-height: 1.8;
}

.maeiah-content h2,
.maeiah-content h3 {
    font-family: 'Cairo', sans-serif;
    color: #0B6B3A;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.maeiah-content a {
    color: #18A558;
    text-decoration: underline;
}

.maeiah-content blockquote {
    border-right: 4px solid #18A558;
    padding-right: 1.5rem;
    margin: 1.5rem 0;
    color: #3e4a3f;
    font-style: italic;
}

.maeiah-content img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.maeiah-content ul,
.maeiah-content ol {
    padding-right: 1.5rem;
}

/* ─── Pagination ─── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-links a,
.nav-links span.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.75rem;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.nav-links a {
    color: #3e4a3f;
    background-color: #f0eded;
}

.nav-links a:hover {
    background-color: #18A558;
    color: white;
}

.nav-links span.current {
    background-color: #18A558;
    color: white;
}

/* ─── Search Form ─── */
.search-form {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.search-field {
    border: 2px solid #bccabc;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    flex: 1;
    max-width: 400px;
    outline: none;
    transition: border-color 0.2s;
    direction: rtl;
}

.search-field:focus {
    border-color: #18A558;
}

.search-submit {
    background-color: #18A558;
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-submit:hover {
    background-color: #0B6B3A;
}

/* ─── Material Symbols fix ─── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* ═══════════════════════════════════════════
   Blog — pixel-perfect from blog.html
   ═══════════════════════════════════════════ */
.article-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.article-card:hover {
    transform: translateY(-8px);
}

/* line-clamp helpers (used in blog.html — Tailwind has these by default
   via @tailwindcss/typography, but defining inline keeps it bullet-proof
   if the plugin script load order changes) */
.maeiah-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.maeiah-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   CF7 Lead form — submit button (the [submit] tag
   doesn't accept Tailwind variant classes cleanly,
   so we style its rendered <input.wpcf7-submit>)
   ═══════════════════════════════════════════ */
.maeiah-cf7-wrapper .wpcf7-form-control.wpcf7-submit {
    background-color: #18A558 !important;
    color: #ffffff !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    padding: 16px 48px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(24, 165, 88, 0.25);
}
.maeiah-cf7-wrapper .wpcf7-form-control.wpcf7-submit:hover {
    background-color: #158f4c !important;
}
.maeiah-cf7-wrapper .wpcf7-form-control.wpcf7-submit:active {
    transform: scale(0.97);
}

/* Hide CF7's "Thank you" message after submit — we redirect to WhatsApp instead */
.maeiah-cf7-wrapper .wpcf7-response-output {
    border: 0 !important;
    background: #f4fbf6 !important;
    color: #0B6B3A !important;
    border-radius: 12px;
    padding: 16px !important;
    margin-top: 24px !important;
    font-family: 'Tajawal', sans-serif;
}

/* ═══════════════════════════════════════════
   Hide Astra's duplicate NAV-MENU chevron icons.
   Scoped to the header / nav menu only so we don't
   hide the back-to-top button's arrow or other
   Astra icons used elsewhere on the page.
   ═══════════════════════════════════════════ */
#maeiah-header .ast-icon.icon-arrow,
#maeiah-header .ast-arrow-svg,
#maeiah-header .ast-header-navigation-arrow,
#maeiah-header .menu-item .ast-icon,
#maeiah-header .dropdown-menu-toggle.ast-header-navigation-arrow,
nav.maeiah-nav .ast-icon.icon-arrow,
nav.maeiah-nav .ast-arrow-svg,
nav.maeiah-nav .ast-header-navigation-arrow,
nav.maeiah-nav .menu-item .ast-icon,
nav.maeiah-nav .dropdown-menu-toggle.ast-header-navigation-arrow {
    display: none !important;
}

/* ═══════════════════════════════════════════
   CF7 form sizing fixes
   - .wpcf7-form-control-wrap is <span> (display:inline) by default
     which makes inputs not stretch to their grid cell. Force block + 100%.
   - Style the native <select> with a proper RTL arrow + padding.
   ═══════════════════════════════════════════ */
.maeiah-cf7-wrapper .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}
.maeiah-cf7-wrapper input,
.maeiah-cf7-wrapper textarea,
.maeiah-cf7-wrapper select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.maeiah-cf7-wrapper select.wpcf7-form-control.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom arrow in green, positioned for RTL on the LEFT */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%2318A558' d='M3.5 5.5l4.5 5 4.5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: left 4px center !important;
    background-size: 16px !important;
    padding-left: 28px !important;
    cursor: pointer;
}
.maeiah-cf7-wrapper select.wpcf7-form-control.wpcf7-select:focus {
    border-color: #18A558 !important;
}
/* The CF7 form itself needs to behave as a block to fill its parent column */
.maeiah-cf7-wrapper .wpcf7 .wpcf7-form { display: block; width: 100%; }

/* ═══════════════════════════════════════════════════════════
   ASTRA COLOR PALETTE OVERRIDE
   Astra parent theme injects --ast-global-color-0/-1 as blue
   (#046bd2 / #045cb4) and uses them for every link, hover, and
   accent in its stylesheet. Since we stripped Astra's "Global
   Colors" customizer panel, we override the CSS variables here
   so every Astra rule inherits our green palette automatically.
═══════════════════════════════════════════════════════════ */
:root {
    --ast-global-color-0: #18A558 !important;  /* primary       */
    --ast-global-color-1: #0B6B3A !important;  /* primary-dark  */
    /* color-2..color-8 are text/surface neutrals — leave them */
}

/* Safety net: any bare anchor that bypasses Astra's vars
   (block-editor output, WP-core defaults, plugin CSS, etc.) */
a {
    color: #0B6B3A;
}
a:hover,
a:focus,
a:active {
    color: #18A558;
}

/* WordPress block-editor button preset — defaults to admin blue
   (#007cba). Map it to our green so any user-inserted block
   uses the brand color. */
.wp-element-button,
.wp-block-button__link {
    background-color: #18A558;
    color: #FFFFFF;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:focus,
.wp-block-button__link:focus {
    background-color: #0B6B3A;
    color: #FFFFFF;
}

/* Selection highlight — match brand instead of OS blue */
::selection {
    background-color: #DDF5E8;
    color: #0B6B3A;
}

/* Focus ring — keep accessible, but in brand color */
*:focus-visible {
    outline: 2px solid #18A558;
    outline-offset: 2px;
}