/* ========================================
   GLOBAL STYLES - AMERICAN SPORTS SURFACES
   Used across multiple components and pages
   ======================================== */

/* ========================================
   NAVIGATION STYLES
   ======================================== */
.custom-toggler.ui-navbar-toggler {
    background-color: #ebe846;
}

.ui-navbar-nav .ui-nav-link {
    font-family: 'League Gothic', sans-serif;
    text-transform: uppercase;
    font-size: 1.8vw;
    color: #ffffff;
}

.ui-navbar-nav .ui-nav-link.ui-active {
    color: #ebe846;
}

.ui-navbar-nav .ui-nav-link:hover {
    text-decoration: underline;
    text-decoration-color: #ebe846;
}

@media only screen and (max-width: 600px) {
    .ui-navbar-nav .ui-nav-link {
        font-size: 1.5rem;
    }
}

/* Navigation Specific Styles */
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1050; /* Increased from 999 to ensure it's above court designer controls */
}

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.ui-dropdown-toggle {
    white-space: nowrap;
}

.position-static {
    position: static !important;
}

/* Dropdown menu styling */
.ui-dropdown-menu {
    z-index: 1051; /* Ensure dropdown is above everything */
}

.ui-dropdown-menu .ui-dropdown-item {
    font-size: 1rem; /* Standard dropdown item size */
    padding: 0.5rem 1rem;
}

.ui-dropdown-menu h3 {
    font-size: 1.25rem; /* Reduced from default h3 size */
    margin: 0;
    font-weight: bold;
}

.ui-dropdown-menu h4 {
    font-size: 1.1rem; /* Reduced from default h4 size */
    margin: 0;
    font-weight: bold;
}

.ui-navbar-brand img {
    height: 105px;
}

@media only screen and (max-width: 600px) {
    .ui-navbar-brand img {
        height: 80px;
    }
}

/* Typography */
.uppercase {
    text-transform: uppercase;
}

.league {
    font-family: 'League Gothic', sans-serif;
}

.font-xl {
    font-size: 13rem;
}

.font-lg {
    font-family: 'League Gothic', sans-serif;
    font-size: 11rem;
}

.font-md {
    font-size: 4.1rem;
}

.font-sm {
    font-family: 'League Gothic', sans-serif;
    font-size: 2rem;
}

/* The court designer is an embedded React app with its own Tailwind build, and this is the only
   bare element selector in the site's stylesheets, so it is the only rule that reaches inside it.
   Excluding the app lets its own `text-lg` apply, which is what it renders at everywhere else.

   The exclusion is wrapped in :where() so it contributes no specificity. Without that this rule
   would climb to (0,1,2) and start beating `.umb-block-grid p` below, which is (0,1,1). */
p:not(:where(.court-designer-app-root p)) {
    font-size: 1.6667rem;
}

.umb-block-grid p {
    font-size: 1.5rem;
}

.umb-block-grid h4 {
    color: #193054;
}

/* Colors */
.white {
    color: #ffffff !important;
}

.blue {
    color: #1a3054;
}

.bg-branded {
    background-color: #1a3054;
}

/* Masthead */
.masthead {
    height: 84vh;
    background-color: #1a3054;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.masthead h1 {
    font-family: 'League Gothic', sans-serif;
    color: #f3bb47;
    line-height: 10rem !important;
}

.masthead .btn-yellow {
    background-color: #f3bb47;
    color: #1a3054;
    font-size: 4rem;
}

/* Buttons */
.btn-blue {
    background-color: #1a3054 !important;
    color: white !important;
    border-radius: 30px;
}

.btn-blue:hover {
    background-color: #ffffff !important;
    color: #1a3054 !important;
}

.btn-white {
    background-color: #ffffff;
    color: #1a3054;
    border-radius: 30px;
}

.btn-white:hover {
    background-color: #1a3054;
    color: white;
}

