@using DotNetNuke.Web.Client.ClientResourceManagement;

@{
    ClientResourceManager.RegisterStyleSheet(Dnn.DnnPage, "https://use.fontawesome.com/releases/v5.7.0/css/all.css");
}

/* New containers for separated mobile image and header content */
.kcHero-image-mobile {
    display: none;
}
.kcHero-header-content-mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .kcHero-image-mobile {
        display: block;
        position: relative;
        width: 100%;
        padding-top: 50% !important; /* 2:1 aspect ratio for a shorter image */
        overflow: hidden;
        z-index: 1; /* Ensure image is below header content */
    }
    .kcHero-header-content-mobile {
        display: block;
        width: 100%;
        background: none;
        position: relative; /* Ensure proper stacking */
        margin-top: 0 !important;
        z-index: 2; /* Ensure header content is above image */
        padding-left: 0;
        padding-right: 0;
    }
    .kcHero-header-content-mobile .kcHero-heading {
        padding: 1.5rem 1rem; /* Increase padding for better spacing */
        height: auto;
    }
    .kcHero-header-content-mobile .kcHero-headingText {
        margin-top: 1rem; /* Add spacing between heading and subheading */
    }
    /* Hide desktop header content on mobile */
    .kcHero-header-content-desktop {
        display: none !important;
    }
    /* Hide old .kcHero-image for mobile static image */
    .kcHero-image {
        display: none !important;
    }
    /* Ensure header elements stack below the image instead of overlapping */
    .kcHero-header-content-mobile .kcHero-ribbon,
    .kcHero-header-content-mobile .kcHero-heading,
    .kcHero-header-content-mobile .kcHero-headingText {
        position: static !important;
        bottom: auto !important;
        top: auto !important;
        z-index: 2 !important;
        width: 100% !important;
    }
    .kcHero-header-content-mobile .kcHero-heading {
        padding: 1rem 0.75rem !important;
        height: auto !important;
    }
    /* KC-specific mobile header: preserve KC visual (rounded white heading)
       but reduce overlap and keep header directly below the image */
    .kcHero-header .kcHero-heading,
    .kcHero-header-content-mobile .kcHero-heading {
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-20px) !important; /* slight overlap */
        top: auto !important;
        border-top-left-radius: 79px !important;
        border-top-right-radius: 79px !important;
        background-color: #ffffff !important;
        padding: 12px 32px !important;
        width: auto !important;
        box-sizing: border-box !important;
        display: inline-block !important;
        z-index: 3 !important;
    }
    .kcHero-header .kcHero-headingText,
    .kcHero-header-content-mobile .kcHero-headingText {
        transform: none !important;
        white-space: nowrap !important;
        font-size: 1.125rem !important;
        padding: 0 !important;
    }
    .kcHero-header .kcHero-ribbon,
    .kcHero-header-content-mobile .kcHero-ribbon {
        position: relative !important;
        border-top: 5px solid #fff !important;
        margin-top: -5px !important;
    }
}
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;800&display=swap');

.kcHero-config {
    transition: 0.5s;
    color: white;
    background-position: center;
    background-size: cover;
    height: 100%;
}

    .kcHero-config:hover {
        background-color: rgba(0,0,0,0.5);
    }

#headerGradient{ 
    display: none;
}
.kcHero-message {
    color: white;
    font-size: 16px;
    padding: 16px 32px;
    transition: 0.5s;
    display: none;
    background-color: rgba(0,0,0,0.5);
}

.kcHero-config:hover .kcHero-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    padding: 12px 24px;
    border-radius: 5px;
    text-align: center;
    display: block;
    text-align: center;
    font-size: 16px;
    border-width: 200px;
    border: 2px solid white;
}

.kcHero-configBtn {
    position: absolute;
    top: 57%;
    left: 50%;
    padding: 12px 24px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 5px;
    text-align: center;
    transition: 0.5s;
    display: block;
    text-align: center;
    border-width: 200px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    background-color: rgba(0,0,0,0.5);
}

    .kcHero-configBtn:hover {
        text-decoration: none;
        color: white;
    }

    .kcHero-configBtn:focus {
        text-decoration: none;
        color: white;
    }


