/* ==========================================================================
   Blackfordby College — Modern Revamp (Natural & Premium)
   Loaded after the base theme to layer a refined, premium look & feel.
   ========================================================================== */

:root {
    --bf-green:        #065d40;
    --bf-green-dark:   #044a33;
    --bf-green-deep:   #03351f;
    --bf-green-soft:   #e8f1ec;
    --bf-gold:         #c79a3b;
    --bf-gold-bright:  #ffd24d;
    --bf-cream:        #faf8f3;
    --bf-stone:        #efe9dd;
    --bf-ink:          #18241d;
    --bf-muted:        #5d6b62;
    --bf-line:         #e7e2d6;

    --bf-radius:    16px;
    --bf-radius-lg: 28px;
    --bf-radius-sm: 10px;
    --bf-pill:      999px;

    --bf-shadow-sm: 0 2px 8px rgba(16, 40, 28, .06);
    --bf-shadow:    0 14px 40px -12px rgba(16, 40, 28, .18);
    --bf-shadow-lg: 0 30px 70px -20px rgba(16, 40, 28, .30);

    --bf-ease: cubic-bezier(.22, 1, .36, 1);

    --bf-font-display: 'Fraunces', 'Fredoka', Georgia, serif;
    --bf-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base typography ---------- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    font-family: var(--bf-font-body);
    color: var(--bf-ink);
    background: var(--bf-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.sec-title, .hero-title, .breadcumb-title, .contact-title, .media-title {
    font-family: var(--bf-font-display) !important;
    letter-spacing: -.01em;
    color: var(--bf-ink);
    font-optical-sizing: auto;
}

.sec-title { font-weight: 600 !important; line-height: 1.12; }

.sec-subtitle {
    font-family: var(--bf-font-body) !important;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    font-size: .8rem;
    color: var(--bf-gold) !important;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.sec-subtitle::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--bf-gold);
    display: inline-block;
}

p { color: var(--bf-muted); line-height: 1.75; }

a { transition: color .25s var(--bf-ease); }

/* ---------- Buttons ---------- */
.vs-btn,
.btn-premium {
    font-family: var(--bf-font-body) !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    border-radius: var(--bf-pill) !important;
    padding: 14px 30px !important;
    border: none !important;
    background: var(--bf-green) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    box-shadow: 0 10px 24px -10px rgba(6, 93, 64, .6);
    transition: transform .3s var(--bf-ease), box-shadow .3s var(--bf-ease), background .3s var(--bf-ease) !important;
    text-transform: none !important;
}
.vs-btn:hover,
.btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -12px rgba(6, 93, 64, .7);
    background: var(--bf-green-dark) !important;
    color: #fff !important;
}
.btn-gold {
    background: var(--bf-gold) !important;
    color: var(--bf-green-deep) !important;
    box-shadow: 0 10px 24px -10px rgba(199, 154, 59, .6);
}
.btn-gold:hover { background: var(--bf-gold-bright) !important; color: var(--bf-green-deep) !important; }
.btn-ghost {
    background: transparent !important;
    color: var(--bf-green) !important;
    box-shadow: inset 0 0 0 2px var(--bf-green);
}
.btn-ghost:hover { background: var(--bf-green) !important; color: #fff !important; box-shadow: inset 0 0 0 2px var(--bf-green); }

/* ==========================================================================
   HEADER — top bar + sticky main nav
   ========================================================================== */

/* ---- Top utility bar ---- */
.bf-topbar {
    background: var(--bf-green-deep);
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: .84rem;
}
.bf-topbar-inner {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 9px 0; gap: 16px;
}
.bf-topbar-info {
    display: flex; align-items: center;
    gap: 20px; flex-wrap: wrap;
}
.bf-topbar-info a,
.bf-topbar-info span {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,.8); text-decoration: none;
    font-size: .83rem; transition: color .2s;
}
.bf-topbar-info a:hover { color: var(--bf-gold-bright); }
.bf-topbar-info i { color: var(--bf-gold-bright); font-size: .8rem; }
.bf-topbar-social { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bf-topbar-social a {
    width: 30px; height: 30px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--bf-gold-bright); font-size: .78rem;
    text-decoration: none;
    transition: background .25s, transform .25s, color .25s;
}
.bf-topbar-social a:hover {
    background: var(--bf-gold); color: var(--bf-green-deep);
    transform: translateY(-2px);
}

