/* ============================================
   GCII™ Country Profile Styles
   ============================================ */

/* === RESET & VARIABLES === */
:root {
    --cp-font: "Plus Jakarta Sans", sans-serif;

    /* Figma Font Factor */
    --fff: 1;
}

:where(#gcii-country-profile, #gcii-access-denied) *,
:where(#gcii-country-profile, #gcii-access-denied) *::before,
:where(#gcii-country-profile, #gcii-access-denied) *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--cp-font) !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
    /* list-style: none !important; overridden per-element where bullets are needed */
    border-radius: 0 !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.cp-back-to-calculator {
    background-color: transparent !important;
    border: none !important;
    font-size: calc(14px * var(--fff)) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;

    color: #62748E !important;
    font-weight: 500 !important;

    cursor: pointer !important;
}

.cp-page-header {
    padding: 36px 24px !important;
    color: #0F3D57 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: calc(24px * var(--fff)) !important;
}

.cp-page-layout {
    display: flex !important;
    border-top: 1px solid #F1F5F9 !important;
}

.cp-navigation-section {
    padding: 24px !important;
    border-right: 1px solid #F1F5F9 !important;
    background: rgba(248, 250, 252, 0.502) !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
}

.cp-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.cp-nav-item {

    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #45556C !important;
    font-size: calc(14px * var(--fff)) !important;
    font-weight: 500 !important;
    /* line-height: 1.4 !important; */
    /* transition: background 0.15s !important; */
}

.cp-nav-item:hover {
    background-color: #F1F5F9 !important;
}

.cp-nav-item.active {
    background-color: #EFF6FF !important;
    color: #0F3D57 !important;
}

.cp-nav-item.danger {
    color: #EF4444 !important;
}

.cp-nav-num {
    flex-shrink: 0 !important;
    color: inherit !important;
    font-variant-numeric: tabular-nums !important;
}

.cp-nav-label {
    color: inherit !important;
}

.cp-content-section {
    padding: 32px 100px !important;
    padding-right: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    /* gap: 46px !important; */
    flex: 1 !important;
}

/* Sections */
.sec-header {
    border-bottom: 1px solid #F1F5F9 !important;
    width: 100% !important;
    padding-top: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.sec-header.danger {
    border-bottom: 1px solid #FFE2E2 !important;
}
.sec-header:nth-child(1) {
    padding-top: 0px !important;
}
.sec-header h2 {
    padding: 6px 0px !important;
    font-size: calc(18px * var(--fff)) !important;
    text-transform: uppercase !important;
    color: #0F172B !important;
}
.sec-header.danger h2 {
    color: #EF4444 !important;
}

.sec-content {
    margin-top: 24px !important;
}

.education-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}
.education-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;

    background-color: #F8FAFC !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 10px !important;
    gap: 4px !important;
}

.education-card h4 {
    text-transform: uppercase !important;
    font-size: calc(12px * var(--fff)) !important;

    font-weight: 700 !important;
    color: #90A1B9 !important;
}
.education-card h2 {
    font-size: calc(14px * var(--fff)) !important;
    color: #0F172B !important;
    font-weight: 700 !important;
}
.education-card p {
    font-size: calc(12px * var(--fff)) !important;
    color: #45556C !important;
}


.education-structure {
    border-left: 2px solid #E2E8F0 !important;;
    padding-left: 34px !important;

    display: flex !important;
    flex-direction: column !important;
}
.education-structure-header {
    position: relative !important;
    margin-top: 32px !important;
    margin-bottom: 6px !important;;
}
.education-structure-header:first-child {
    margin-top: 0px !important;
}
.education-structure-header h2 {
    font-size: calc(18px * var(--fff)) !important;
    color: #0F172B !important;
    font-weight: 600 !important;
}
.education-structure-icon {
    position: absolute !important;
    top: 4px !important;
    left: -43px !important;
}

.education-structure-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
}
.education-structure-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 2px !important;
    border-radius: 4px !important;

    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0px 1px 2px -1px #0000001A !important;
    box-shadow: 0px 1px 3px 0px #0000001A !important;
}

