/* =============================================================
   GIST — DYNAMIC PAGE CONTENT  (page.css)
   Scope : .inner--pages
   All styles here normalise whatever HTML a CMS / WYSIWYG
   editor injects inside .inner--pages so it looks consistent
   with the rest of the GIST Computer Education site.

   Load order :  font-icons.css → plugins.css → style.css
                 → responsive.css → custom.css → inner.css
                 → page.css   ← this file (last)

   Primary  : #1a3c6e
   Accent   : #fd1616
   Body     : 'Nunito Sans', sans-serif
   Headings : 'Poppins', sans-serif
   ============================================================= */


/* ── 0. CONTAINER RESET ──────────────────────────────────────── */

.inner--pages {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15.5px;
    font-weight: 400;
    color: #3d5166;
    line-height: 1.85;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Remove default bottom margin from the last child so the
   section padding is the only spacing at the end */
.inner--pages > *:last-child {
    margin-bottom: 0 !important;
}


/* ── 1. HEADINGS ─────────────────────────────────────────────── */

.inner--pages h1,
.inner--pages h2,
.inner--pages h3,
.inner--pages h4,
.inner--pages h5,
.inner--pages h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #0f1f40;
    line-height: 1.28;
    margin-top: 0em;
    margin-bottom: 0.55em;
    clear: both;
}

/* First heading needs no top push — the section padding does it */
.inner--pages > h1:first-child,
.inner--pages > h2:first-child,
.inner--pages > h3:first-child,
.inner--pages > h4:first-child,
.inner--pages > h5:first-child,
.inner--pages > h6:first-child {
    margin-top: 0;
}

.inner--pages h1 { font-size: 36px; }
.inner--pages h2 { font-size: 28px; color: #1a3c6e; }
.inner--pages h3 { font-size: 22px; }
.inner--pages h4 { font-size: 18px; }
.inner--pages h5 { font-size: 16px; }
.inner--pages h6 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #1a3c6e;
}

/* Heading anchor hover — appears when the CMS creates #ids */
.inner--pages h1[id]::before,
.inner--pages h2[id]::before,
.inner--pages h3[id]::before {
    content: '';
    display: block;
    height: 80px;            /* offset for sticky header */
    margin-top: -80px;
    pointer-events: none;
}


/* ── 2. BODY TEXT & PARAGRAPHS ───────────────────────────────── */

.inner--pages p {
    margin-bottom: 1.3em;
    color: #3d5166;
    font-size: 15.5px;
    line-height: 1.85;
}

/* Lead / intro paragraph — add class="lead" in the CMS */
.inner--pages p.lead,
.inner--pages .lead {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #0f1f40;
    line-height: 1.72;
    border-left: 4px solid #1a3c6e;
    padding-left: 18px;
    margin-bottom: 1.5em;
}

.inner--pages strong,
.inner--pages b {
    font-weight: 700;
    color: #0f1f40;
}

/*.inner--pages em,*/
/*.inner--pages i {*/
/*    font-style: italic;*/
/*}*/

.inner--pages small {
    font-size: 12.5px;
    color: #7a8fa0;
}

.inner--pages mark {
    background-color: rgba(26,60,110,0.10);
    color: #1a3c6e;
    padding: 1px 5px;
    border-radius: 3px;
}

.inner--pages abbr[title] {
    border-bottom: 1px dashed #1a3c6e;
    text-decoration: none;
    cursor: help;
}

.inner--pages del,
.inner--pages s {
    color: #9aacba;
    text-decoration: line-through;
}

.inner--pages sub,
.inner--pages sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

.inner--pages sup { top: -0.5em; }
.inner--pages sub { bottom: -0.25em; }


/* ── 3. LINKS ────────────────────────────────────────────────── */