/* ---- Main nav bar ---- */
.bf-header { position: sticky; top: 0; z-index: 999; }
.bf-nav-bar {
    background: #fff;
    box-shadow: 0 2px 16px rgba(16,40,28,.07);
    transition: box-shadow .3s var(--bf-ease);
}
.bf-header.scrolled .bf-nav-bar { box-shadow: 0 4px 28px rgba(16,40,28,.13); }
.bf-nav-inner {
    display: flex; align-items: center;
    height: 70px; gap: 0;
}

/* Logo */
.bf-logo { flex: 0 0 auto; margin-right: auto; text-decoration: none; line-height: 1; }
.bf-logo img { height: 52px; width: auto; display: block; }

/* Desktop nav links */
.bf-main-nav { display: flex; align-items: stretch; }
.bf-main-nav > ul {
    display: flex; align-items: center;
    list-style: none; margin: 0; padding: 0; gap: 0;
}
.bf-main-nav > ul > li { position: relative; }
.bf-main-nav > ul > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 13px;
    font-family: var(--bf-font-body);
    font-weight: 600; font-size: .875rem;
    color: var(--bf-ink); text-decoration: none;
    white-space: nowrap; border-radius: 8px; position: relative;
    transition: color .25s var(--bf-ease), background .25s var(--bf-ease);
}
.bf-main-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 2px;
    height: 2px; background: var(--bf-gold);
    border-radius: 2px; transform: scaleX(0);
    transform-origin: left; transition: transform .3s var(--bf-ease);
}
.bf-main-nav > ul > li:hover > a,
.bf-main-nav > ul > li.bf-active > a { color: var(--bf-green); }
.bf-main-nav > ul > li:hover > a::after,
.bf-main-nav > ul > li.bf-active > a::after { transform: scaleX(1); }
.bf-drop-icon { font-size: .72rem; transition: transform .25s var(--bf-ease); }
.bf-has-drop:hover .bf-drop-icon { transform: rotate(180deg); }

/* Dropdown */
.bf-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 210px; background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px -12px rgba(16,40,28,.18);
    border: 1px solid var(--bf-line);
    padding: 8px; list-style: none; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s var(--bf-ease), transform .25s var(--bf-ease), visibility .25s;
    z-index: 10;
}
.bf-has-drop:hover .bf-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.bf-dropdown li a {
    display: block; padding: 10px 14px; border-radius: 8px;
    font-size: .86rem; font-weight: 500;
    color: var(--bf-ink); text-decoration: none; white-space: nowrap;
    transition: background .2s, color .2s;
}
.bf-dropdown li a:hover { background: var(--bf-green-soft); color: var(--bf-green); }

