/* =========================================================
   OYDC ZAMBIA
   DOCUMENT CENTRE
  INSTITUTIONAL DOCUMENT DESIGN
========================================================= */


/* =========================================================
   FONT FACES
========================================================= */

@font-face {

    font-family: 'World Athletics';

    src: url('../Font/WorldAthletics.eot');

    src:
        local('World Athletics'),
        local('WorldAthletics'),
        url('../Font/WorldAthletics.eot?#iefix') format('embedded-opentype'),
        url('../Font/WorldAthletics.woff2') format('woff2'),
        url('../Font/WorldAthletics.woff') format('woff'),
        url('../Font/WorldAthletics.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {

    font-family: 'World Athletics Headline';

    src: url('../Font/WorldAthleticsHeadline.eot');

    src:
        local('World Athletics Headline'),
        local('WorldAthleticsHeadline'),
        url('../Font/WorldAthleticsHeadline.eot?#iefix') format('embedded-opentype'),
        url('../Font/WorldAthleticsHeadline.ttf') format('truetype');

    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   GLOBAL SETTINGS
========================================================= */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


:root {

    --oydc-green: #00843D;
    --oydc-dark-green: #006B32;
    --oydc-deep-green: #004F27;
    --oydc-light-green: #69C993;

    --oydc-black: #111111;
    --oydc-white: #ffffff;

    --oydc-grey: #666666;
    --oydc-light: #F5F8F6;
    --oydc-border: #E2E8E4;

    --container: 1200px;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        'World Athletics',
        Arial,
        sans-serif;

    color: var(--oydc-black);

    background: var(--oydc-white);

    animation:
        pageFadeIn
        0.8s
        ease-out
        both;

}


a {

    text-decoration: none;

}


/* =========================================================
   PAGE HERO
========================================================= */

.documents-hero {

    min-height: 330px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-image:
        url('../Images/OYDC-2.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


/* =========================================================
   HERO OVERLAY
========================================================= */

.documents-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 79, 39, 0.97) 0%,
            rgba(0, 107, 50, 0.91) 48%,
            rgba(0, 132, 61, 0.67) 100%
        );

    z-index: 1;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.documents-hero-content {

    width: 100%;

    max-width: var(--container);

    margin: 0 auto;

    padding: 75px 6%;

    position: relative;

    z-index: 3;

    animation:
        heroContentIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.1s
        both;

}


.section-label {

    display: inline-block;

    margin-bottom: 13px;

    color:
        rgba(255, 255, 255, 0.82);

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2.5px;

}


.documents-hero h1 {

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size:
        clamp(48px, 6vw, 68px);

    line-height: 0.95;

    color: var(--oydc-white);

    margin-bottom: 20px;

}


.documents-hero p {

    max-width: 650px;

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 18px;

    line-height: 1.7;

}


/* =========================================================
   HERO DECORATIVE CIRCLES
========================================================= */

.hero-circle {

    position: absolute;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    z-index: 2;

    pointer-events: none;

    animation:
        circleIn
        1.2s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.2s
        both;

}


.hero-circle-one {

    width: 390px;
    height: 390px;

    right: -150px;
    top: -170px;

}


.hero-circle-two {

    width: 250px;
    height: 250px;

    right: 100px;
    bottom: -180px;

    border-color:
        rgba(255, 255, 255, 0.08);

}


/* =========================================================
   DOCUMENTS SECTION
========================================================= */

.documents-section {

    padding:
        90px 6%
        100px;

    background:
        var(--oydc-white);

}


.documents-container {

    max-width:
        var(--container);

    margin:
        0 auto;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.documents-intro {

    max-width: 850px;

    margin-bottom: 75px;

    animation:
        introIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.25s
        both;

}


.intro-heading {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 22px;

}


.green-line {

    width: 5px;

    height: 58px;

    flex-shrink: 0;

    background:
        var(--oydc-green);

    display: block;

}


.intro-label {

    display: block;

    margin-bottom: 5px;

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;

    color:
        var(--oydc-green);

}


.intro-heading h2 {

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 38px;

    line-height: 1;

    color:
        var(--oydc-black);

}


.documents-intro p {

    max-width: 800px;

    color: #5c5c5c;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   DOCUMENT CATEGORY
========================================================= */

.document-category {

    margin-bottom: 85px;

    animation:
        categoryIn
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;

}


.document-category:nth-of-type(2) {

    animation-delay: 0.15s;

}


.document-category:nth-of-type(3) {

    animation-delay: 0.25s;

}


.document-category:nth-of-type(4) {

    animation-delay: 0.35s;

}


/* =========================================================
   CATEGORY HEADING
========================================================= */

.category-heading {

    display: flex;

    align-items: center;

    gap: 35px;

    margin-bottom: 30px;

}


.category-title {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;

}


.category-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border:
        1px solid
        var(--oydc-green);

    color:
        var(--oydc-green);

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;

}


.category-label {

    display: block;

    margin-bottom: 4px;

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1.8px;

    color:
        var(--oydc-green);

}


.category-title h2 {

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 32px;

    line-height: 1;

    color:
        var(--oydc-black);

}


.category-line {

    height: 1px;

    flex: 1;

    background:
        var(--oydc-border);

}


/* =========================================================
   DOCUMENT GRID
========================================================= */

.documents-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.document-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;

    min-height: 125px;

    padding:
        25px 28px;

    background:
        var(--oydc-white);

    border:
        1px solid
        var(--oydc-border);

    border-radius: 3px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;

}


.document-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        var(--oydc-green);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform 0.3s ease;

}


.document-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(0, 132, 61, 0.35);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.08);

    background:
        #fcfefd;

}