.kcHero-container, .kcHero-image {
    position: relative;
    min-width: 100%;
    max-height: 900px;
    max-width: 2100px;
    width: auto;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    overflow-x: hidden;
    overflow-y: hidden;
    left: 50%;
    transform: translateX(-50%);
}
.kcHeaderGradient {
    height: 17vw;
    width: 100%;
    background-image: linear-gradient(#000 0%, transparent 100%);
    position: absolute;
    max-width: 2100px;
    z-index: 1;
    pointer-events: none;
}

.kcHero-header {
    max-height: 400px;
    left: 50%;
    transform: translateX(-50%);
}

.kcHero-heading {
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
    pointer-events: none;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: -40px;
    background-color: white;
    border-top-left-radius: 79px;
    border-top-right-radius: 79px;
    padding: 40px 80px 0px;
    z-index: 1;
    font-size: 40px;
    height: 50px;
}

.hideDisplay {
    display: none;
}

.kcHero-ribbon {
    position: absolute;
    width: 100% !important;
    border-top: 5px solid #fff !important;
    z-index: 3;
    bottom: 10px;
}

.kcHero-headingText {
    transform: translateY(-75%);
    font-family: 'League Spartan', sans-serif;
    font-weight: 400;
    color: #302009;
    white-space: nowrap;
}

.kcHero-edit {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    padding: 12px 24px;
    transform: translate(50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 5px;
    text-align: center;
    transition: 0.5s;
    display: none;
    text-align: center;
    border-width: 200px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    background-color: rgba(0,0,0,0.5);
}

.kcHero-container:hover + .kcHero-edit {
    display: block;
}

.kcHero-edit:hover {
    display: block;
}

.kcHero-edit:hover, .kcHero-delete:hover {
    color: white;
    text-decoration: none;
    background-color: rgba(0,0,0,0.8);
}

.kcHero-delete {
    position: absolute;
    top: 60%;
    left: 50%;
    z-index: 1000;
    padding: 12px 24px;
    transform: translate(-10%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 5px;
    text-align: center;
    transition: 0.5s;
    display: block;
    text-align: center;
    border-width: 200px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    background-color: rgba(0,0,0,0.5);
}

.kcHero-container, .kcHero-image {
    height: unset;
    max-height: 860px !important;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.kcHero-image img {
    width: 100%;
}

.kcHero-image.kcHero-header {
    min-height: unset !important;
}

.kc-hero-pause {
    position: absolute;
    bottom: 20px;
    right: 10px;
    width: 22px;
    height: 25px;
    text-align: center;
}

    .kc-hero-pause button {
        background-size: contain;
        background-repeat: no-repeat;
        border: none;
        background-color: transparent;
        width: 22px;
        height: 25px;
    }

.kc-hero-pause button[data-action="pause"] {
    background-image: url('/DesktopModules/MVC/KeeterHero/Resources/Images/pause.png');    
    width: 18px;
}

        .kc-hero-pause button[data-action="play"] {
            background-image: url('/DesktopModules/MVC/KeeterHero/Resources/Images/play.png');
        }


.kcHero-mobile-container {
    display: none;
}

@media screen and (max-width: 768px) {
    .kcHero-desktop-container {
        display: none;
    }

    .kcHero-mobile-container {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    .kcHero-header {
        max-height: 400px !important;
    }

    .kcHero-headingText {
        font-size: 40px;
    }

    .kcHero-container {
        color: white;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@media screen and (max-width: 767px) {
    .kcHero-header {
        max-height: 400px !important;
    }

    div .kcHero-image {
        max-height: 600px !important;
    }

    .kcHero-headingText {
        font-size: 35px;
    }

    .kcHero-heading {
        padding: 40px 40px 0px;
    }

    .kcHero-ribbon {
        position: absolute;
        width: 100% !important;
        border-top: 5px solid #fff !important;
        z-index: 3;
        bottom: 9px;
    }

     .kcHeaderGradient {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .kcHero-header {
        max-height: 400px !important;
    }

    div .kcHero-image {
        max-height: 600px !important;
    }
    .kcHero-headingText {
        font-size: 30px;
    }

    .kcHero-heading {
        padding: 40px 45px 0px;
    }

    .kcHero-ribbon {
        position: absolute;
        width: 100% !important;
        border-top: 5px solid #fff !important;
        z-index: 3;
        bottom: 10px;
    }
}

@media screen and (max-width: 768px) {
    .desktop-hero-image {
        display: none;
    }

    .kcHero-image {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: unset !important;
        max-height: unset !important;
        min-height: unset !important;
        padding-top: 50% !important; /* 2:1 aspect ratio for a shorter image */
    }

    .mobile-hero-image {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: inline;
        object-fit: cover;
        object-position: center;
    }

    .kcHero-header.kcHero-image {
        padding-top: 62.5% !important;
    }

    .kcHero-header {
        max-height: 400px !important;
    }

    div .kcHero-image {
        max-height: 300px !important;
    }

    .kcHero-headingText {
        font-size: 25px;
    }

    .kcHero-heading {
        padding: 40px 50px 0px;
        height: 70px;
    }

    .kcHero-ribbon {
        position: absolute;
        width: 100% !important;
        z-index: 3;
        bottom: 9px;
    }
}

.kcHero-vimeo-container {
    position: relative;
    background-size:cover;
    width: 100%;
}

.kcHero-vimeo-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}


/*CofO Site Heading Styling*/

.cofo-hero-hr {
    margin-right: 50%;
    border-color: white;
    color: white;
}

.cofo-headline {
    min-height: 55rem;
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100% !important;
    padding: 2rem;
    z-index: 3;
    display: contents;
}

.cofo-hero-content-right {
    position: absolute;
    bottom: 4rem;
    width: 33%;
    background-color: #710a2c;
    color: white;
    padding: 2rem;
    right: 0;
}
    .cofo-hero-content-right h1 {
        text-transform: uppercase;
        font-family: "Times New Roman", Times, serif;
        letter-spacing: 4px;
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1.2;
        text-align: left;
    }

.cofo-hero-content-left {
    position: absolute;
    bottom: 4rem;
    width: 33%;
    background-color: #710a2c;
    color: white;
    padding: 2rem;
    left: 0;
}
    .cofo-hero-content-left h1 {
        text-transform: uppercase;
        font-family: "Times New Roman", Times, serif;
        letter-spacing: 4px;
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1.2;
    }

.cofo-hero-content-center {
    left: 0;
    position: absolute;
    bottom: 4rem;
    width: 100% !important;
    background-color: #710a2c;
    color: white;
    padding: 2rem;
    text-align: center !important;
    margin-top: auto !important;
    text-shadow: 0px 0px 64px rgba(0, 0, 0, 1);
    height: 0%;
}
    .cofo-hero-content-center h1 {
        text-transform: uppercase;
        letter-spacing: 14px;
        font-size: 60pt;
        font-weight: bold;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0rem 0.6rem;
        font-family: "Times New Roman", Times, serif;
        margin-top: 0;
        margin-bottom: 0.5rem;
        bottom: 0%;
    }

/* Media query for smaller screens */
@media screen and (max-width: 768px) {

    .cofo-hero-content-right,
    .cofo-hero-content-left,
    .cofo-hero-content-center {
        position: relative; /* Change from absolute to relative to prevent overlap */
        width: 100%;
        padding: 1.5rem;
        bottom: auto; /* Remove bottom alignment */
        margin-top: 0 !important; /* Add spacing below the image */
    }
        .cofo-hero-content-right h1,
        .cofo-hero-content-left h1 {
            text-align: left;
        }

    .cofo-hero-content-center {
        position: relative; /* Change from absolute to relative */
        text-shadow: none;
        height: auto; /* Allow content to expand naturally */
        bottom: auto;
        margin-top: 0 !important; /* Add spacing below the image */
    }
        .cofo-hero-content-center h1 {
            font-size: 40pt;
            letter-spacing: 8px;
            margin-bottom: auto;
            left: 0%;
        }

    .cofo-hero-hr,
    .cofo-hero-content-right hr {
        margin-left: 0;
        margin-right: 75%;
        border-color: white;
        color: white;
    }
}

@media screen and (max-width: 768px) {

    .kcHero-image {
           padding-top: 140% !important; /* Slightly taller than desktop, but less extreme */
    }

    .cofo-hero-content-center {
        position: relative; /* Change from absolute to relative */
        text-shadow: none;
        height: auto; /* Allow content to expand naturally */
        bottom: auto;
        margin-top: 1rem; /* Add spacing below the image */
    }
        .cofo-hero-content-center h1 {
            font-size: 20pt;
            letter-spacing: 4px;
            margin-bottom: 1rem;
         }

    .cofo-hero-hr,
    .cofo-hero-content-right hr {
        margin-right: 50%;
    }
}
/* 01.05.00: the desktop image fills a fixed banner box and is cropped around the editor's
   focal point, as the mobile image already was. Before this the box took the image's own
   height (capped at 860px) and anything taller was cut off at the bottom. The ratios match
   the banners each site was designed around: 2560x1000 on cofo.edu, 2100x947 on Keeter. */
@media screen and (min-width: 769px) {
    .kcHero-desktop-container .kcHero-image {
        aspect-ratio: 2.56 / 1;
        height: auto;
    }

    .kcHero-site-keeter .kcHero-desktop-container .kcHero-image {
        aspect-ratio: 2.22 / 1;
    }

    .kcHero-desktop-container .desktop-hero-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* 01.05.00: a centered heading sits inside its maroon band. It used to be pinned to the
   band's bottom edge with a fixed band height, so a name that wrapped ("Physical Education,
   Health and Recreation") climbed up over the photo. The band now grows with the text, and the
   text scales down on narrower screens so long names wrap less. */
.cofo-hero-content-center h1 {
    position: static;
    margin: 0;
    line-height: 1;
    overflow-wrap: break-word;
}

@media screen and (min-width: 769px) {
    .cofo-hero-content-center {
        height: auto;
        padding: 0.5rem 1rem;
    }

    .cofo-hero-content-center h1 {
        font-size: clamp(32px, 4.2vw, 60pt);
        letter-spacing: clamp(4px, 0.73vw, 14px);
    }
}

/* Phones: every heading style uses the same size, so a left or right heading no longer
   looks half again as big as a centered one. Slightly smaller on the narrowest phones so a long
   word ("ACCREDITATION") still fits at 320px. */
@media screen and (max-width: 768px) {
    .cofo-hero-content-center h1,
    .cofo-hero-content-left h1,
    .cofo-hero-content-right h1 {
        font-size: clamp(20px, 7vw, 20pt);
        /* Sized from the heading's own width where supported, so the text also fits when
           something (DNN's admin sidebar) narrows the page without narrowing the screen. */
        font-size: clamp(16px, 7cqw, 20pt);
        letter-spacing: 4px;
        line-height: 1.2;
        margin: 0;
    }
}

/* Every heading style uses the same bold weight (left and right were 500, centered was bold). */
.cofo-hero-content-left h1,
.cofo-hero-content-right h1 {
    font-weight: bold;
}

/* A heading panel too tall to fit on the photo at this width (set by kcHeroFitHeadings in the
   view) sits below the photo as a full-width band, the same layout phones use. */
.kcHero-heading-below .cofo-hero-content-left,
.kcHero-heading-below .cofo-hero-content-right,
.kcHero-heading-below .cofo-hero-content-center {
    position: static;
    width: 100% !important;
    bottom: auto;
    height: auto;
}

/* Keeter phone headings: the white tab held 40px text that was not allowed to wrap, so a long
   name ("Tour Group Operators", "Catering Group Inquiry") ran off both sides of the screen.
   It now scales with the screen and wraps inside the tab. */
@media screen and (max-width: 768px) {
    .kcHero-header-content-mobile .kcHero-heading {
        max-width: calc(100% - 24px) !important;
    }

    .kcHero-header-content-mobile .kcHero-headingText {
        white-space: normal !important;
    }

    .kcHero-header-content-mobile .kcHero-headingText h1 {
        font-size: clamp(24px, 8vw, 40px);
        font-size: clamp(22px, 8cqw, 40px);
        line-height: 1.15;
        margin: 0;
        overflow-wrap: break-word;
    }
}

/* Below 1440px the centered name bar sits under the photo instead of over it, as on phones: on
   these shorter boxes it hid about a fifth of the photo. Wide monitors keep the overlay. */
@media screen and (min-width: 769px) and (max-width: 1439px) {
    .cofo-hero-content-center {
        position: static;
        bottom: auto;
    }
}

/* Side (left/right) headings scale down on narrower desktops so a long word fits a box that is
   a third of the screen wide; full 2.5rem from about 1540px up. */
@media screen and (min-width: 769px) {
    .cofo-hero-content-left h1,
    .cofo-hero-content-right h1 {
        font-size: clamp(26px, 2.6vw, 2.5rem);
    }
}

/* Editor bar under the hero, shown only to users who may edit it (01.05.00). Replaces the old
   hover-only "Edit" button, which editors could not find outside DNN's edit mode. */
.kcHero-editbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 5;
    background-color: #222;
    color: #fff;
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.2;
}

.kcHero-editbar-label {
    font-weight: bold;
}

.kcHero-editbar-link,
.kcHero-editbar-link:visited {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 6px 12px;
    text-decoration: none;
}

.kcHero-editbar-link:hover,
.kcHero-editbar-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

/* Phone heading wrapper is the size reference for the cqw units above. */
@media screen and (max-width: 768px) {
    .kcHero-header-content-mobile {
        container-type: inline-size;
    }
}


/* The hero video fades in over its thumbnail once its first frame moves (see Index.cshtml). */
.kcHero-vimeo-hero { opacity: 0; transition: opacity 1.2s ease-in-out; }
.kcHero-vimeo-hero.kcHero-vimeo-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kcHero-vimeo-hero { transition: none; } }