/*
 Theme Name:   Hands Child
 Theme URI:    https://hands.sa
 Description:  Child theme for Al-Ayadi Al-Amila smart systems website
 Author:       Hands
 Author URI:   https://hands.sa
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hands-child
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    --navy-deep: #0f172a;
    --navy-corp: #0f2557;
    --blue-pro: #1a5298;
    --primary: #38bdf8;
    --slate-soft: #e2e8f0;
    --white-base: #fafbfc;
    --slate-dark: #1e293b;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--white-base);
    direction: rtl;
}

.blueprint-grid {
    background-image:
        linear-gradient(to right, rgba(226, 232, 240, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 4rem;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: 4rem;
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.rtl-hover-translate:hover {
    transform: translateX(-8px);
}

.glass-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Material Symbols Outlined icon fix for RTL pages */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   GLOBAL MODERN DESIGN IMPROVEMENTS
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better text rendering */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Premium card style */
.card-premium {
    background: #fff;
    border: 1px solid var(--slate-soft);
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card-premium:hover {
    box-shadow: 0 8px 40px rgba(15,37,87,.12);
    transform: translateY(-3px);
    border-color: rgba(56,189,248,.3);
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, var(--blue-pro) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section label badge */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.2);
    color: var(--blue-pro);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Button primary */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--navy-corp), var(--blue-pro));
    color: #fff;
    font-weight: 800;
    font-size: .875rem;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: opacity .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(15,37,87,.25);
    text-decoration: none;
}
.btn-primary:hover {
    opacity: .92;
    transform: translateX(-4px);
    box-shadow: 0 8px 30px rgba(26,82,152,.3);
}

/* Button secondary */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: var(--navy-deep);
    font-weight: 800;
    font-size: .875rem;
    border-radius: 14px;
    border: 1.5px solid var(--slate-soft);
    cursor: pointer;
    transition: border-color .2s, color .2s, transform .2s;
    text-decoration: none;
}
.btn-secondary:hover {
    border-color: var(--blue-pro);
    color: var(--blue-pro);
    transform: translateX(-4px);
}

/* Divider with glow */
.divider-glow {
    height: 1px;
    background: linear-gradient(to left, transparent, var(--primary), transparent);
    opacity: .4;
}

/* Header nav dropdown shadow */
.nav-dropdown {
    box-shadow: 0 20px 60px rgba(15,23,42,.15), 0 4px 16px rgba(15,23,42,.08);
}

/* Active nav indicator */
.nav-link.active {
    color: var(--navy-corp);
}
.nav-link.active::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    margin-top: 2px;
}

/* Responsive hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Shimmer loading animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.shimmer {
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
    background-size: 1000px 100%;
    animation: shimmer 2.5s infinite linear;
}

/* Stagger animation helper */
.stagger > * { opacity: 0; animation: fadeIn .6s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .1s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .2s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .3s; }

/* Stats number highlight */
.stat-number {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: var(--primary);
}

/* RTL-aware transitions */
[dir="rtl"] .rtl-hover-translate:hover { transform: translateX(-8px); }
[dir="rtl"] .btn-primary:hover         { transform: translateX(-4px); }
[dir="rtl"] .btn-secondary:hover       { transform: translateX(-4px); }

/* ============================================
   CUSTOM DESIGN-SYSTEM UTILITIES
   Resolves all custom class names used across
   page templates (non-standard Tailwind names).
   ============================================ */

/* ── Extended CSS variables ── */
:root {
    --accent:          #38bdf8;   /* = --primary  */
    --secondary:       #64748b;   /* slate-500    */
    --heading:         #0f172a;   /* = --navy-deep */
    --body-color:      #334155;   /* slate-700    */
    --soft-bg:         #f1f5f9;   /* slate-100    */
    --brand-sky:       #38bdf8;
    --brand-deep:      #0f172a;
    --brand-slate:     #1e293b;
    --brand-accent:    #38bdf8;
    --navy:            #0f172a;
    --navy-primary:    #0f2557;
    --navy-corporate:  #0f2557;
    --navy-brand:      #0f2557;
    --navy-muted:      #475569;   /* slate-600    */
    --v5-primary:      #38bdf8;
    --v5-accent:       #38bdf8;
    --v5-navy:         #0f2557;
    --v5-navy-deep:    #0f172a;
    --v5-blue:         #1a5298;
    --morgan-navy:     #0f172a;
    --navy-800:        #0f2040;
    --background-dark: #0f172a;
    --surface:         #ffffff;
    --border-color:    #e2e8f0;
}

