/*
Theme Name: C2-Holliday Theme
Description: A custom theme for the C2-Holliday website.
Author: Jesse Corkill
Version: 1.1
Requires at least: 6.3
Text Domain: c2-holliday
*/
:root{
    
    --wildcat-blue: #14438f;
    --primary-font: "Roboto Condensed", sans-serif;
    --secondary-font: "Lato", sans-serif;
    body{
        p{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 12px;
            color: #000;        
        }
        .btn-primary {
            background-color: var(--wildcat-blue);
            border-color: var(--wildcat-blue);
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.025rem;
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background-color: var(--wildcat-blue);
            border-color: var(--wildcat-blue);
        }

        .hero-banner {
            min-height: 440px;
            background-image: url("/wp-content/uploads/2026/08/classRoomBWide.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        /*
        * Creates the white background and soft fade across the left side.
        * It sits above the background image but behind the content.
        */
        .hero-banner::before {
            content: "";
            position: absolute;
            inset: 0;
            width: 58%;
            z-index: 0;
            pointer-events: none;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 1) 45%,
                rgba(255, 255, 255, 0.92) 65%,
                rgba(255, 255, 255, 0) 100%
            );
        }

        .hero-banner .container {
            position: relative;
            z-index: 1;
        }

        .hero-heading {
            color: #111;
            font-size: clamp(2rem, 4vw, 3.5rem);
            line-height: 1.08;
        }

        .hero-heading .text-primary {
            color: #2555a6 !important;
        }

        .hero-description {
            color: #333;
            font-size: 1rem;
            line-height: 1.6;
        }



        .school-quick-links {
            --quick-links-blue: #174c98;

            position: relative;
            overflow: hidden;
            padding: 1.5rem 0 3.25rem;
            color: #fff;
            background:
                radial-gradient(
                circle at 50% 0%,
                rgba(42, 102, 182, 0.45),
                transparent 60%
                ),
                linear-gradient(90deg, #164b96 0%, #16478f 50%, #133f83 100%);
            }

            .quick-link-column {
            position: relative;
            }

            /* Vertical dividers between desktop items */
            .quick-link-column:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 76px;
            background-color: rgba(255, 255, 255, 0.55);
            }

            .quick-link {
            position: relative;
            z-index: 2;
            display: flex;
            min-height: 90px;
            padding: 0.15rem 1rem;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 0.85rem;
            color: #fff;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            transition:
                color 0.2s ease,
                transform 0.2s ease;
            }

            .quick-link:hover,
            .quick-link:focus-visible {
            color: #ffd54a;
            transform: translateY(-3px);
            }

            .quick-link:focus-visible {
            outline: 2px solid #ffd54a;
            outline-offset: 5px;
            }

            .quick-link-icon {
            display: flex;
            height: 45px;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            line-height: 1;
            }

            .quick-link span {
            font-size: 0.8rem;
            font-weight: 700;
            line-height: 1.2;
            }

            .quick-links-brush {
            position: absolute;
            z-index: 1;
            right: 0;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 32px;
            object-fit: fill;
            object-position: bottom;
            pointer-events: none;
            }

            /* Tablet and mobile layout */
            @media (max-width: 767.98px) {
            .school-quick-links {
                padding-top: 1.5rem;
                padding-bottom: 3.25rem;
            }

            .quick-link-column {
                margin-bottom: 1.5rem;
            }

            .quick-link-column:not(:last-child)::after {
                display: none;
            }

            .quick-link {
                min-height: 80px;
            }
            }

        /* Mobile layout */
        @media (max-width: 767.98px) {
            .hero-banner {
                min-height: 520px;
                background-position: 68% center;
            }

            .hero-banner::before {
                width: 100%;
                background: linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.98) 0%,
                    rgba(255, 255, 255, 0.92) 60%,
                    rgba(255, 255, 255, 0.25) 100%
                );
            }

            .hero-content {
                max-width: 80%;
            }
        }
        /* Information */
        .information{            
            .row{
                .content-container{
                    align-content: center;
                    img{
                        max-width: 100%;
                    }

                }
                .calendar-container{
                    align-content: center;
                    .calendar{
                        background-color: #f1f1f1;
                        padding: 1em;
                        h4{
                            color: var(--wildcat-blue);
                            font-weight: bold;
                            text-transform: uppercase;
                            font-size: 1.25em;
                        }
                        .calendar-item{
                            margin: 0 0 .5em 0;
                            border-bottom: 1px #e3e3e3 solid;                            
                            padding-bottom: .5em;
                            .date-box{
                                display: flex;
                                flex-direction: column;
                                border: solid 1px #fdfdfd;
                                background-color: #fdfdfd;
                                justify-content: center;
                                aspect-ratio: 1/1;
                                p{
                                    text-align: center;
                                    margin: 0;
                                }
                                .day{
                                    font-size: 2em;
                                }
                            }
                            .info-box{
                                p{
                                    margin-bottom: .5rem;
                                }
                            }
                            .chevron{
                                align-content: center;
                            }
                        }
                    }
                }

            }
        }
        footer{
            background-color: #f3f3f3;
            padding-top: 2em;
            padding-bottom:2em;
            .tagline-container{
                p{
                    text-align: center;
                    color: var(--wildcat-blue);
                    text-transform: uppercase;
                    font-size: 1em;
                    font-weight: 500;
                }
            }
            .values-container{
                .item{
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                    border-right: solid 2px black;

                    i{
                        color: var(--wildcat-blue);
                        font-size: 3em;
                    }
                    p{
                        font-size: 1em;
                        text-transform: uppercase;
                        font-weight: 500;
                        margin-top: 1em;

                    }
                }
                .item::after{
                    content: "";
                    display: block;
                    width: 1px;
                    height: 50%;
                    position: absolute;
                    right: 0;
                    color: #fff;
                    border-left: solid 1px white;
                }

            }
            .logo-container{
                position: relative;
                a{
                    max-width:100%;
                    width: 100%;
                    img{
                        max-width: 100%;
                        width: 100%;
                        height: auto;    
                    }
                }

            }
        }
        .page-heading{
            background-image: url(/wp-content/uploads/2026/08/ChatGPT-Image-Aug-3-2026-11_19_54-PM.png);
            background-position: left;
            background-size: cover;
            background-repeat: no-repeat;
            background-color: var(--wildcat-blue);
        }
    }
}

.holliday-skip-link {
    position: absolute;
    top: 0;
    left: 1rem;
    transform: translateY(-150%);
    background: #fff;
    color: #14438f;
    padding: .75rem 1rem;
    z-index: 100000;
}

.holliday-skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #14438f;
}