.education-structure-card h3 {
    color: #314158 !important;
    font-weight: 700 !important;
    font-size: calc(12px * var(--fff)) !important;
}
.education-structure-card h4 {
    color: #62748E !important;
    font-weight: 400 !important;
    font-size: calc(12px * var(--fff)) !important;
}

.sec-table {
    width: 100% !important;
    border-collapse: separate !important; /* needed for border-radius */
    border-spacing: 0 !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.sec-table tr:nth-child(1) {
    background-color: #F8FAFC !important;
}

/* remove row border; use cell borders instead */
.sec-table tr {
    border: none !important;
}

.sec-table th {
    color: #62748E !important;
    font-size: calc(12px * var(--fff)) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.sec-table td {
    color: #314158 !important;
    font-size: calc(14px * var(--fff)) !important;
}

.sec-table th,
.sec-table td {
    padding: 12px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #F1F5F9 !important;
    white-space: nowrap !important;
}

.sec-table tr:last-child td {
    border-bottom: none !important;
}

.sec-table th:last-child,
.sec-table td:last-child {
    text-align: right !important;
}

.sec-doc-standards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}
.sec-doc-card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 24px !important;

    display: flex !important;
    flex-direction: column !important;
}
.sec-doc-card.big {
    grid-column: span 2 !important;
}