.inner--pages a {
    color: #1a3c6e;
    text-decoration: underline;
    text-decoration-color: rgba(26,60,110,0.35);
    text-underline-offset: 3px;
    -webkit-transition: color 0.2s ease, text-decoration-color 0.2s ease;
            transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.inner--pages a:hover {
    color: #fd1616;
    text-decoration-color: rgba(253,22,22,0.55);
}

/* Buttons generated by the CMS keep the site button style */
.inner--pages a.btn,
.inner--pages a[class*="btn-"] {
    text-decoration: none;
}


/* ── 4. LISTS ────────────────────────────────────────────────── */

.inner--pages ul,
.inner--pages ol {
    padding-left: 0;
    margin-bottom: 1.3em;
    list-style: none;
}

.inner--pages ul li,
.inner--pages ol li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 0.45em;
    color: #3d5166;
    font-size: 15px;
    line-height: 1.75;
    margin-top: 0;
}

/* Unordered list — custom navy chevron bullet */
/*.inner--pages ul li::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 9px;*/
/*    width: 7px;*/
/*    height: 7px;*/
/*    border-radius: 50%;*/
/*    background-color: #1a3c6e;*/
/*    flex-shrink: 0;*/
/*}*/

/* Ordered list — counter */
.inner--pages ol {
    counter-reset: page-ol;
}

.inner--pages ol li {
    counter-increment: page-ol;
}

.inner--pages ol li::before {
    content: counter(page-ol) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1a3c6e;
    line-height: 1.75;
    min-width: 18px;
}

/* Nested lists */
.inner--pages ul ul,
.inner--pages ol ol,
.inner--pages ul ol,
.inner--pages ol ul {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    padding-left: 18px;
}

.inner--pages ul ul li::before {
    background-color: #fd1616;
    width: 5px;
    height: 5px;
    top: 10px;
}

/* Definition list */
.inner--pages dl { margin-bottom: 1.3em; }

.inner--pages dt {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0f1f40;
    margin-bottom: 4px;
}

.inner--pages dd {
    font-size: 14.5px;
    color: #5c727d;
    margin-left: 18px;
    margin-bottom: 10px;
    padding-left: 12px;
    border-left: 2px solid #e4edf8;
}


/* ── 5. IMAGES & MEDIA ───────────────────────────────────────── */

.inner--pages img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* CMS typically wraps images in <p> — remove the bottom margin */
.inner--pages p > img:only-child {
    margin: 0 auto 1.3em;
}

/* Inline image alignments (WordPress / CMS class names) */
.inner--pages img.alignleft,
.inner--pages .wp-caption.alignleft {
    float: left;
    margin: 4px 24px 16px 0;
    border-radius: 8px;
}

.inner--pages img.alignright,
.inner--pages .wp-caption.alignright {
    float: right;
    margin: 4px 0 16px 24px;
    border-radius: 8px;
}

.inner--pages img.aligncenter,
.inner--pages .wp-caption.aligncenter {
    margin: 0 auto 1.3em;
    float: none;
    display: block;
}

.inner--pages img.alignnone {
    margin: 0 0 1.3em;
}

/* Figure / figcaption */
.inner--pages figure {
    margin: 0 0 1.6em;
}

.inner--pages figure img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.inner--pages figcaption {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12.5px;
    color: #7a8fa0;
    margin-top: 8px;
    text-align: center;
    font-style: italic;
}

/* WordPress caption box */
.inner--pages .wp-caption {
    max-width: 100%;
    margin-bottom: 1.3em;
}

.inner--pages .wp-caption-text {
    font-size: 12.5px;
    color: #7a8fa0;
    text-align: center;
    font-style: italic;
    margin-top: 6px;
}

/* Responsive video / iframe embeds */
.inner--pages iframe,
.inner--pages embed,
.inner--pages object,
.inner--pages video {
    max-width: 100%;
    border-radius: 8px;
}

/* Auto-responsive video wrapper — add class="video-wrap" in CMS */
.inner--pages .video-wrap {
    position: relative;
    padding-top: 56.25%;   /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 1.6em;
}

.inner--pages .video-wrap iframe,
.inner--pages .video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}