/* ── Text color utilities ── */
.text-primary        { color: var(--primary) !important; }
.text-accent         { color: var(--accent) !important; }
.text-secondary      { color: var(--secondary) !important; }
.text-heading        { color: var(--heading) !important; }
.text-body           { color: var(--body-color) !important; }
.text-body-slate     { color: var(--body-color) !important; }
.text-navy           { color: var(--navy) !important; }
.text-navy-deep      { color: var(--navy-deep) !important; }
.text-navy-corp      { color: var(--navy-corp) !important; }
.text-navy-corporate { color: var(--navy-corporate) !important; }
.text-navy-primary   { color: var(--navy-primary) !important; }
.text-navy-muted     { color: var(--navy-muted) !important; }
.text-navy-v5        { color: var(--navy) !important; }
.text-navy-brand     { color: var(--navy) !important; }
.text-navy-800       { color: var(--navy-800) !important; }
.text-brand-sky      { color: var(--brand-sky) !important; }
.text-brand-dark     { color: var(--brand-deep) !important; }
.text-brand-slate    { color: var(--brand-slate) !important; }
.text-brand-accent   { color: var(--brand-accent) !important; }
.text-blue-pro       { color: var(--blue-pro) !important; }
.text-v5-primary     { color: var(--v5-primary) !important; }
.text-v5-accent      { color: var(--v5-accent) !important; }
.text-v5-navy        { color: var(--v5-navy) !important; }
.text-v5-navy-deep   { color: var(--v5-navy-deep) !important; }
.text-v5-blue        { color: var(--v5-blue) !important; }
.text-morgan-navy    { color: var(--morgan-navy) !important; }
.text-slate-custom   { color: #475569 !important; }

/* ── Background utilities ── */
.bg-primary          { background-color: var(--primary) !important; }
.bg-accent           { background-color: var(--accent) !important; }
.bg-secondary        { background-color: var(--secondary) !important; }
.bg-navy             { background-color: var(--navy) !important; }
.bg-navy-deep        { background-color: var(--navy-deep) !important; }
.bg-navy-corp        { background-color: var(--navy-corp) !important; }
.bg-navy-corporate   { background-color: var(--navy-corporate) !important; }
.bg-navy-primary     { background-color: var(--navy-primary) !important; }
.bg-navy-brand       { background-color: var(--navy-brand) !important; }
.bg-navy-v5          { background-color: var(--navy) !important; }
.bg-brand-sky        { background-color: var(--brand-sky) !important; }
.bg-brand-deep       { background-color: var(--brand-deep) !important; }
.bg-brand-slate      { background-color: var(--brand-slate) !important; }
.bg-brand-accent     { background-color: var(--brand-accent) !important; }
.bg-blue-pro         { background-color: var(--blue-pro) !important; }
.bg-v5-primary       { background-color: var(--v5-primary) !important; }
.bg-v5-accent        { background-color: var(--v5-accent) !important; }
.bg-soft-bg          { background-color: var(--soft-bg) !important; }
.bg-surface          { background-color: var(--surface) !important; }
.bg-background-dark  { background-color: var(--background-dark) !important; }
.bg-primary-navy     { background-color: var(--navy) !important; }

/* ── Border utilities ── */
.border-primary      { border-color: var(--primary) !important; }
.border-accent       { border-color: var(--accent) !important; }
.border-navy-corp    { border-color: var(--navy-corp) !important; }
.border-brand-sky    { border-color: var(--brand-sky) !important; }
.border-v5-accent    { border-color: var(--v5-accent) !important; }
.border-soft-bg      { border-color: var(--soft-bg) !important; }
.border-border-color { border-color: var(--border-color) !important; }
.border-blue-pro     { border-color: var(--blue-pro) !important; }

/* ── Contrast fix: ensure text is readable on custom backgrounds ── */
.bg-primary,
.bg-accent,
.bg-brand-sky,
.bg-v5-primary,
.bg-v5-accent,
.bg-brand-accent      { color: var(--navy-deep); }  /* dark text on light sky-blue */

.bg-navy,
.bg-navy-deep,
.bg-navy-corp,
.bg-navy-corporate,
.bg-navy-primary,
.bg-navy-brand,
.bg-navy-v5,
.bg-brand-deep,
.bg-brand-slate,
.bg-background-dark   { color: #fff; }              /* white text on dark navy bg  */

/* ── Interaction utilities ── */
.hover-rtl-shift      { transition: transform .25s ease; }
.hover-rtl-shift:hover{ transform: translateX(-4px); }
.interactive-element  { cursor: pointer; transition: all .2s ease; }

/* ============================================
   EXTENDED DESIGN-SYSTEM — Full variant map
   All remaining custom class names from every
   page template, resolved to design-token values.
   ============================================ */

/* ─── Additional text color utilities ─── */
.text-accent-blue           { color: #1a5298 !important; }
.text-deep-blue             { color: #1a5298 !important; }
.text-heading-dark          { color: #0f172a !important; }
.text-midblue               { color: #1a5298 !important; }
.text-morgan-accent         { color: #38bdf8 !important; }
.text-morgan-blue           { color: #1a5298 !important; }
.text-morgan-slate          { color: #64748b !important; }
.text-navy-500              { color: #64748b !important; }
.text-navy-900              { color: #0a0f1e !important; }
.text-navy-custom           { color: #0f2557 !important; }
.text-navy-dark             { color: #0f172a !important; }
.text-navy-darkest          { color: #060c16 !important; }
.text-neon-blue             { color: #38bdf8 !important; }
.text-primary-blue          { color: #2563eb !important; }
.text-primary-cyan          { color: #22d3ee !important; }
.text-primary-navy          { color: #0f2557 !important; }
.text-v5-blue-institutional { color: #1a5298 !important; }
.text-v5-border             { color: #e2e8f0 !important; }
.text-v5-dark               { color: #1e293b !important; }
.text-v5-gray               { color: #64748b !important; }
.text-v5-gray-blueprint     { color: #94a3b8 !important; }
.text-v5-navy-darker        { color: #0b1a3d !important; }
.text-v5-navy-muted         { color: #475569 !important; }
.text-v5-sky                { color: #38bdf8 !important; }
.text-v5-slate              { color: #64748b !important; }
.text-v5-slate-dark         { color: #1e293b !important; }
.text-v5-secondary          { color: #64748b !important; }
.text-b2b-blue              { color: #1a5298 !important; }
.text-b2b-navy              { color: #0f2557 !important; }
.text-b2b-sky               { color: #38bdf8 !important; }

/* ─── Additional background utilities ─── */
.bg-accent-blue             { background-color: #1a5298 !important; }
.bg-canvas-white            { background-color: #ffffff !important; }
.bg-card-white              { background-color: #ffffff !important; }
.bg-charcoal                { background-color: #1e293b !important; }
.bg-dark                    { background-color: #0f172a !important; }
.bg-dark-navy               { background-color: #0a0f1e !important; }
.bg-deep                    { background-color: #0f172a !important; }
.bg-deep-blue               { background-color: #1a5298 !important; }
.bg-engineering-blue        { background-color: #1a5298 !important; }
.bg-grid-white              { background-color: #ffffff !important; }
.bg-heading                 { background-color: #0f172a !important; }
.bg-ice-blue                { background-color: #bae6fd !important; }
.bg-infra-alert             { background-color: #f59e0b !important; }
.bg-interface-dark          { background-color: #0f172a !important; }
.bg-light                   { background-color: #f8fafc !important; }
.bg-light-gray              { background-color: #f1f5f9 !important; }
.bg-midblue                 { background-color: #1a5298 !important; }
.bg-morgan-accent           { background-color: #38bdf8 !important; }
.bg-morgan-blue             { background-color: #1a5298 !important; }
.bg-morgan-border           { background-color: #e2e8f0 !important; }
.bg-morgan-dark             { background-color: #0f172a !important; }
.bg-morgan-light            { background-color: #f1f5f9 !important; }
.bg-morgan-navy             { background-color: #0f172a !important; }
.bg-navy-800                { background-color: #0f2040 !important; }
.bg-navy-900                { background-color: #0a0f1e !important; }
.bg-navy-custom             { background-color: #0f2557 !important; }
.bg-navy-dark               { background-color: #0f172a !important; }
.bg-navy-darkest            { background-color: #060c16 !important; }
.bg-navy-muted              { background-color: #475569 !important; }
.bg-neon-blue               { background-color: #38bdf8 !important; }
.bg-neutral-soft            { background-color: #f1f5f9 !important; }
.bg-off-white               { background-color: #f8fafc !important; }
.bg-pearl                   { background-color: #f0f4f8 !important; }
.bg-pearl-gray              { background-color: #e8ecf0 !important; }
.bg-primary-blue            { background-color: #2563eb !important; }
.bg-primary-cyan            { background-color: #22d3ee !important; }
.bg-soft                    { background-color: #f1f5f9 !important; }
.bg-soft-white              { background-color: #f8fafc !important; }
.bg-surface-light           { background-color: #f8fafc !important; }
.bg-tech-dark               { background-color: #0f172a !important; }
.bg-bom                     { background-color: #0f2557 !important; }
.bg-v5-bg-light             { background-color: #f8fafc !important; }
.bg-bg-light                { background-color: #f8fafc !important; }
.bg-v5-blue                 { background-color: #2563eb !important; }
.bg-v5-blue-institutional   { background-color: #1a5298 !important; }
.bg-v5-border               { background-color: #e2e8f0 !important; }
.bg-v5-dark                 { background-color: #1e293b !important; }
.bg-v5-ghost                { background-color: rgba(255,255,255,0.05) !important; }
.bg-v5-gray                 { background-color: #f1f5f9 !important; }
.bg-v5-gray-blueprint       { background-color: #94a3b8 !important; }
.bg-v5-light                { background-color: #f8fafc !important; }
.bg-v5-navy-darker          { background-color: #0b1a3d !important; }
.bg-v5-navy-muted           { background-color: #475569 !important; }
.bg-v5-neutral-light        { background-color: #f8fafc !important; }
.bg-v5-secondary            { background-color: #64748b !important; }
.bg-v5-sky                  { background-color: #38bdf8 !important; }
.bg-v5-slate-card           { background-color: #1e293b !important; }
.bg-v5-slate-dark           { background-color: #1e293b !important; }
.bg-v5-space-blue           { background-color: #0d1b2a !important; }
.bg-b2b-blue                { background-color: #1a5298 !important; }
.bg-b2b-gray                { background-color: #64748b !important; }
.bg-b2b-navy                { background-color: #0f2557 !important; }
.bg-b2b-sky                 { background-color: #38bdf8 !important; }
.bg-b2b-soft                { background-color: #f1f5f9 !important; }

/* ─── Additional border utilities ─── */
.border-accent-blue         { border-color: #1a5298 !important; }
.border-engineering-blue    { border-color: #1a5298 !important; }
.border-heading             { border-color: #0f172a !important; }
.border-ice-blue            { border-color: #bae6fd !important; }
.border-midblue             { border-color: #1a5298 !important; }
.border-morgan-border       { border-color: #e2e8f0 !important; }
.border-navy                { border-color: #0f172a !important; }
.border-navy-800            { border-color: #0f2040 !important; }
.border-navy-deep           { border-color: #0f172a !important; }
.border-navy-muted          { border-color: #475569 !important; }
.border-navy-primary        { border-color: #0f2557 !important; }
.border-navy-v5             { border-color: #0f172a !important; }
.border-neon-blue           { border-color: #38bdf8 !important; }
.border-neutral-border      { border-color: #e2e8f0 !important; }
.border-pearl               { border-color: #f0f4f8 !important; }
.border-pearl-gray          { border-color: #e8ecf0 !important; }
.border-primary-blue        { border-color: #2563eb !important; }
.border-primary-cyan        { border-color: #22d3ee !important; }
.border-secondary           { border-color: #64748b !important; }
.border-v5-blue             { border-color: #2563eb !important; }
.border-v5-blue-institutional{ border-color: #1a5298 !important; }
.border-v5-border           { border-color: #e2e8f0 !important; }
.border-v5-gray             { border-color: #94a3b8 !important; }
.border-v5-gray-blueprint   { border-color: #94a3b8 !important; }
.border-v5-navy             { border-color: #0f2557 !important; }
.border-v5-primary          { border-color: #38bdf8 !important; }
.border-v5-sky              { border-color: #38bdf8 !important; }
.border-b2b-blue            { border-color: #1a5298 !important; }
.border-b2b-sky             { border-color: #38bdf8 !important; }
.border-bg-silver           { border-color: #cbd5e1 !important; }

/* ── Auto-contrast: white text on dark bg classes ── */
.bg-dark, .bg-dark-navy, .bg-deep, .bg-charcoal,
.bg-tech-dark, .bg-interface-dark, .bg-heading,
.bg-morgan-dark, .bg-morgan-navy, .bg-navy-dark,
.bg-navy-darkest, .bg-navy-800, .bg-navy-900,
.bg-navy-custom, .bg-navy-muted,
.bg-v5-dark, .bg-v5-slate-dark, .bg-v5-slate-card,
.bg-v5-space-blue, .bg-v5-navy-darker,
.bg-v5-navy-muted, .bg-v5-secondary,
.bg-b2b-navy, .bg-bom,
.bg-accent-blue, .bg-deep-blue, .bg-engineering-blue,
.bg-midblue, .bg-morgan-blue, .bg-primary-blue,
.bg-b2b-blue, .bg-v5-blue, .bg-v5-blue-institutional { color: #ffffff; }

/* ── Auto-contrast: dark text on light bg classes ── */
.bg-ice-blue, .bg-light, .bg-light-gray, .bg-neutral-soft,
.bg-off-white, .bg-pearl, .bg-pearl-gray, .bg-soft,
.bg-soft-white, .bg-canvas-white, .bg-card-white,
.bg-surface-light, .bg-morgan-light, .bg-morgan-border,
.bg-b2b-soft, .bg-b2b-gray,
.bg-v5-bg-light, .bg-bg-light, .bg-v5-light,
.bg-v5-gray, .bg-v5-neutral-light, .bg-v5-border,
.bg-neon-blue, .bg-primary-cyan, .bg-morgan-accent,
.bg-b2b-sky, .bg-v5-sky { color: #0f172a; }

/* ── Opacity alpha variants (used as bg-{color}/N) ── */
/* These are handled by Tailwind arbitrary values and inline styles,
   no additional classes needed. */

/* ============================================
   CONTRAST HARDENING
   Fix text-slate-400 used on white/light
   backgrounds in nav dropdowns & cards.
   ============================================ */

/* Header nav dropdowns: white bg → slate-400 is too light */
.nav-dropdown .text-slate-400,
#site-header [class*="bg-white"] .text-slate-400,
#site-header [class*="bg-slate-50"] .text-slate-400 {
    color: #475569 !important; /* slate-600 — 7:1 contrast on white */
}

/* Footer text on dark bg: slate-400 is fine, no override needed */
/* Body light sections: upgrade label/caption text if used as static text */
main section:not([class*="navy"]):not([class*="bg-[var(--navy"]):not([class*="bg-dark"]) > * .text-slate-400:not(.material-symbols-outlined) {
    color: #64748b !important; /* slate-500 — ~4.6:1 on white, WCAG AA for large text */
}

/* ============================================
   MOBILE CENTERING — Packages Pages & Footer
   Applied on screens below md breakpoint (< 768px)
   ============================================ */
@media (max-width: 767px) 

    /* ─────────────────────────────────────────
       FOOTER — center all stacked column content
    ───────────────────────────────────────── */

    /* Center text in every grid column once they stack */
    footer .grid > div {
        text-align: center;
    }

    /* Center the logo <a class="inline-block"> */
    footer .grid > div .inline-block {
        margin: 0 auto;
        
    }

    /* Let description paragraph fill full width centered */
    footer .grid > div .max-w-sm {
        max-width: 100%;
    }

    /* Center social-icons row */
    footer .grid > div .flex.gap-5 {
        justify-content: center;
    }

    /* Center contact list items that use flex layout */
    footer .grid > div ul li.flex {
        justify-content: center;
    }

    /* Bottom copyright bar text + links */
    footer .pt-12.border-t {
        text-align: center;
    }
    footer .pt-12.border-t .flex.gap-10 {
        justify-content: center;
    }

    /* ─────────────────────────────────────────
       ALL PACKAGES PAGE TEMPLATES
       WordPress adds body class: page-template-tpl-packages*
    ───────────────────────────────────────── */

    /* Center headings and paragraphs in the hero (first) section */
    [class*="page-template-tpl-packages"] main > section:first-of-type h1,
    [class*="page-template-tpl-packages"] main > section:first-of-type h2,
    [class*="page-template-tpl-packages"] main > section:first-of-type p {
        text-align: center !important;
    }

    /* Override .text-right used on advanced template's content div */
    [class*="page-template-tpl-packages"] main > section:first-of-type .text-right {
        text-align: center !important;
    }

    /* Center inline-flex badge / label pills */
    [class*="page-template-tpl-packages"] main > section:first-of-type .inline-flex.items-center {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        width: fit-content;
    }

    /* Remove right-border decoration (RTL design bar) on centered badges */
    [class*="page-template-tpl-packages"] main > section:first-of-type .inline-block[class*="border-r"] {
        border-right: none !important;
        padding-right: 0 !important;
        text-align: center !important;
        margin: 0 auto;
        display: block;
        width: fit-content;
    }

    /* Remove right-border on RTL-styled paragraphs */
    [class*="page-template-tpl-packages"] main > section:first-of-type p.border-r {
        border-right: none !important;
        padding-right: 0 !important;
    }

    /* Center CTA / button groups */
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-col.sm\:flex-row,
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-wrap.gap-4,
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-wrap.gap-5,
    [class*="page-template-tpl-packages"] main > section:first-of-type .flex.flex-wrap.gap-6 {
        justify-content: center !important;
        align-items: center !important;
    }

    /* Center max-width text containers horizontally */
    [class*="page-template-tpl-packages"] main > section:first-of-type .max-w-2xl,
    [class*="page-template-tpl-packages"] main > section:first-of-type .max-w-xl {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ─────────────────────────────────────────
       PACKAGES — FONT SIZE SCALE-DOWN ON MOBILE
       Reduces oversized text across all sections
       of every tpl-packages* page (footer excluded)
    ───────────────────────────────────────── */

    /* H1 hero headings */
    [class*="page-template-tpl-packages"] main h1 {
        font-size: 1.35rem !important;   /* ~22px — was 2xl/3xl/4xl */
        line-height: 1.3 !important;
    }

    /* Section headings h2 */
    [class*="page-template-tpl-packages"] main h2 {
        font-size: 1.15rem !important;   /* ~18px — was xl/2xl/3xl/4xl */
        line-height: 1.35 !important;
    }

    /* Sub-section headings h3 */
    [class*="page-template-tpl-packages"] main h3 {
        font-size: 1rem !important;      /* 16px — was 2xl */
        line-height: 1.4 !important;
    }

    /* Body / description paragraphs */
    [class*="page-template-tpl-packages"] main p {
        font-size: 0.9rem !important;    /* ~14px — was xl/lg */
        line-height: 1.7 !important;
    }

    /* Button text */
    [class*="page-template-tpl-packages"] main button,
    [class*="page-template-tpl-packages"] main a[class*="px-"] {
        font-size: 0.85rem !important;   /* 13-14px */
    }

    /* Small labels / badges / tracking-widest spans */
    [class*="page-template-tpl-packages"] main .text-sm,
    [class*="page-template-tpl-packages"] main .text-xs,
    [class*="page-template-tpl-packages"] main [class*="tracking-widest"] {
        font-size: 0.7rem !important;    /* ~11px */
    }

    /* Stat / metric numbers */
    [class*="page-template-tpl-packages"] main .stat-number,
    [class*="page-template-tpl-packages"] main [class*="text-4xl"],
    [class*="page-template-tpl-packages"] main [class*="text-5xl"],
    [class*="page-template-tpl-packages"] main [class*="text-6xl"] {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    /* Table cells in compare / BOQ pages */
    [class*="page-template-tpl-packages"] main td,
    [class*="page-template-tpl-packages"] main th {
        font-size: 0.78rem !important;
    }

    /* ─────────────────────────────────────────
       ALL BRANDS PAGE TEMPLATES
       WordPress adds body class: page-template-tpl-brands*
    ───────────────────────────────────────── */

    /* Stack 2-col hero grid to single column */
    [class*="page-template-tpl-brands"] main section:first-of-type .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Center hero text content */
    [class*="page-template-tpl-brands"] main section:first-of-type h1,
    [class*="page-template-tpl-brands"] main section:first-of-type h2,
    [class*="page-template-tpl-brands"] main section:first-of-type p {
        text-align: center !important;
    }

    /* Center inline-flex badge pill */
    [class*="page-template-tpl-brands"] main section:first-of-type .inline-flex.items-center {
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex;
        width: fit-content;
    }

    /* Center CTA button groups */
    [class*="page-template-tpl-brands"] main section:first-of-type .flex.flex-col.sm\:flex-row,
    [class*="page-template-tpl-brands"] main section:first-of-type .flex.gap-5,
    [class*="page-template-tpl-brands"] main section:first-of-type .flex.flex-wrap {
        justify-content: center !important;
        align-items: center !important;
    }

    /* Stack spec / certifications bar to wrap nicely */
    [class*="page-template-tpl-brands"] .bg-\[\#0f2557\].py-5 .flex {
        justify-content: center !important;
    }

    /* Horizontal scroll carousel: don't force centering on small screens */
    [class*="page-template-tpl-brands"] main .overflow-x-auto.flex {
        justify-content: flex-start !important;
    }

    /* Smart screens gallery — fit cards to mobile viewport */
    [class*="page-template-tpl-brands"] main .overflow-x-auto.flex > div[class*="min-w-"] {
        min-width: 82vw !important;
        padding: 1.5rem !important;
    }

    /* Scale down device mockups inside gallery cards */
    [class*="page-template-tpl-brands"] main .overflow-x-auto .museum-pedestal {
        padding: 1.5rem !important;
    }

    /* Shrink the phone/tablet mockup devices */
    [class*="page-template-tpl-brands"] main .overflow-x-auto .w-64.h-80,
    [class*="page-template-tpl-brands"] main .overflow-x-auto .w-64.h-64 {
        width: 10rem !important;
        height: auto !important;
        min-height: 13rem !important;
    }

    /* Shrink thermostat image area inside mockup */
    [class*="page-template-tpl-brands"] main .overflow-x-auto .w-full.h-32 {
        height: 5rem !important;
    }

    /* Prevent px-6 section padding from causing overflow */
    [class*="page-template-tpl-brands"] main .overflow-x-auto {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        gap: 1rem !important;
    }

    /* ─────────────────────────────────────────
       BRANDS — FONT SIZE SCALE-DOWN ON MOBILE
    ───────────────────────────────────────── */

    [class*="page-template-tpl-brands"] main h1 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }

    [class*="page-template-tpl-brands"] main h2 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    [class*="page-template-tpl-brands"] main h3,
    [class*="page-template-tpl-brands"] main h4 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    [class*="page-template-tpl-brands"] main h5,
    [class*="page-template-tpl-brands"] main h6 {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    [class*="page-template-tpl-brands"] main p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    [class*="page-template-tpl-brands"] main button,
    [class*="page-template-tpl-brands"] main a[class*="px-"] {
        font-size: 0.85rem !important;
    }

    [class*="page-template-tpl-brands"] main .text-sm,
    [class*="page-template-tpl-brands"] main .text-xs,
    [class*="page-template-tpl-brands"] main [class*="tracking-widest"] {
        font-size: 0.7rem !important;
    }

    [class*="page-template-tpl-brands"] main [class*="text-4xl"],
    [class*="page-template-tpl-brands"] main [class*="text-5xl"],
    [class*="page-template-tpl-brands"] main [class*="text-6xl"] {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    [class*="page-template-tpl-brands"] main td,
    [class*="page-template-tpl-brands"] main th {
        font-size: 0.78rem !important;
    }
}