.sec-doc-card h4 {
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    color: #0F172B !important;
    font-size: calc(14px * var(--fff)) !important;
}
.sec-doc-card .checklist {
    color: #45556C !important;
    font-size: calc(14px * var(--fff)) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.sec-doc-card .list-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.doc-card-wysiwyg-content {
    padding: 0 8px !important;
}

.risk-rating-card {
    background-color: #FEF3C6 !important;
    border: 1px solid #FEE685 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 330px !important;
    width: max-content !important;
    padding: 12px 16px !important;
    font-size: calc(14px * var(--fff)) !important;
    font-weight: 700 !important;
}
.risk-rating-card .risk-text {
    color: #A60003 !important;
}
/* Per-level card colours */
.risk-rating-card.risk-low {
    background-color: #DCFCE7 !important;
    border-color: #86EFAC !important;
}
.risk-rating-card.risk-low .risk-text {
    color: #15803D !important;
}
.risk-rating-card.risk-low-medium {
    background-color: #CCFBF1 !important;
    border-color: #5EEAD4 !important;
}
.risk-rating-card.risk-low-medium .risk-text {
    color: #0F766E !important;
}
.risk-rating-card.risk-medium {
    background-color: #FEF9C3 !important;
    border-color: #FDE047 !important;
}
.risk-rating-card.risk-medium .risk-text {
    color: #A16207 !important;
}
.risk-rating-card.risk-medium-high {
    background-color: #FFEDD5 !important;
    border-color: #FDBA74 !important;
}
.risk-rating-card.risk-medium-high .risk-text {
    color: #C2410C !important;
}
.risk-rating-card.risk-high {
    background-color: #FEE2E2 !important;
    border-color: #FCA5A5 !important;
}
.risk-rating-card.risk-high .risk-text {
    color: #B91C1C !important;
}

.risk-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin: 24px 0px !important;
}
.risk-card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
.risk-card-heading {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.risk-card-heading h4 {
    color: #0F172B !important;
    font-size: calc(18x * var(--fff)) !important;
    font-weight: 700 !important;
}

.risk-card .point {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}
.risk-card .point > span {
    background-color: #F1F5F9 !important;
    color: #62748E !important;
    font-size: calc(14px * var(--fff)) !important;
    font-weight: 700 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 100% !important;
}
.risk-card .point.warn > span {
    background-color: #FEF3C6 !important;
    color: #E17100 !important;
}

.risk-card .point .point-desc {
    display: flex !important;
    flex-direction: column !important;
}
.risk-card .point .point-desc > span:nth-child(1) {
    color: #314158 !important;
    font-size: calc(16px * var(--fff)) !important;
    font-weight: 500 !important;
    margin: 4px 0px !important;
}
.risk-card .point .point-desc > span:nth-child(2) {
    color: #62748E !important;
    font-size: calc(12px * var(--fff)) !important;
    font-weight: 400 !important;
}

.red-flags-card {
    background-color: #FEF2F2 !important;
    border: 1px solid #FFE2E2 !important;
    padding: 24px !important;
    border-radius: 16px !important;
}
.red-flags-heading {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.red-flags-heading h4 {
    color: #82181A !important;
    font-size: calc(18px * var(--fff)) !important;
    font-weight: 700 !important;
}

.red-flags-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
}

.red-flag-item {
    position: relative !important;
    padding-left: 22px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.red-flag-item .left-border {
    background-color: #EF444433 !important;
    border-radius: 330px !important;
    width: 6px !important;
    height: 100% !important;
    position: absolute !important;
    left: 0px !important;
}
.red-flag-item h4 {
    font-size: calc(14px * var(--fff)) !important;
    color: #82181A !important;
    font-weight: 700 !important;
}
.red-flag-item p {
    color: #9F0712CC !important;
    font-size: calc(14px * var(--fff)) !important;
}

.contextual-notes {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.contextual-notes .points {
    color: #45556C !important;
    font-size: calc(14px * var(--fff)) !important;
    padding-left: 16px !important;
    
}
.contextual-notes .recommendation {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;

    background-color: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    gap: 8px !important;
}
.contextual-notes .recommendation .recommendation-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #314158 !important;
    font-size: calc(14px * var(--fff)) !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}
.contextual-notes .recommendation .recommendation-title h4 {
    gap: 8px !important;
    color: #314158 !important;
    font-size: calc(14px * var(--fff)) !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}
.contextual-notes .recommendation p {
    color: #62748E !important;
    font-size: calc(14px * var(--fff)) !important;
    line-height: 19.5px !important;
}

/* ============================================
   Grading Scales Table
   ============================================ */

.grading-scales {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.grading-scales .gs-card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.grading-scales .gs-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px !important;
    background-color: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.grading-scales .gs-card-title {
    font-size: calc(12px * var(--fff)) !important;
    font-weight: 700 !important;
    color: #314158 !important;
}

.grading-scales .gs-card-badge {
    font-size: calc(12px * var(--fff)) !important;
    font-weight: 00 !important;
    color: #62748E !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.grading-scales .gs-card-body {
    padding: 8px 0px !important;
}

.grading-scales .gs-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.grading-scales .gs-table thead tr {
    background-color: transparent !important;
}

.grading-scales .gs-table th {
    /* padding: 16px 24px !important; */
    padding-top: 16px !important;
    padding-bottom: 4px !important;
    text-align: center !important;
    font-size: calc(12px * var(--fff)) !important;
    font-weight: 700 !important;
    color: #90A1B9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: none !important;
}

.grading-scales .gs-table td {
    /* padding: 10px 24px !important; */
    padding: 4px 0px !important;
    text-align: center !important;
    font-size: calc(14px * var(--fff)) !important;
    color: #0A0A0A !important;
    font-weight: 400 !important;
    border-bottom: none !important;
}

.grading-scales .gs-table td.gs-grade {
    font-weight: 700 !important;
    color: #0F172B !important;
}

.grading-scales .gs-table td.gs-points {
    color: #0F3D57 !important;
    font-weight: 500 !important;
}

.calc-gpa-btn {
    background-color: #19455F !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: calc(16px * var(--fff)) !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* Elementor Compatibility Layer */
#gcii-country-profile tbody,
#gcii-access-denied tbody {
    display: table-row-group !important;
}

#gcii-country-profile table,
#gcii-country-profile td,
#gcii-country-profile th,
#gcii-access-denied table,
#gcii-access-denied td,
#gcii-access-denied th {
    border: none !important;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Nav toggle — hidden on desktop */
.cp-nav-toggle {
    display: none !important;
}

/* Tablet / Mobile (≤1080px) */
@media (max-width: 1080px) {
    .cp-back-to-calculator {
        padding: 12px 16px !important;
    }

    .cp-page-header {
        padding: 20px 16px !important;
        font-size: calc(18px * var(--fff)) !important;
    }

    /* Stack layout: nav on top, content below */
    .cp-page-layout {
        flex-direction: column !important;
    }

    /* Nav section becomes a collapsible panel */
    .cp-navigation-section {
        position: relative !important;
        top: auto !important;
        align-self: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        border-right: none !important;
        border-bottom: 1px solid #F1F5F9 !important;
        padding: 0 !important;
    }

    /* Toggle button visible on mobile */
    .cp-nav-toggle {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: #0F3D57 !important;
        font-size: calc(14px * var(--fff)) !important;
        font-weight: 600 !important;
    }

    /* Chevron points down (closed state) */
    .cp-nav-toggle-icon {
        transition: transform 0.2s ease !important;
        transform: rotate(180deg) !important;
    }

    /* Chevron flips up when open */
    .cp-navigation-section.nav-open .cp-nav-toggle-icon {
        transform: rotate(0deg) !important;
    }

    /* Nav list hidden by default on mobile */
    .cp-nav {
        display: none !important;
        padding: 8px 8px 12px !important;
    }

    /* Nav list visible when toggled open */
    .cp-navigation-section.nav-open .cp-nav {
        display: flex !important;
        flex-direction: column !important;
    }

    .cp-content-section {
        padding: 24px 16px !important;
    }

    .sec-header h2 {
        font-size: calc(14px * var(--fff)) !important;
    }

    .education-cards {
        grid-template-columns: 1fr !important;
    }

    .education-structure-cards {
        grid-template-columns: 1fr !important;
    }

    .sec-doc-standards {
        grid-template-columns: 1fr !important;
    }

    .sec-doc-card.big {
        grid-column: span 1 !important;
    }

    .risk-cards {
        grid-template-columns: 1fr !important;
    }

    .red-flags-items {
        grid-template-columns: 1fr !important;
    }

    .contextual-notes {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .contextual-notes .recommendation {
        flex: unset !important;
    }

    /* Long-content tables scroll horizontally */
    .sec-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Grading table: short content, no display:block needed (avoids right-side gap) */
    .grading-scales .gs-card-header {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* .calc-gpa-btn {
        font-size: calc(13px * var(--fff)) !important;
        padding: 6px 12px !important;
    } */
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
    .cp-page-header {
        font-size: calc(16px * var(--fff)) !important;
    }

    .education-structure {
        padding-left: 20px !important;
    }

    .education-structure-icon {
        left: -28px !important;
    }

    .risk-card {
        padding: 16px !important;
    }

    .red-flags-card {
        padding: 16px !important;
    }
}

/* Elementor Compatibility Layer */
[data-id="74c66e0"] > .e-con-inner {
    margin: 0 auto !important;
}

/* ============================================
   Section Collapse Toggle
   ============================================ */

.sec-toggle {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
}

.sec-toggle svg {
    transition: transform 0.2s ease !important;
}

.sec-header.sec-collapsed .sec-toggle svg {
    transform: rotate(180deg) !important;
}

/* Smooth scroll for anchor navigation */
#gcii-country-profile,
#gcii-access-denied {
    scroll-behavior: smooth !important;
}

.no-border-bottom{
    border-bottom: none !important;
}

/* ============================================
   Custom (WYSIWYG) Section Content
   ============================================ */
.custom-section-content {
    padding: 24px !important;
    font-size: calc(15px * var(--fff)) !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}

.custom-section-content p {
    margin-bottom: 12px !important;
}

.custom-section-content p:last-child {
    margin-bottom: 0 !important;
}

.custom-section-content ul,
.custom-section-content ol {
    padding-left: 24px !important;
    margin-bottom: 12px !important;
    list-style: revert !important;
}

.custom-section-content li {
    margin-bottom: 5px !important;
}

.custom-section-content strong {
    font-weight: 700 !important;
}

.custom-section-content em {
    font-style: italic !important;
}

.custom-section-content u {
    text-decoration: underline !important;
}