/* ── 6. BLOCKQUOTE ───────────────────────────────────────────── */

.inner--pages blockquote {
    margin: 2em 0;
    padding: 24px 28px 24px 28px;
    background-color: #f4f7fc;
    border-left: 5px solid #1a3c6e;
    border-radius: 0 10px 10px 0;
    position: relative;
}

.inner--pages blockquote::before {
    content: '\201C';           /* " */
    font-family: 'Poppins', sans-serif;
    font-size: 64px;
    font-weight: 800;
    color: rgba(26,60,110,0.12);
    position: absolute;
    top: -4px;
    left: 16px;
    line-height: 1;
    pointer-events: none;
}

.inner--pages blockquote p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0f1f40;
    line-height: 1.72;
    margin-bottom: 0;
    position: relative;     /* above the decorative quote mark */
    z-index: 1;
}

.inner--pages blockquote cite,
.inner--pages blockquote footer {
    display: block;
    margin-top: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1a3c6e;
    font-style: normal;
}

.inner--pages blockquote cite::before {
    content: '— ';
}


/* ── 7. HORIZONTAL RULE ──────────────────────────────────────── */

.inner--pages hr {
    border: none;
    border-top: 1.5px solid #e4edf8;
    margin: 2.4em 0;
}


/* ── 8. TABLES ───────────────────────────────────────────────── */

.inner--pages .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.6em;
    border-radius: 10px;
    border: 1.5px solid #e4edf8;
}

/* When the CMS injects a bare <table> without a wrapper */
.inner--pages table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #3d5166;
    margin-bottom: 1.6em;
    border-radius: 10px;
    overflow: hidden;
}

.inner--pages .table-wrap table {
    margin-bottom: 0;
}

.inner--pages thead {
    background-color: #1a3c6e;
}

.inner--pages thead th {
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 13px 18px;
    text-align: left;
    white-space: nowrap;
    border: none;
}

.inner--pages tbody tr {
    border-bottom: 1px solid #edf2f9;
    -webkit-transition: background-color 0.18s ease;
            transition: background-color 0.18s ease;
}

.inner--pages tbody tr:last-child { border-bottom: none; }

.inner--pages tbody tr:hover {
    background-color: #f4f7fc;
}

/* Striped rows */
.inner--pages table.striped tbody tr:nth-child(even) {
    background-color: #f8fafd;
}

.inner--pages td {
    padding: 12px 18px;
    vertical-align: top;
    color: #3d5166;
    line-height: 1.55;
}

.inner--pages tfoot td {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0f1f40;
    background-color: #edf2f9;
    padding: 12px 18px;
}


/* ── 9. CODE & PRE ───────────────────────────────────────────── */

.inner--pages code {
    font-family: 'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size: 13.5px;
    background-color: rgba(26,60,110,0.07);
    color: #1a3c6e;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(26,60,110,0.12);
    word-break: break-word;
}

.inner--pages pre {
    background-color: #0f1f40;
    color: #cdd8f0;
    font-family: 'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size: 13.5px;
    line-height: 1.7;
    padding: 22px 24px;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.6em;
    border: 1px solid rgba(255,255,255,0.06);
}

.inner--pages pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    font-size: inherit;
    border-radius: 0;
    word-break: normal;
}


/* ── 10. NOTICE / ALERT BOXES ────────────────────────────────── */
/*
   Usage — add these classes to any <div> or <p> in the CMS:
   .notice-info  / .notice-success / .notice-warning / .notice-danger
*/

.inner--pages .notice-info,
.inner--pages .notice-success,
.inner--pages .notice-warning,
.inner--pages .notice-danger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 14px;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    padding: 16px 20px;
    border-radius: 10px;
    border-left: 4px solid;
    margin-bottom: 1.6em;
    font-size: 14.5px;
    line-height: 1.7;
}

