/*
  AITIVO Website Custom Styling
  Brand Palette: Navy Blue (#0A1B3D), Graphite Grey (#5A5F64), Cloud Grey (#F4F5F7), White (#FFFFFF)
  Typography: Space Grotesk (Headings), Inter (Body)

  Applied via wp_enqueue_style in solace_enqueue_aitivo_brand_styles() — see functions.php.
  Fonts (Space Grotesk & Inter) are enqueued separately as 'aitivo-google-fonts'.

  NOTE: This file is the corrected implementation of "AITIVO Brand Styles (2).css".
  All CSS property names, variable names, and class names have been normalised to
  valid CSS syntax (hyphens instead of spaces, "color" instead of "colour", etc.)
*/

/* ─── Brand CSS Custom Properties ─────────────────────────────────────────── */
:root {
    --aitivo-navy:        #0A1B3D;
    --aitivo-navy-rgb:    10, 27, 61;
    --aitivo-graphite:    #5A5F64;
    --aitivo-cloud:       #F4F5F7;
    --aitivo-white:       #FFFFFF;
    --aitivo-border-grey: #D3D3D3;

    --font-headings: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body:     'Inter',         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Base Typography Reset (Theme Overrides) ─────────────────────────────── */
body {
    font-family:             var(--font-body);
    color:                   var(--aitivo-graphite);
    line-height:             1.6;
    font-size:               16px;
    -webkit-font-smoothing:  antialiased;
}

h1, h2, h3, h4, h5, h6,
.aitivo h1, .aitivo h2, .aitivo h3, .aitivo h4 {
    font-family:  var(--font-headings);
    color:        var(--aitivo-navy);
    font-weight:  700;
    line-height:  1.25;
    margin-top:   0;
}

h1, .aitivo h1 {
    font-size:      2.8rem;
    letter-spacing: -0.02em;
}

h2, .aitivo h2 {
    font-size:      2rem;
    letter-spacing: -0.01em;
}

h3, .aitivo h3 {
    font-size:   1.5rem;
    font-weight: 600;
}

p {
    margin-bottom: 1.5rem;
}

/* ─── Brand Buttons ────────────────────────────────────────────────────────── */
.aitivo-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-body);
    font-weight:     600;
    font-size:       14px;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    padding:         14px 28px;
    border-radius:   0px; /* Sharp premium corners — matches AITIVO documentation */
    transition:      all 0.25s ease-in-out;
    text-decoration: none;
    cursor:          pointer;
    border:          2px solid transparent;
}

/* Primary Button — Solid Navy */
.aitivo-btn-primary {
    background-color: var(--aitivo-navy);
    color:            var(--aitivo-white) !important;
}

.aitivo-btn-primary:hover {
    background-color: var(--aitivo-graphite);
    color:            var(--aitivo-white) !important;
    transform:        translateY(-2px);
}

/* Secondary Button — Outline Navy */
.aitivo-btn-secondary {
    background-color: transparent;
    color:            var(--aitivo-navy) !important;
    border-color:     var(--aitivo-navy);
}

.aitivo-btn-secondary:hover {
    background-color: var(--aitivo-navy);
    color:            var(--aitivo-white) !important;
    transform:        translateY(-2px);
}

/* White Button — For Navy backgrounds */
.aitivo-btn-white {
    background-color: var(--aitivo-white);
    color:            var(--aitivo-navy) !important;
}

.aitivo-btn-white:hover {
    background-color: var(--aitivo-cloud);
    transform:        translateY(-2px);
}

/* ─── Feature / Service Cards ───────────────────────────────────────────────── */
.aitivo-card {
    background-color: var(--aitivo-white);
    border:           1px solid var(--aitivo-border-grey);
    border-radius:    0px;
    padding:          30px;
    transition:       all 0.3s ease;
}

.aitivo-card:hover {
    border-color: var(--aitivo-navy);
    box-shadow:   0 10px 30px rgba(var(--aitivo-navy-rgb), 0.05);
    transform:    translateY(-5px);
}

.aitivo-card .card-icon {
    color:         var(--aitivo-navy);
    margin-bottom: 20px;
    font-size:     24px;
}

/* ─── Regulatory / Trust Box (from AITIVO forms) ────────────────────────────── */
.aitivo-trust-box {
    background-color: var(--aitivo-cloud);
    border-left:      4px solid var(--aitivo-navy);
    border-top:       1px solid var(--aitivo-border-grey);
    border-right:     1px solid var(--aitivo-border-grey);
    border-bottom:    1px solid var(--aitivo-border-grey);
    padding:          24px 30px;
    margin:           30px 0;
}

.aitivo-trust-box h4 {
    font-size:      1.1rem;
    margin-bottom:  10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aitivo-trust-box p {
    font-size:     14px;
    color:         var(--aitivo-graphite);
    margin-bottom: 8px;
}

.aitivo-trust-box p:last-child {
    margin-bottom: 0;
}

/* ─── Background Utility Classes ────────────────────────────────────────────── */
.aitivo-bg-navy {
    background-color: var(--aitivo-navy);
    color:            var(--aitivo-white);
}

.aitivo-bg-navy h1,
.aitivo-bg-navy h2,
.aitivo-bg-navy h3,
.aitivo-bg-navy p {
    color: var(--aitivo-white);
}

.aitivo-bg-cloud {
    background-color: var(--aitivo-cloud);
}

/* ─── Header / Navigation Tweaks ────────────────────────────────────────────── */
.aitivo-nav-bar {
    border-bottom:    1px solid var(--aitivo-border-grey);
    background-color: var(--aitivo-white);
}

/* ─── Section Title Underline Style ─────────────────────────────────────────── */
.aitivo-section-title {
    position:      relative;
    padding-bottom: 15px;
    margin-bottom:  30px;
}

.aitivo-section-title::after {
    content:          '';
    position:         absolute;
    left:             0;
    bottom:           0;
    width:            50px;
    height:           3px;
    background-color: var(--aitivo-navy);
}

/* Centred variant: add class="aitivo-section-title center" to the element */
.aitivo-section-title.center::after {
    left:      50%;
    transform: translateX(-50%);
}

/* ─── Blog Category Badges ──────────────────────────────────────────────────── */
/* Default to navy */
.main-all .container-all .row1 .left .boxes .box-image .the-category {
    background-color: var(--aitivo-navy) !important;
}

/* Specific category colours using :has() selector */
.main-all .container-all .row1 .left .boxes .box-image .the-category:has(a[href*="voice-connectivity"]) {
    background-color: var(--aitivo-navy) !important;
}
.main-all .container-all .row1 .left .boxes .box-image .the-category:has(a[href*="managed-it-security"]) {
    background-color: var(--aitivo-graphite) !important;
}
.main-all .container-all .row1 .left .boxes .box-image .the-category:has(a[href*="cloud-ai"]) {
    background-color: #2C5282 !important; /* Mid Blue */
}
.main-all .container-all .row1 .left .boxes .box-image .the-category:has(a[href*="business-technology"]) {
    background-color: #C05621 !important; /* Rust/Orange */
}
.main-all .container-all .row1 .left .boxes .box-image .the-category:has(a[href*="popia-compliance"]) {
    background-color: #276749 !important; /* Dark Green */
}