/*
Theme Name: CIL Basic
Theme URI: https://cecureintel.com
Description: Modern, compact, SEO-enabled CIL WordPress theme (no plugins required).
Version: 1.2.0
Author: CecureIntel
Author URI: https://cecureintel.com
License: Proprietary
Text Domain: cil-basic
*/

/* Google Fonts - Sora */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&display=swap");

/* Lota Grotesque Fonts */
@font-face {
    font-family: "lota_grotesquelight";
    src: url("./assets/fonts/los_andes__lota_grotesque_light-webfont.woff2") format("woff2"),
         url("./assets/fonts/los_andes__lota_grotesque_light-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "lota_grotesqueregular";
    src: url("./assets/fonts/los_andes__lota_grotesque_regular-webfont.woff2") format("woff2"),
         url("./assets/fonts/los_andes__lota_grotesque_regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --cil-primary: #112641;
    --cil-primary-2: #24548e;
    --cil-accent: #00aeeb;
    --cil-bg: #f6f9fe;
    --cil-text: #0f172a;
    --cil-muted: #5b6473;
    --cil-border: #d7dadf;
    --cil-radius: 14px;
}

/* Reset and Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "lota_grotesquelight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--cil-text);
    background-color: #fff;
}

/* a {
    color: inherit;
    text-decoration: none;
} */

img {
    max-width: 100%;
    height: auto;
}

/* ul {
    list-style: none;
    margin: 0;
    padding: 0;
} */

/* ============================================
   FONT UTILITY CLASSES
   ============================================ */

/* Sora font classes */
.sora-bold {
    font-family: "Sora", sans-serif;
    font-weight: 700;
}

.sora-semi {
    font-family: "Sora", sans-serif;
    font-weight: 600;
}

.sora-reg {
    font-family: "Sora", sans-serif;
    font-weight: 300;
}

.sora-mid, .sora {
    font-family: "Sora", sans-serif;
    font-weight: 400;
}

/* Lota font classes */
.font-lota {
    font-family: "lota_grotesquelight", sans-serif;
}

.font-lotar {
    font-family: "lota_grotesqueregular", sans-serif;
}

/* Tailwind font family classes */
.font-sora-bold {
    font-family: "Sora", sans-serif;
    font-weight: 700;
}

.font-sora-semi {
    font-family: "Sora", sans-serif;
    font-weight: 600;
}

.font-sora-reg {
    font-family: "Sora", sans-serif;
    font-weight: 300;
}

/* ============================================
   FOOTER SPECIFIC STYLES
   ============================================ */

/* Footer toggle button */
.footer-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
}

/* Footer link hover */
footer a:hover {
    opacity: 0.8;
}

/* Footer sections on mobile - hidden by default, shown on lg */
footer ul[id^="footer-"] {
    display: none;
}

footer ul[id^="footer-"].flex {
    display: flex;
}

@media (min-width: 1024px) {
    footer ul[id^="footer-"] {
        display: flex !important;
    }
    
    footer .footer-toggle-btn {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITY & MISC
   ============================================ */

/* .site-header,
.site-footer,
.site-main {
    display: block;
}

.screen-reader-text,
.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 2px solid var(--cil-accent);
    border-radius: 10px;
    z-index: 1000;
    left: 1rem;
    top: 1rem;
} */