.inner--pages .notice-info    { background-color: #edf4ff; border-color: #1a3c6e; color: #1a3c6e; }
.inner--pages .notice-success { background-color: #ecfdf4; border-color: #1a7a4a; color: #1a5c38; }
.inner--pages .notice-warning { background-color: #fffbec; border-color: #d97706; color: #92570a; }
.inner--pages .notice-danger  { background-color: #fff1f0; border-color: #fd1616; color: #b91111; }

/* Optional leading icon inside a notice */
.inner--pages .notice-info i,
.inner--pages .notice-success i,
.inner--pages .notice-warning i,
.inner--pages .notice-danger i {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 1px;
}


/* ── 11. HIGHLIGHT / FEATURE BOXES ──────────────────────────── */
/*
   .highlight-box  : neutral card pull-quote / feature blurb
   .feature-box    : navy card
*/

.inner--pages .highlight-box {
    background-color: #f4f7fc;
    border: 1.5px solid #e4edf8;
    border-radius: 10px;
    padding: 24px 26px;
    margin-bottom: 1.6em;
}

.inner--pages .feature-box {
    background-color: #1a3c6e;
    border-radius: 10px;
    padding: 24px 26px;
    margin-bottom: 1.6em;
}

.inner--pages .feature-box p,
.inner--pages .feature-box li,
.inner--pages .feature-box h2,
.inner--pages .feature-box h3,
.inner--pages .feature-box h4 {
    color: #ffffff;
}

.inner--pages .feature-box a      { color: #ffd580; }
.inner--pages .feature-box a:hover { color: #ffffff; }


/* ── 12. INLINE BADGE / PILL ─────────────────────────────────── */
/*  <span class="badge-pill">NEW</span>  */

.inner--pages .badge-pill {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.4;
    vertical-align: middle;
    background-color: rgba(26,60,110,0.10);
    color: #1a3c6e;
    border: 1px solid rgba(26,60,110,0.18);
}

.inner--pages .badge-pill--red {
    background-color: rgba(253,22,22,0.10);
    color: #c70000;
    border-color: rgba(253,22,22,0.22);
}

.inner--pages .badge-pill--green {
    background-color: rgba(26,122,74,0.10);
    color: #1a7a4a;
    border-color: rgba(26,122,74,0.22);
}


/* ── 13. DIVIDER WITH TEXT ───────────────────────────────────── */
/*  <div class="divider-label"><span>Section Title</span></div>  */

.inner--pages .divider-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    margin: 2em 0;
    color: #1a3c6e;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.inner--pages .divider-label::before,
.inner--pages .divider-label::after {
    content: '';
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 1.5px;
    background-color: #e4edf8;
    border-radius: 2px;
}


/* ── 14. KEY-VALUE / INFO PAIRS ──────────────────────────────── */
/*  .info-row / .info-pair used in course detail or event pages  */

.inner--pages .info-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    margin-bottom: 1.3em;
    border: 1.5px solid #e4edf8;
    border-radius: 10px;
    overflow: hidden;
}

.inner--pages .info-pair {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid #edf2f9;
    width: 100%;
}

.inner--pages .info-pair:last-child { border-bottom: none; }

.inner--pages .info-pair dt {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1a3c6e;
    min-width: 160px;
    flex-shrink: 0;
}

.inner--pages .info-pair dd {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #3d5166;
    margin: 0;
    padding: 0;
    border: none;
    flex: 1;
}


/* ── 15. GALLERY / MEDIA GRID ────────────────────────────────── */
/*
   .media-grid wraps <figure> or <img> elements for a simple
   responsive photo grid inside rich content.
*/

.inner--pages .media-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 1.6em;
}

.inner--pages .media-grid img,
.inner--pages .media-grid figure {
    width: 100%;
    height: 180px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0;
}

.inner--pages .media-grid figure img {
    height: 100%;
}


/* ── 16. WORDPRESS / CMS GALLERY ────────────────────────────── */

.inner--pages .gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.6em;
}

.inner--pages .gallery-item {
    overflow: hidden;
    border-radius: 8px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 180px;
            flex: 1 1 180px;
    max-width: 300px;
}

.inner--pages .gallery-item img {
    width: 100%;
    height: 160px;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 8px;
    -webkit-transition: -webkit-transform 0.35s ease;
            transition: transform 0.35s ease;
}

.inner--pages .gallery-item:hover img {
    -webkit-transform: scale(1.04);
        -ms-transform: scale(1.04);
            transform: scale(1.04);
}

.inner--pages .gallery-caption {
    font-size: 12px;
    color: #7a8fa0;
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}


/* ── 17. ACCORDION / COLLAPSE (Bootstrap 5.3) ───────────────── */

.inner--pages .accordion {
    margin-bottom: 1.6em;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #e4edf8;
}

.inner--pages .accordion-item {
    border: none;
    border-bottom: 1px solid #edf2f9;
    background-color: #ffffff;
}

.inner--pages .accordion-item:last-child {
    border-bottom: none;
}

.inner--pages .accordion-button {
    font-family: 'Poppins', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #0f1f40;
    background-color: #ffffff;
    padding: 16px 20px;
    -webkit-box-shadow: none;
            box-shadow: none;
    border: none;
}

.inner--pages .accordion-button:not(.collapsed) {
    color: #1a3c6e;
    background-color: #f4f7fc;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.inner--pages .accordion-button::after {
    -webkit-filter: none;
            filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a3c6e' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.inner--pages .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a3c6e' stroke-width='2' d='M2 11l6-6 6 6'/%3E%3C/svg%3E");
}

.inner--pages .accordion-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14.5px;
    color: #3d5166;
    line-height: 1.80;
    padding: 16px 20px 20px;
    background-color: #f8fafd;
}


/* ── 18. TABS (Bootstrap 5.3) ────────────────────────────────── */

.inner--pages .nav-tabs {
    border-bottom: 2px solid #e4edf8;
    margin-bottom: 20px;
    gap: 4px;
}

.inner--pages .nav-tabs .nav-link {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #5c727d;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 18px;
    margin-bottom: -2px;
    -webkit-transition: color 0.2s ease, border-color 0.2s ease;
            transition: color 0.2s ease, border-color 0.2s ease;
}

.inner--pages .nav-tabs .nav-link:hover {
    color: #1a3c6e;
    border-bottom-color: rgba(26,60,110,0.35);
    background: none;
}

.inner--pages .nav-tabs .nav-link.active {
    color: #1a3c6e;
    border-bottom-color: #1a3c6e;
    background: none;
    font-weight: 700;
}

.inner--pages .tab-content {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    color: #3d5166;
    line-height: 1.85;
}


/* ── 19. BUTTONS (CMS-generated) ─────────────────────────────── */

.inner--pages .btn-primary,
.inner--pages .btn-gist {
    display: inline-block;
    background-color: #1a3c6e;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 6px;
    border: 2px solid #1a3c6e;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: background-color 0.22s ease, -webkit-transform 0.2s ease,
                        -webkit-box-shadow 0.22s ease;
            transition: background-color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
    -webkit-box-shadow: 0 4px 14px rgba(26,60,110,0.22);
            box-shadow: 0 4px 14px rgba(26,60,110,0.22);
}

.inner--pages .btn-primary:hover,
.inner--pages .btn-gist:hover {
    background-color: #142d55;
    border-color: #142d55;
    color: #ffffff !important;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-box-shadow: 0 8px 20px rgba(26,60,110,0.30);
            box-shadow: 0 8px 20px rgba(26,60,110,0.30);
}

.inner--pages .btn-outline,
.inner--pages .btn-gist-outline {
    display: inline-block;
    background-color: transparent;
    color: #1a3c6e !important;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 11px 26px;
    border-radius: 6px;
    border: 2px solid #1a3c6e;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: background-color 0.22s ease, color 0.22s ease;
            transition: background-color 0.22s ease, color 0.22s ease;
}

.inner--pages .btn-outline:hover,
.inner--pages .btn-gist-outline:hover {
    background-color: #1a3c6e;
    color: #ffffff !important;
}

.inner--pages .btn-danger {
    background-color: #fd1616;
    border-color: #fd1616;
    color: #ffffff !important;
}

.inner--pages .btn-danger:hover {
    background-color: #c70000;
    border-color: #c70000;
}


/* ── 20. CLEARFIX ────────────────────────────────────────────── */

.inner--pages .clearfix::after {
    content: '';
    display: table;
    clear: both;
}


/* ── 21. SPACING UTILITIES ───────────────────────────────────── */

.inner--pages .mt-0  { margin-top: 0 !important; }
.inner--pages .mb-0  { margin-bottom: 0 !important; }
.inner--pages .mt-10 { margin-top: 10px !important; }
.inner--pages .mb-10 { margin-bottom: 10px !important; }
.inner--pages .mt-20 { margin-top: 20px !important; }
.inner--pages .mb-20 { margin-bottom: 20px !important; }
.inner--pages .mt-30 { margin-top: 30px !important; }
.inner--pages .mb-30 { margin-bottom: 30px !important; }
.inner--pages .text-center { text-align: center !important; }
.inner--pages .text-right  { text-align: right !important; }
.inner--pages .text-left   { text-align: left !important; }


/* ── 22. RESPONSIVE ADJUSTMENTS ──────────────────────────────── */

/* Laptop 992–1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .inner--pages h1 { font-size: 30px; }
    .inner--pages h2 { font-size: 24px; }
    .inner--pages h3 { font-size: 20px; }
}

/* Tablet 768–991px */
@media (min-width: 768px) and (max-width: 991px) {
    .inner--pages        { font-size: 15px; }
    .inner--pages h1     { font-size: 26px; }
    .inner--pages h2     { font-size: 22px; }
    .inner--pages h3     { font-size: 18px; }
    .inner--pages h4     { font-size: 16px; }
    .inner--pages p.lead { font-size: 15.5px; }
    .inner--pages table  { font-size: 13.5px; }
    .inner--pages thead th,
    .inner--pages td     { padding: 10px 14px; }
    .inner--pages img.alignleft,
    .inner--pages img.alignright {
        float: none;
        display: block;
        margin: 0 auto 1.3em;
        width: 100%;
    }
}

/* Mobile ≤767px */
@media (max-width: 767px) {
    .inner--pages        { font-size: 14.5px; }
    .inner--pages h1     { font-size: 22px; }
    .inner--pages h2     { font-size: 20px; }
    .inner--pages h3     { font-size: 17px; }
    .inner--pages h4     { font-size: 15px; }
    .inner--pages p.lead { font-size: 15px; padding-left: 14px; }
    .inner--pages blockquote { padding: 18px 18px 18px 18px; }
    .inner--pages blockquote::before { font-size: 48px; }
    .inner--pages table  { font-size: 13px; }
    .inner--pages thead th,
    .inner--pages td     { padding: 9px 12px; }
    .inner--pages img.alignleft,
    .inner--pages img.alignright {
        float: none;
        display: block;
        margin: 0 auto 1.3em;
        width: 100%;
    }
    .inner--pages .info-pair        { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; }
    .inner--pages .info-pair dt     { min-width: unset; }
    .inner--pages .media-grid       { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .inner--pages .media-grid img   { height: 130px; }
    .inner--pages .btn-primary,
    .inner--pages .btn-gist,
    .inner--pages .btn-outline,
    .inner--pages .btn-gist-outline { display: block; text-align: center; width: 100%; }
}

/* Very small phones */
@media (max-width: 479px) {
    .inner--pages h1 { font-size: 20px; }
    .inner--pages h2 { font-size: 18px; }
    .inner--pages h3 { font-size: 16px; }
    .inner--pages .notice-info,
    .inner--pages .notice-success,
    .inner--pages .notice-warning,
    .inner--pages .notice-danger { flex-direction: column; gap: 8px; }
}