/* #############################################################################
/* ####### AU TYPOGRAPHY [STARTS]
/* #############################################################################
/* ======================================
   TYPOGRAPHY SYSTEM — GLOBAL BASE
   ====================================== */

/* Root scale (desktop default) */
html {
  font-size: 17px; /* controls entire site scale */
}

body {
  background: #eeeeee;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 1rem;          /* = 17px */
  line-height: 1.75;
  color: #444;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ======================================
   MAIN CONTENT (ARTICLES / BLOG)
   ====================================== */

article,
article p,
article li,
article blockquote,
article table {
  font-size: 1rem;
  line-height: 1.8;
}

article p {
  margin-bottom: 1.1em;
}

/* ======================================
   HEADINGS
   ====================================== */

h1 {
  font-size: 2.4rem;
  line-height: 1.25;
}

h2 {
  font-size: 2rem;
  line-height: 1.3;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.3rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}

/* ======================================
   SIDEBAR & NAVIGATION
   ====================================== */

aside,
.aside-nav li a,
.top-nav li a {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ======================================
   MOBILE TYPOGRAPHY
   ====================================== */

@media (max-width: 768px) {

  html {
    font-size: 16px; /* slight reduction only */
  }

  body {
    line-height: 1.7;
  }

  article {
    font-size: 1rem;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.4rem; }
}


/* #############################################################################
/* ####### AU TYPOGRAPHY [ENDS ]
/* #############################################################################

/* ---------------------------------------------------- */
/* --- HERO-02 (Optimized Height + Fixed Z-index) ------ */
/* ---------------------------------------------------- */

/* Fix Responsee flex-row behavior so mobile wraps correctly */
.au-hero-section .margin {
    display: flex;
    flex-wrap: wrap !important;
}

/* Let desktop grid behave normally */
.au-hero-left,
.au-hero-right {
    flex: 0 0 auto;
}

/* --------------------- HERO WRAPPER ------------------- */

.au-hero-section {
    position: relative;
    z-index: 1;
    min-height: 480px;
    padding: 60px 0 70px 0;
    overflow: visible;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

/* Overlay */
.au-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 0;
}

/* Content above overlay */
.au-hero-section > .line {
    position: relative;
    z-index: 1;
}

/* --------------------- LEFT CONTENT ------------------- */

.au-hero-left {
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.au-hero-left h1 {
    font-size: 3.8rem;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff !important;
}

.au-hero-left h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #e2e2e2 !important;
}

.au-hero-left p {
    font-size: 1.15rem;
    max-width: 620px;
    line-height: 1.7;
    color: #d0d0d0 !important;
}

/* ---------------- RIGHT MASKED IMAGE ----------------- */

.au-hero-right {
    position: relative;
    min-height: 500px;
    padding-left: 20px;
}

/*
 * IMPORTANT:
 * Mask SVG is NOT hardcoded here.
 * It is injected dynamically via:
 * style="--au-hero-mask-url: url('...svg');"
 */
.au-hero-mask {
    width: 520px;
    height: 520px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;

    /* ✅ Dynamic SVG mask from PHP */
    -webkit-mask-image: var(--au-hero-mask-url);
    mask-image: var(--au-hero-mask-url);

    -webkit-mask-size: cover;
    mask-size: cover;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    overflow: hidden;
}

/* 🔒 Responsee-safe image override (CRITICAL) */
.au-hero-mask img {
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* --------------------- STATISTICS -------------------- */

.au-hero-stats-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
}

.au-hero-stat {
    padding-right: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.stat-label {
    font-size: 1.1rem;
    color: #d0d0d0;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.stat-sep {
    width: 80px;
    height: 1px;
    background: #ffffff;
    margin-top: 10px;
}

/* --------------------- TABLET ------------------------ */

@media (max-width: 992px) {
    .au-hero-section {
        min-height: auto;
        padding: 70px 0;
    }
}

/* --------------------- MOBILE ------------------------ */

@media (max-width: 768px) {

    .au-hero-section {
        min-height: auto;
        padding: 60px 0;
    }

    .au-hero-left,
    .au-hero-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .au-hero-left {
        text-align: center;
    }

    .au-hero-stats-row {
        display: block;
    }

    .au-hero-stat {
        padding-right: 0;
        margin-bottom: 25px;
        text-align: center;
    }

    .au-hero-left .margin-bottom {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .au-hero-left .margin-bottom a {
        margin: 0 auto !important;
    }

    .au-hero-right {
        min-height: auto;
        padding-left: 0;
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

    .au-hero-mask {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 350px;
        height: 350px;
        margin-top: 20px;

        /* Mask preserved on mobile */
        -webkit-mask-size: cover;
        mask-size: cover;

        /* Fallback for very old browsers */
        clip-path: inset(0 round 30%);
    }

    .stat-value {
        font-size: 1.3rem;
    }

    .stat-sep {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------------------------------------------------- */
/* --- AUTO TOC ACCORDION (GLOBAL) -------------------- */
/* ---------------------------------------------------- */

.au-toc-container {
    margin: 20px 0;
}

.au-toc-accordion {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.au-toc-header {
    width: 100%;
    text-align: left;
    padding: 14px;
    background: #f8f8f8;
    font-size: 20px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.au-toc-content {
    display: none;
    padding: 10px 15px;
    background: #fff;
}

.au-toc-link {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    color: #333;
    text-decoration: none;
}

.au-toc-link:last-child {
    border-bottom: none;
}

.au-toc-link:hover {
    color: #007b7f;
}