.document-card:hover::before {

    transform:
        scaleY(1);

}


/* =========================================================
   PDF / POLICY ICON
========================================================= */

.document-icon {

    width: 65px;

    height: 72px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    background:
        #fff3f3;

    border-radius: 4px;

    color:
        #D32F2F;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.document-icon::after {

    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 18px;
    height: 18px;

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            #ffffff 51%
        );

}


.document-icon i {

    font-size: 30px;

    z-index: 1;

}


.document-card:hover .document-icon {

    transform:
        scale(1.05);

    background:
        #ffeded;

}


/* =========================================================
   DOCUMENT INFORMATION
========================================================= */

.document-info {

    min-width: 0;

    flex: 1;

}


.document-info h3 {

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 20px;

    line-height: 1.25;

    color:
        var(--oydc-black);

    margin-bottom: 12px;

    transition:
        color 0.3s ease;

}


.document-card:hover .document-info h3 {

    color:
        var(--oydc-green);

}


/* =========================================================
   DOCUMENT ACTION
========================================================= */

.document-action {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    font-weight: bold;

    color:
        var(--oydc-green);

    letter-spacing: 0.3px;

}


.document-action i {

    font-size: 11px;

    transition:
        transform 0.3s ease;

}


.document-card:hover .document-action i {

    transform:
        translateX(5px);

}


/* =========================================================
   OTHER DOCUMENTS PLACEHOLDER
========================================================= */

.future-category {

    margin-bottom: 10px;

}


.documents-placeholder {

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 28px;

    background:
        var(--oydc-light);

    border:
        1px dashed
        #cddbd2;

    border-radius: 3px;

}


.placeholder-icon {

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--oydc-white);

    color:
        var(--oydc-green);

    border-radius: 50%;

    border:
        1px solid
        #dce9e1;

}


.placeholder-icon i {

    font-size: 22px;

}


.documents-placeholder h3 {

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 19px;

    color:
        var(--oydc-black);

    margin-bottom: 7px;

}


.documents-placeholder p {

    color:
        #666666;

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   GOVERNANCE SECTION
========================================================= */

.governance-section {

    padding:
        65px 6%;

    background:
        var(--oydc-light);

    border-top:
        1px solid
        #e4eee8;

}


.governance-container {

    max-width:
        var(--container);

    margin:
        0 auto;

    display: flex;

    align-items:
        flex-start;

    gap: 25px;

    animation:
        governanceIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.9s
        both;

}


.governance-icon {

    width: 62px;

    height: 62px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--oydc-green);

    color:
        var(--oydc-white);

    border-radius: 50%;

}


.governance-icon i {

    font-size: 24px;

}


.governance-label {

    display: block;

    margin-bottom: 5px;

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1.8px;

    color:
        var(--oydc-green);

}


.governance-content h2 {

    font-family:
        'World Athletics Headline',
        sans-serif;

    font-size: 29px;

    color:
        var(--oydc-black);

    margin-bottom: 10px;

}


