/* ============================================
   SOCENT MEDIA — Brand layer (logos + kente strip)
   ============================================ */

/*
 * Agency (title font) — from your brand package / OTF download.
 * Place the file in assets/fonts/ as Agency.otf (or Agency.woff2).
 * Falls back to Oswald until the file is present.
 */
@font-face {
    font-family: 'Agency';
    src: local('Agency'),
         local('Agency Regular'),
         url('../fonts/Agency.woff2') format('woff2'),
         url('../fonts/Agency.woff') format('woff'),
         url('../fonts/agency.otf') format('opentype'),
         url('../fonts/Agency.otf') format('opentype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agency FB';
    src: local('Agency FB Bold'),
         local('AgencyFB-Bold'),
         local('Agency FB'),
         url('../fonts/AgencyFB-Bold.woff2') format('woff2'),
         url('../fonts/AgencyFB-Bold.woff') format('woff'),
         url('../fonts/AGENCYB.TTF') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

.site-logo {
    display: block;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: center center;
}

/* Logo PNGs are square with extra padding — clip link box to show mark at full size */
.logo.site-logo-link {
    display: block;
    line-height: 0;
    flex-shrink: 0;
    overflow: hidden;
}

.site-header .site-logo-link {
    width: min(260px, 52vw);
    height: 64px;
}

.site-header .site-logo {
    width: min(260px, 52vw);
    height: min(260px, 52vw);
    margin-top: calc(32px - min(130px, 26vw));
}

.logo-footer.site-logo-link {
    width: min(300px, 70vw);
    height: 76px;
}

.logo-footer .site-logo,
.site-logo--footer {
    width: min(300px, 70vw);
    height: min(300px, 70vw);
    margin-top: calc(38px - min(150px, 35vw));
}

@media (max-width: 768px) {
    .site-header .site-logo-link {
        width: min(210px, 58vw);
        height: 52px;
    }

    .site-header .site-logo {
        width: min(210px, 58vw);
        height: min(210px, 58vw);
        margin-top: calc(26px - min(105px, 29vw));
    }

    .logo-footer.site-logo-link {
        width: min(240px, 72vw);
        height: 64px;
    }

    .logo-footer .site-logo,
    .site-logo--footer {
        width: min(240px, 72vw);
        height: min(240px, 72vw);
        margin-top: calc(32px - min(120px, 36vw));
    }
}

/* Kente geometric divider */
.kente-strip {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    background: var(--black);
}

.kente-strip--light {
    background: #f7f7f7;
}

.kente-strip-svg {
    display: block;
    width: 100%;
    height: 56px;
}

@media (min-width: 769px) {
    .kente-strip-svg {
        height: 64px;
    }
}

.kente-strip--light .kente-bg {
    fill: #f7f7f7;
}

.kente-strip:not(.kente-strip--light) .kente-bg {
    fill: var(--black);
}

.site-header {
    border-bottom: none;
    background: var(--black);
}

.header-kente {
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    align-self: stretch;
}

.header-kente .kente-strip-svg,
.header-kente-svg {
    display: block;
    width: 100%;
    height: var(--header-strip-h);
    min-height: var(--header-strip-h);
}

.site-footer {
    border-top: none;
}

.footer-kente {
    margin-bottom: 0;
}