.btn-yellow {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #1a3054;
    background-color: #ebe846;
    border-radius: 30px;
}

.btn-yellow:hover {
    background-color: #f3bb47;
}

/* Cards */
#card-alt .ui-card {
    border-radius: 0 !important;
    border: none;
    -webkit-transition: 1s ease-out;
    transition: 1s ease-out;
}

#card-alt .ui-card:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    z-index: 2;
}

#card-alt .ui-card:hover .ui-card-img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

#card-alt .ui-card:hover .ui-card-img-overlay {
    background-color: transparent;
}

#card-alt .ui-card:hover .ui-card-img-overlay h5 {
    color: transparent;
}

#card-alt .ui-card-img-overlay {
    background-color: rgba(26, 48, 84, .5);
    -webkit-transition: 1s ease-out;
    transition: 1s ease-out;
    display: inline-block;
    padding: 0;
}

#card-alt .ui-card h5 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 5em;
    -webkit-transition: 1s ease-out;
    transition: 1s ease-out;
}

#card-alt .ui-card a {
    z-index: 5;
}

/* Links */
#footer a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.5rem;
}

#contact a {
    text-decoration: none;
    color: #ffffff;
}

/* Forms */
.umbraco-forms-navigation input {
    background-color: #1a3054;
    border-radius: 0;
    border-color: #1a3054;
    font-family: 'League Gothic', sans-serif;
    text-transform: uppercase;
    font-size: 2.0rem;
    margin: 10px 40%;
}

.umbraco-forms-navigation input:hover {
    background-color: #ffffff;
    color: #1a3054;
    border-color: #1a3054;
}

/* Responsive Typography */
@media only screen and (max-width: 600px) {
    .font-xl {
        font-size: 9rem;
    }
    .font-lg {
        font-size: 8rem !important;
    }
    .font-md {
        font-size: 2rem !important;
    }
}

@media only screen and (max-width: 1400px) {
    .font-lg {
        font-size: 8rem !important;
    }
}

@media only screen and (min-width: 1441px) {
    #section-masthead .font-lg {
        font-size: 11rem !important;
    }
}

@media only screen and (max-width: 1440px) {
    #section-masthead .font-lg {
        font-size: 8rem !important;
    }
}

@media only screen and (max-width: 600px) {
    #section-masthead .font-lg {
        font-size: 5rem !important;
    }
}

/* Responsive Buttons */
@media only screen and (max-width: 1264px) {
    .btn-yellow {
        font-size: 2.0rem;
        padding: 0 4px !important;
    }
}

@media only screen and (max-width: 1018px) {
    .btn-yellow {
        font-size: 1.6667rem;
        padding: 0 4px !important;
    }
}

/* Responsive Cards */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    #card-alt .ui-card h5 {
        font-size: 4em;
    }
}

/* Mobile Navigation */
@media only screen and (max-width: 991px) {
    .ui-navbar-collapse {
        z-index: 1060;
    }
    
    .ui-dropdown-menu {
        background-color: rgba(26, 48, 84, 0.95);
        border: none;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    }
    
    .ui-dropdown-menu .ui-dropdown-item {
        color: #ffffff;
    }
    
    .ui-dropdown-menu .ui-dropdown-item:hover {
        background-color: rgba(235, 232, 70, 0.2);
        color: #ebe846;
    }
}

/* Court Designer Page Specific Fixes */
@media only screen and (max-width: 991px) {
    body.court-designer-page {
        padding-top: 0;
    }
    
    .court-designer-container {
        margin-top: 1rem;
    }
}

/* Footer Styles */
#footer {
    background-color: #1a3054;
}

#footer .footer-content {
    padding: 3rem 0;
}

.footer-accent-bar {
    background-color: #ebe846;
    font-size: 1.5rem;
}

/* ========================================
   SHARED COMPONENT STYLES
   ======================================== */

/* Card components */
#card-alt .ui-card {
    border: none;
    position: relative;
    overflow: hidden;
}