/* Nav end actions */
.bf-nav-actions {
    display: flex; align-items: center;
    gap: 10px; margin-left: 20px; flex-shrink: 0;
}
.bf-apply-btn {
    display: inline-flex; align-items: center;
    padding: 10px 22px;
    background: var(--bf-gold);
    color: var(--bf-green-deep) !important;
    font-family: var(--bf-font-body); font-weight: 700; font-size: .86rem;
    border-radius: var(--bf-pill); text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 18px -8px rgba(199,154,59,.65);
    transition: background .25s var(--bf-ease), transform .25s var(--bf-ease), box-shadow .25s var(--bf-ease);
}
.bf-apply-btn:hover {
    background: var(--bf-gold-bright); transform: translateY(-2px);
    box-shadow: 0 10px 26px -8px rgba(199,154,59,.8);
    color: var(--bf-green-deep) !important;
}
.bf-login-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: var(--bf-pill);
    border: 2px solid var(--bf-green);
    color: var(--bf-green) !important;
    font-family: var(--bf-font-body); font-weight: 600; font-size: .86rem;
    text-decoration: none; white-space: nowrap;
    transition: all .25s var(--bf-ease);
}
.bf-login-btn:hover { background: var(--bf-green); color: #fff !important; transform: translateY(-2px); }

/* Hamburger */
.bf-hamburger {
    display: none;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px;
    background: var(--bf-green); border: none; border-radius: 12px;
    cursor: pointer; flex-shrink: 0; padding: 0;
    transition: background .2s;
}
.bf-hamburger:hover { background: var(--bf-green-dark); }
.bf-hamburger span {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .3s var(--bf-ease), opacity .3s;
}
.bf-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bf-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bf-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.bf-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(3,35,20,.5); backdrop-filter: blur(3px);
    z-index: 1050; opacity: 0; visibility: hidden;
    transition: opacity .35s var(--bf-ease), visibility .35s;
}
.bf-drawer-overlay.open { opacity: 1; visibility: visible; }
.bf-drawer {
    position: fixed; top: 0; left: 0;
    width: min(320px, 85vw);
    height: 100vh; height: 100dvh;
    background: #fff; z-index: 1051;
    transform: translateX(-100%);
    transition: transform .4s var(--bf-ease);
    display: flex; flex-direction: column; overflow: hidden;
}
.bf-drawer.open { transform: translateX(0); }
.bf-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--bf-line); flex-shrink: 0;
}
.bf-drawer-logo { height: 44px; width: auto; }
.bf-drawer-close {
    width: 36px; height: 36px; display: grid; place-items: center;
    background: var(--bf-green-soft); border: none; border-radius: 10px;
    color: var(--bf-green); font-size: 1rem; cursor: pointer;
    transition: background .2s, color .2s;
}
.bf-drawer-close:hover { background: var(--bf-green); color: #fff; }
.bf-drawer-nav { flex: 1; padding: 10px 12px; overflow-y: auto; }
.bf-drawer-nav > ul { list-style: none; margin: 0; padding: 0; }
.bf-drawer-nav > ul > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-radius: 10px;
    font-weight: 600; font-size: .93rem;
    color: var(--bf-ink); text-decoration: none;
    transition: background .2s, color .2s;
}
.bf-drawer-nav > ul > li > a:hover,
.bf-drawer-nav > ul > li.bf-active > a { background: var(--bf-green-soft); color: var(--bf-green); }
.bf-drawer-subnav {
    display: none; list-style: none;
    padding: 2px 6px 6px 14px; margin: 0;
}
.bf-drawer-subnav.open { display: block; }
.bf-drawer-subnav li a {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-size: .87rem; font-weight: 500;
    color: var(--bf-muted); text-decoration: none;
    transition: background .2s, color .2s;
}
.bf-drawer-subnav li a:hover { background: var(--bf-green-soft); color: var(--bf-green); }
.bf-drawer-footer {
    padding: 14px 20px 24px;
    border-top: 1px solid var(--bf-line);
    display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.bf-drawer-footer .bf-apply-btn { justify-content: center; }
.bf-drawer-login {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border-radius: 10px;
    font-weight: 600; font-size: .88rem;
    color: var(--bf-green); text-decoration: none;
    border: 2px solid var(--bf-green);
    transition: all .2s;
}
.bf-drawer-login:hover { background: var(--bf-green); color: #fff; }

/* ==========================================================================
   GLOBAL SECTIONS / CARDS
   ========================================================================== */
.breadcumb-wrapper {
    position: relative;
    background-color: var(--bf-green-deep);
    background-size: cover;
    background-position: center;
    padding: 130px 0 90px;
}
.breadcumb-wrapper::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(3, 53, 31, .92), rgba(3, 53, 31, .6));
}
.breadcumb-wrapper .container { position: relative; z-index: 2; }
.breadcumb-title { color: #fff !important; font-weight: 600; font-size: clamp(2rem, 4vw, 3.1rem); }
.breadcumb-menu a, .breadcumb-menu li { color: rgba(255,255,255,.8); }

/* Soft card treatment for common theme blocks */
.about-style1, .media-style1, .download-item, .blog-card,
.bg-light {
    border-radius: var(--bf-radius) !important;
    transition: transform .35s var(--bf-ease), box-shadow .35s var(--bf-ease);
}
.about-style1:hover, .blog-card:hover, .download-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--bf-shadow);
}
.download-item { background: #fff !important; border: 1px solid var(--bf-line); box-shadow: var(--bf-shadow-sm); }

/* Hero refinement */
.hero-title { color: #fff !important; font-weight: 600; line-height: 1.08; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.hero-text { color: rgba(255,255,255,.9); font-size: 1.12rem; }
.hero-slide { position: relative; }
.hero-slide::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(3,53,31,.82) 0%, rgba(3,53,31,.45) 55%, rgba(3,53,31,.15) 100%);
    z-index: 1;
}
.hero-slide > .container, .hero-slide .hero-content { position: relative; z-index: 2; }