.governance-content p {

    max-width: 900px;

    color:
        #555555;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   PAGE LOADING LINE
========================================================= */

body::before {

    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background:
        var(--oydc-green);

    transform-origin:
        left;

    transform:
        scaleX(0);

    animation:
        pageLoadingLine
        1.1s
        cubic-bezier(0.65, 0, 0.35, 1)
        both;

    z-index: 99999;

    pointer-events: none;

}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes pageFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes heroContentIn {

    from {

        opacity: 0;

        transform:
            translateX(-35px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes introIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes categoryIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes governanceIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes circleIn {

    from {

        opacity: 0;

        transform:
            translateX(40px)
            scale(0.9);

    }

    to {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

    }

}


@keyframes pageLoadingLine {

    0% {

        transform:
            scaleX(0);

        opacity: 1;

    }

    70% {

        transform:
            scaleX(0.85);

        opacity: 1;

    }

    100% {

        transform:
            scaleX(1);

        opacity: 0;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .documents-section {

        padding:
            70px 7%
            80px;

    }


    .documents-grid {

        grid-template-columns:
            1fr;

    }


    .category-heading {

        gap: 20px;

    }


    .category-title h2 {

        font-size: 29px;

    }


    .governance-section {

        padding:
            55px 7%;

    }

}


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

@media (max-width: 600px) {

    .documents-hero {

        min-height:
            270px;

    }


    .documents-hero-content {

        padding:
            55px 6%;

    }


    .documents-hero h1 {

        font-size:
            43px;

        margin-bottom:
            15px;

    }


    .documents-hero p {

        font-size:
            16px;

        line-height:
            1.6;

    }


    .hero-circle-one {

        width:
            280px;

        height:
            280px;

        right:
            -150px;

        top:
            -100px;

    }


    .hero-circle-two {

        display:
            none;

    }


    .documents-section {

        padding:
            55px 6%
            65px;

    }


    .documents-intro {

        margin-bottom:
            55px;

    }


    .intro-heading {

        gap:
            13px;

    }


    .green-line {

        height:
            48px;

        width:
            4px;

    }


    .intro-heading h2 {

        font-size:
            30px;

    }


    .documents-intro p {

        font-size:
            15px;

    }


    .document-category {

        margin-bottom:
            60px;

    }


    .category-heading {

        align-items:
            flex-start;

        gap:
            14px;

        margin-bottom:
            22px;

    }


    .category-title {

        gap:
            12px;

    }


    .category-number {

        width:
            40px;

        height:
            40px;

        font-size:
            11px;

    }


    .category-label {

        font-size:
            9px;

        letter-spacing:
            1.3px;

    }


    .category-title h2 {

        font-size:
            25px;

    }


    .category-line {

        display:
            none;

    }


    .documents-grid {

        gap:
            14px;

    }


    .document-card {

        min-height:
            105px;

        padding:
            20px;

        gap:
            16px;

    }


    .document-icon {

        width:
            54px;

        height:
            61px;

    }


    .document-icon i {

        font-size:
            25px;

    }


    .document-info h3 {

        font-size:
            17px;

        margin-bottom:
            9px;

    }


    .document-action {

        font-size:
            12px;

    }


    .documents-placeholder {

        align-items:
            flex-start;

        padding:
            22px;

        gap:
            16px;

    }


    .placeholder-icon {

        width:
            50px;

        height:
            50px;

    }


    .documents-placeholder h3 {

        font-size:
            17px;

    }


    .documents-placeholder p {

        font-size:
            13px;

    }


    .governance-section {

        padding:
            45px 6%;

    }


    .governance-container {

        flex-direction:
            column;

        gap:
            18px;

    }


    .governance-content h2 {

        font-size:
            25px;

    }


    .governance-content p {

        font-size:
            14px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .documents-hero h1 {

        font-size:
            38px;

    }


    .category-title h2 {

        font-size:
            22px;

    }


    .document-card {

        padding:
            17px;

        gap:
            13px;

    }


    .document-icon {

        width:
            48px;

        height:
            56px;

    }


    .document-info h3 {

        font-size:
            15px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    body,
    .documents-hero-content,
    .documents-intro,
    .document-category,
    .governance-container,
    .hero-circle,
    body::before {

        animation:
            none !important;

        opacity:
            1 !important;

        transform:
            none !important;

    }


    .document-card,
    .document-icon,
    .document-action i {

        transition:
            none !important;

    }

}