/* ==========================================================================
   KTVC THEME – PHASE 11: COOKIE BANNER, ANNOUNCEMENT BAR & PRINT STYLES
   ========================================================================== */

/* ==========================================================================
   1. ANNOUNCEMENT BAR
   ========================================================================== */
.announcement-bar {
    position: relative;
    z-index: calc(var(--z-sticky) + 1);
    padding-block: var(--space-2);
    font-size: var(--text-sm);
    transition: transform 300ms ease, opacity 300ms ease;
}

.announcement-bar[hidden] {
    display: none;
}

/* Type variants */
.announcement-bar--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.announcement-bar--warning {
    background: #92400e;
    color: var(--color-white);
}

.announcement-bar--success {
    background: #14532d;
    color: var(--color-white);
}

.announcement-bar--info {
    background: #1e3a5f;
    color: var(--color-white);
}

.announcement-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    padding-right: var(--space-10); /* room for dismiss button */
    position: relative;
}

.announcement-bar__icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Warning variant gets pulse animation on icon */
.announcement-bar--warning .announcement-bar__icon i {
    animation: pulse-warn 2s ease infinite;
}

@keyframes pulse-warn {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.announcement-bar__text {
    margin: 0;
    line-height: var(--leading-normal);
    text-align: center;
}

.announcement-bar__text a {
    color: var(--color-white);
    font-weight: var(--font-semi);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.announcement-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(255,255,255,.2);
    color: var(--color-white);
    border: 1px solid rgba(255,255,255,.4);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.875rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semi);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.announcement-bar__cta:hover {
    background: rgba(255,255,255,.3);
    color: var(--color-white);
}

.announcement-bar--primary .announcement-bar__cta {
    background: var(--color-secondary);
    color: var(--color-dark);
    border-color: var(--color-secondary);
}

.announcement-bar--primary .announcement-bar__cta:hover {
    background: var(--color-secondary-dark);
    color: var(--color-dark);
}

.announcement-bar__cta i {
    font-size: 0.65rem;
}

.announcement-bar__dismiss {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.8);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.announcement-bar__dismiss:hover {
    background: rgba(255,255,255,.25);
    color: var(--color-white);
}

/* Slide-up animation on dismiss */
.announcement-bar.is-dismissing {
    animation: bar-dismiss 300ms ease forwards;
}

@keyframes bar-dismiss {
    to {
        max-height: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
    }
}

/* ==========================================================================
   2. COOKIE CONSENT BANNER
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: var(--space-6);
    left: var(--space-6);
    right: var(--space-6);
    max-width: 900px;
    margin-inline: auto;
    z-index: var(--z-modal);
    background: var(--color-dark);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: transform 400ms cubic-bezier(.16,1,.3,1),
                opacity    400ms ease,
                visibility 400ms ease;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-10) var(--space-5) var(--space-6);
    flex-wrap: wrap;
}

.cookie-banner__content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex: 1;
    min-width: 280px;
}

.cookie-banner__icon {
    font-size: 1.75rem;
    color: var(--color-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

.cookie-banner__text {
    flex: 1;
}

.cookie-banner__title {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-white);
    margin-bottom: var(--space-1);
}

.cookie-banner__desc {
    font-size: var(--text-sm);
    color: rgba(255,255,255,.7);
    line-height: var(--leading-loose);
    margin: 0;
}

.cookie-banner__link {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.cookie-banner__link:hover {
    color: var(--color-secondary-light);
}

.cookie-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.cookie-banner__btn-decline {
    color: rgba(255,255,255,.7);
    border-color: rgba(255,255,255,.25);
}

.cookie-banner__btn-decline:hover {
    color: var(--color-white);
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
}

.cookie-banner__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.08);
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cookie-banner__close:hover {
    background: rgba(255,255,255,.15);
    color: var(--color-white);
}

/* ==========================================================================
   3. PRINT STYLES
   ========================================================================== */
@media print {

    /* ── Layout resets ──────────────────────────────────── */
    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
        animation: none !important;
        transition: none !important;
    }

    html,
    body {
        font-size: 11pt;
        line-height: 1.5;
        color: #000 !important;
        background: #fff !important;
    }

    /* ── Hide non-print elements ─────────────────────────── */
    .site-header,
    .header-topbar,
    .header-main,
    .primary-nav,
    .nav-overlay,
    #back-to-top,
    .cookie-banner,
    .announcement-bar,
    .footer-cta-strip,
    .footer-social,
    .footer-bottom,
    .breadcrumbs,
    .pagination,
    .btn,
    .courses-filter,
    .search-filter-tabs,
    .contact-form-col,
    .contact-social-links,
    .contact-map-wrap,
    .contact-map-placeholder,
    .archive-sidebar,
    .single-course-sidebar,
    .single-dept-layout > aside,
    .single-post-nav,
    .single-post-comments,
    .testimonials-controls,
    .testimonials-cta,
    .hero-slider,
    .hero-stats-bar,
    .gallery-section,
    .partners-section,
    .stats-strip,
    .dept-card__footer,
    .course-card__footer,
    .news-events-view-all,
    .search-results-bar,
    .courses-section__footer,
    .about-cta-row,
    .dept-page-hero__icon,
    .error-404-wrap,
    #site-footer .footer-main,
    .hero-scroll-indicator,
    .page-hero .breadcrumbs {
        display: none !important;
    }

    /* ── Page setup ──────────────────────────────────────── */
    @page {
        margin: 1.5cm 2cm;
        size: A4;
    }

    @page :first {
        margin-top: 2cm;
    }

    /* ── Typography ──────────────────────────────────────── */
    h1 { font-size: 20pt; margin-bottom: 12pt; page-break-after: avoid; }
    h2 { font-size: 16pt; margin-bottom: 10pt; page-break-after: avoid; }
    h3 { font-size: 13pt; margin-bottom: 8pt;  page-break-after: avoid; }
    h4 { font-size: 11pt; margin-bottom: 6pt;  page-break-after: avoid; }

    p, li { orphans: 3; widows: 3; }

    /* ── Links ───────────────────────────────────────────── */
    a {
        color: #000 !important;
        text-decoration: underline;
    }

    /* Show URL after external links */
    a[href^="http"]::after,
    a[href^="https"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    /* Don't show URL for nav/button links */
    .site-footer a::after,
    .btn::after,
    .nav-link::after {
        content: none;
    }

    /* ── Page hero (inner pages) ─────────────────────────── */
    .page-hero {
        background: none !important;
        color: #000 !important;
        padding: 0 0 12pt;
        border-bottom: 2pt solid #780403;
        margin-bottom: 20pt;
    }

    .page-hero__title {
        font-size: 22pt;
        color: #780403 !important;
    }

    .page-hero__subtitle {
        color: #333 !important;
        font-size: 11pt;
    }

    /* ── KTVC Branding header for print ─────────────────── */
    body::before {
        content: 'Kipkabus Technical and Vocational College (KTVC)';
        display: block;
        font-family: Georgia, serif;
        font-size: 13pt;
        font-weight: bold;
        color: #780403;
        text-align: center;
        padding-bottom: 8pt;
        border-bottom: 1pt solid #780403;
        margin-bottom: 16pt;
    }

    /* ── Footer for print ────────────────────────────────── */
    #site-footer {
        background: none !important;
        color: #000 !important;
        border-top: 1pt solid #ccc;
        padding: 12pt 0 0;
        margin-top: 24pt;
    }

    .footer-copyright {
        color: #555 !important;
        font-size: 9pt;
        display: block;
        text-align: center;
    }

    .footer-copyright a { color: #555 !important; }

    /* ── Cards and grids ─────────────────────────────────── */
    .courses-grid,
    .dept-grid,
    .blog-grid,
    .staff-grid,
    .vmv-grid {
        display: block !important;
    }

    .course-card,
    .dept-card,
    .blog-card,
    .staff-card {
        page-break-inside: avoid;
        border: 1pt solid #ccc !important;
        margin-bottom: 12pt;
        box-shadow: none !important;
    }

    /* ── Course & Dept single pages ──────────────────────── */
    .single-course-layout,
    .single-dept-layout {
        display: block !important;
    }

    .course-facts-card {
        border: 1pt solid #ccc !important;
        margin-bottom: 12pt;
        page-break-inside: avoid;
    }

    .course-facts-card__title {
        background: #780403 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Tenders table ───────────────────────────────────── */
    .tenders-table-wrap {
        overflow: visible !important;
    }

    .tenders-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 10pt;
    }

    .tenders-table thead {
        background: #780403 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tenders-table th,
    .tenders-table td {
        border: 0.5pt solid #ccc !important;
        padding: 6pt 8pt !important;
        color: #000 !important;
    }

    .tenders-table tr { page-break-inside: avoid; }

    .tender-status-badge {
        border: 0.5pt solid #ccc !important;
        background: none !important;
        color: #000 !important;
    }

    /* ── Careers ─────────────────────────────────────────── */
    .career-card {
        border: 1pt solid #ccc !important;
        margin-bottom: 12pt;
        page-break-inside: avoid;
    }

    .career-card__header {
        border-bottom: 0.5pt solid #ccc !important;
    }

    /* ── Downloads ───────────────────────────────────────── */
    .download-row {
        border: 0.5pt solid #ccc !important;
        margin-bottom: 6pt;
        page-break-inside: avoid;
    }

    /* ── Events ──────────────────────────────────────────── */
    .event-archive-card {
        border: 0.5pt solid #ccc !important;
        margin-bottom: 6pt;
        page-break-inside: avoid;
    }

    .event-archive-card__date {
        background: #780403 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── News / Blog ─────────────────────────────────────── */
    .single-post-thumb,
    .news-card__thumb,
    .blog-card__thumb-wrap {
        max-width: 40%;
        float: left;
        margin-right: 12pt;
        margin-bottom: 12pt;
    }

    /* ── Contact page ────────────────────────────────────── */
    .contact-info-strip {
        background: none !important;
    }

    .contact-info-strip__grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12pt !important;
    }

    .contact-info-card {
        border: 0.5pt solid #ccc;
        padding: 8pt;
        page-break-inside: avoid;
    }

    .contact-info-card__icon {
        display: none;
    }

    .contact-info-card__body h3 {
        color: #780403 !important;
        font-size: 10pt;
    }

    .contact-info-card__body p,
    .contact-info-card__body a {
        color: #000 !important;
        font-size: 10pt;
    }

    /* ── About / VMV cards ───────────────────────────────── */
    .about-vm-cards {
        display: block !important;
    }

    .about-vm-card {
        border: 0.5pt solid #ccc !important;
        margin-bottom: 8pt;
        page-break-inside: avoid;
    }

    .vmv-card {
        border: 0.5pt solid #ccc !important;
        background: none !important;
        margin-bottom: 12pt;
        page-break-inside: avoid;
    }

    .principal-grid {
        display: block !important;
    }

    .principal-photo {
        max-width: 120pt;
        float: left;
        margin-right: 12pt;
        margin-bottom: 12pt;
    }

    /* ── Stats strip ─────────────────────────────────────── */
    .stats-strip__inner,
    .hero-stats-bar__inner {
        display: none !important;
    }

    /* ── Search ──────────────────────────────────────────── */
    .search-result-item {
        display: block !important;
        border: 0.5pt solid #ccc !important;
        padding: 8pt !important;
        margin-bottom: 8pt;
        page-break-inside: avoid;
    }

    .search-result-item__thumb-link,
    .search-result-item__thumb-placeholder {
        display: none !important;
    }

    .search-result-item__cta {
        display: none !important;
    }

    /* ── Page breaks ─────────────────────────────────────── */
    .section { page-break-before: auto; }
    article  { page-break-inside: avoid; }
    table    { page-break-inside: auto; }
    tr       { page-break-inside: avoid; page-break-after: auto; }
    thead    { display: table-header-group; }
    tfoot    { display: table-footer-group; }

    /* ── Images ──────────────────────────────────────────── */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* ── Utility ─────────────────────────────────────────── */
    .aos { opacity: 1 !important; transform: none !important; }

} /* end @media print */

/* ==========================================================================
   4. RESPONSIVE — MOBILE (max 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

    .announcement-bar__inner {
        flex-direction: column;
        text-align: center;
        padding-right: var(--space-6);
        gap: var(--space-2);
    }

    .announcement-bar__dismiss {
        position: static;
        transform: none;
        margin-top: var(--space-1);
    }

    .cookie-banner {
        bottom: var(--space-3);
        left: var(--space-3);
        right: var(--space-3);
        border-radius: var(--radius-lg);
    }

    .cookie-banner__inner {
        flex-direction: column;
        padding: var(--space-5) var(--space-5) var(--space-4);
        gap: var(--space-4);
    }

    .cookie-banner__content {
        min-width: unset;
    }

    .cookie-banner__actions {
        width: 100%;
        justify-content: stretch;
    }

    .cookie-banner__actions .btn {
        flex: 1;
        justify-content: center;
    }

    .cookie-banner__close {
        top: var(--space-2);
        right: var(--space-2);
    }
}