/* ---------- Scroll reveal ---------- */
.bf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--bf-ease), transform .7s var(--bf-ease); }
.bf-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Footer polish ---------- */
.footer-wrapper, footer { background: var(--bf-green-deep); }
.footer-social a {
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    margin-right: 8px;
    transition: transform .3s var(--bf-ease), background .3s var(--bf-ease);
}
.footer-social a i { color: var(--bf-gold-bright); }
.footer-social a:hover { background: var(--bf-gold); transform: translateY(-3px); }
.footer-social a:hover i { color: var(--bf-green-deep); }

/* ---------- Forms ---------- */
.form-control,
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], input[type="password"],
textarea, select {
    border-radius: 12px !important;
    border: 1px solid var(--bf-line) !important;
    padding: 14px 18px !important;
    background: #fff !important;
    color: var(--bf-ink) !important;
    transition: border-color .25s var(--bf-ease), box-shadow .25s var(--bf-ease) !important;
    box-shadow: none !important;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--bf-green) !important;
    box-shadow: 0 0 0 4px rgba(6, 93, 64, .12) !important;
    outline: none !important;
}
::placeholder { color: #9aa69e !important; opacity: 1; }

/* Contact info icons -> use brand gold instead of bright lemon */
.contact-left .media-icon,
.media-style1 .media-icon {
    border-radius: 14px;
}

/* ---------- Section rhythm ---------- */
.space, section.space { padding-top: 90px; padding-bottom: 90px; }
.title-area { margin-bottom: 2.2rem; }
.sec-title { margin-top: .5rem; }

/* Selection */
::selection { background: var(--bf-green); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .bf-main-nav > ul > li > a { padding: 8px 9px; font-size: .83rem; }
    .bf-apply-btn { padding: 9px 16px; font-size: .82rem; }
    .bf-login-btn { padding: 8px 14px; font-size: .82rem; }
    .bf-logo img { height: 46px; }
}
@media (max-width: 1023px) {
    .bf-main-nav,
    .bf-nav-actions .bf-apply-btn,
    .bf-nav-actions .bf-login-btn { display: none; }
    .bf-hamburger { display: flex; }
    .bf-topbar-hours { display: none; }
    .bf-nav-inner { height: 64px; }
    .bf-logo img { height: 44px; }
}
@media (max-width: 767px) {
    .bf-topbar { display: none; }
}
@media (max-width: 991px) {
    .breadcumb-wrapper { padding: 100px 0 64px; }
    .breadcumb-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .space, section.space { padding-top: 64px; padding-bottom: 64px; }
    .hero-title { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
    .hero-text { font-size: 1rem; }
    .hero-content { padding: 0 18px; }
}