#card-alt .ui-card-img {
    transition: transform 0.3s ease;
}

#card-alt .ui-card:hover .ui-card-img {
    transform: scale(1.05);
}

#card-alt .ui-card-img-overlay {
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

#card-alt .ui-card-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Contact section (shared across pages) */
#contact {
    padding: 2rem 0;
}

#contact .company-info {
    background-color: #1a3054;
    color: #ffffff;
    padding: 2rem;
}

#contact .company-info h3 {
    margin-bottom: 1rem;
}

#contact .company-info p {
    margin-bottom: 0.5rem;
}

#contact .company-info a {
    color: #ffffff;
    text-decoration: none;
}

#contact .company-info a:hover {
    text-decoration: underline;
}

#contact .social-links {
    text-align: center;
}

#contact .social-links .row {
    padding-top: 0.25rem;
}

#contact .social-links a {
    color: #ffffff;
    text-decoration: none;
}

#contact .social-links a:hover {
    color: #ebe846;
}

#contact .map-container {
    padding: 0;
}

#contact .map-iframe {
    border: 0;
    width: 100%;
    height: 450px;
}

/* People/Staff cards */
.people-section .person-card {
    text-align: center;
    padding: 1rem 0;
}

.people-section .person-headshot {
    width: 240px;
    height: 240px;
    object-fit: cover;
}

.people-section .person-name {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.people-section .person-title {
    color: #666;
    margin-bottom: 0;
}

/* Quote carousel */
.quote-carousel {
    padding: 3rem 0;
}

.quote-carousel .ui-carousel-item {
    padding: 2rem 0;
}

.quote-carousel .blockquote {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.quote-carousel .blockquote-footer {
    font-size: 1rem;
    color: #666;
}

.quote-carousel .ui-carousel-control-prev,
.quote-carousel .ui-carousel-control-next {
    width: 10%;
}

/* Partner cards */
.partner-section {
    padding: 3rem 0;
}

.partner-card {
    border: none;
    text-align: center;
    padding: 1rem;
    height: 100%;
}

.partner-logo {
    width: 50%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

.partner-service {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.partner-name {
    color: #666;
    margin-bottom: 0;
}

/* 404 Page */
.page-404 .error-heading {
    color: #1a3054;
    font-size: 5em;
}

.page-404 .error-container {
    text-align: center;
    padding: 1rem 0;
}

.page-404 .error-image-container {
    margin-bottom: 2rem;
}

.page-404 .error-heading-container {
    padding: 2rem 0;
}

/* Block Grid layout lives in blockgridlayout.css, which is Umbraco's own and is loaded after
   this file. Two rules here used to duplicate it and broke it. They set the `grid-column`
   shorthand, so as well as the span they set `grid-column-start: span 1`, and nothing later
   sets the start again. blockgridlayout.css only ever sets `grid-column-end`, so the item
   ended up starting at a one column span and ignoring its end, collapsing a full width block
   to a twelfth of the row. The layout-item rule was also reading `--col-span`, which nothing
   sets, rather than `--umb-block-grid--item-column-span`.

   Nothing replaces them: blockgridlayout.css already covers both, including scaling the span
   on narrow screens. */

/* Block Grid Demo Components */
.umb-block-demo-headline {
    padding: 20px;
}

.umb-block-demo-rich-text {
    padding: 20px;
}

.umb-block-demo-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Grid Editor Styles */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.caption {
    font-style: italic;
    margin-top: 0.5rem;
    color: #6c757d;
}

/* Responsive utilities */
@media (max-width: 768px) {
    #card-alt .ui-card-title {
        font-size: 1.25rem;
        padding: 0 1rem;
    }
    
    .quote-carousel .blockquote {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .quote-carousel .blockquote-footer {
        padding: 0 1rem;
    }
    
    #contact .company-info {
        margin-bottom: 1rem;
    }
}