@import url('sportsvilleohio-hero.css');
/* SportsVille Ohio Core Stylesheet
    Updated: 2026-04-20
    Focus: Menu Alignment, Content Offsets, and Variable Fixes
*/
/* import css style for hero images */

@font-face {
    font-family: 'Verdana', arial, helvetica, sans-serif;
    font-display: swap;
}

html, body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background-color: #f4f7f6; /* Subtle depth for the background */
	scroll-behavior: smooth;
}

/* --- Typography --- */
h1 { font-size: 2em!important; margin: .67em 0; }
h2 { font-size: 1.5em!important; margin: .75em 0; }
h3 { font-size: 1.17em!important; margin: .83em 0; }
h5 { font-size: .83em!important; margin: 1.5em 0; }
h6 { font-size: .75em!important; margin: 1.67em 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }

/* --- Layout Offsets (Critical for Sticky Menu) --- */

/* Mobile Offset: Single bar (~60px) */
@media (max-width: 992px) {
    .sv-phone { margin-top: 60px !important; }
    .page { margin-top: 60px !important; }
}

/* Desktop Offset: Two-tier bar (~130px) */
@media (min-width: 993px) {
    .sv-desktop { margin-top: 130px !important; }
    .page { margin-top: 130px !important; }
}

.page {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
}

.pageContent {
    margin: 0 auto;
    max-width: 1600px;
}

/* --- Media Containers --- */
.mainImage {
    max-width: 2000px;
    max-height: 600px;
    background: black;
    overflow: hidden;
}

.mainVideo {
    max-width: 2000px;
    max-height: 1200px;
    background: black;
    overflow: hidden;
}

/* --- Spacing Utils --- */
.spacerOneDiv { margin-top: 0; max-width: 1600px; }
.spacerTwoDiv { margin-top: 2em; max-width: 1600px; }

/* --- Brand Colors & Utility Classes --- */
.sv-text-75em { font-size: 0.75em!important; }
.sv-text-red { color: #BD2031; }
.sv-text-green { color: #3e5c4b; }
.sv-text-blue { color: #0047AB; }
.sv-text-purple { color: #551A8B; }
.sv-text-white { color: #FFFFFF; }

.sv-red { background-color: #BD2031; }
.sv-orange { background-color: #f1563f; }
.sv-green { background-color: #3e5c4b; }
.sv-lightgreen { background-color: #58BC82; } 
.sv-blue { background-color: #0047AB; }
.sv-navy { background-color: #2a3440; }
.sv-purple { background-color: #551A8B; }
.sv-grey, .sv-gray { background-color: #CCC; }

/* --- Buttons --- */
.sv-button { 
    background-color: #0047AB; 
    color: white; 
    font-weight: 525; 
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
.sv-button:hover { 
    background-color: #458a52!important; 
    color: white!important; 
}

.sv-button-simple {
    background-color: rgba(0,0,0,0.5)!important; 
    color: white!important; 
    font-weight: bold!important; 
    font-size: 1.25em!important; 
    border: 1px solid white; 
    border-radius: 10px!important;
}
.sv-button-simple:hover {
    background-color: rgba(0,0,0,0.2)!important; 
    color: white!important;
    border: 1px solid white;
}

/* --- Navigation & Dropdown Fixes --- */
/* This ensures "Golf" and other links align on the same baseline */
.sv-nav-item, .sv-nav-link {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    padding: 0 16px !important;
    line-height: 52px !important; /* Forces text to middle */
}

/* Fixes for Dropdown Overflow */
.sv-dropdown-content {
    background-color: #fff !important;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

.sv-dropdown-content a {
    color: #333 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    display: block !important;
    white-space: nowrap !important; /* Prevents text from bleeding out */
}

.sv-dropdown-content a:hover {
    background-color: #f1f1f1 !important;
    color: #000 !important;
}

/* --- SportsVille Custom Responsive Text --- */

/* MOBILE VIEW (Phones) */
@media only screen and (max-width: 600px) {
    .sv-title, .sv-subtitle, .sv-ptitle, .sv-game-name {
        font-family: Verdana, sans-serif !important;
        margin: 0.5em 0 !important;
        font-weight: 700 !important; /* Kept bold for readability on small screens */
    }

    .sv-hero-1 { font-size: 38px !important; line-height: 1.1; } /* Fits "SportsVille" without breaking */
    .sv-hero-2 { font-size: 24px !important; }                /* The 24px you mentioned */
    
    .sv-title { font-size: 28px !important; color: #333; }
    .sv-subtitle { font-size: 22px !important; color: #444; }
    .sv-ptitle { font-size: 18px !important; color: #444; }
    .sv-game-name { font-size: 16px !important; color: #444; }
    
    p { font-size: 16px !important; line-height: 1.6; }
}

/* DESKTOP VIEW (Tablets & PC) */
@media only screen and (min-width: 601px) {
    .sv-title, .sv-subtitle, .sv-ptitle, .sv-game-name {
        font-family: Verdana, sans-serif !important;
        margin: 0.75em 0 !important;
        font-weight: 600 !important; /* Standard Semi-Bold */
    }

    .sv-hero-1 { font-size: 64px !important; } /* Full Jumbo */
    .sv-hero-2 { font-size: 36px !important; } /* The "Perfect Middle" between 24 and 48 */
    
    .sv-title { font-size: 42px !important; text-align: center !important; color: #333; }
    .sv-subtitle { font-size: 30px !important; color: #333; }
    .sv-ptitle { font-size: 22px !important; color: #333; }
    .sv-game-name { font-size: 20px !important; color: #333; }

    p { font-size: 18px !important; line-height: 1.7; }
}

/* --- Misc Tables & Images --- */
.material-icons {
    color: yellow;
    vertical-align: middle;
    font-size: 1.5em;
}

div.ttr-games {
    max-width: 1600px!important;
    padding: 0;
    margin: 0 auto;
}

table.ttr-games {
    max-width: 360px;
    margin: 0 auto;
    padding: 16px;
}

img.ttrIcon {
    clear: both;
    max-width: 360px;
    height: auto;
}

/* --- Link Styles --- */
a.one:link, a.one:visited { text-decoration: none; color: #0047AB !important; font-weight: 525; font-size: 1.2em; }
a.one:hover { text-decoration: underline; }

.sv-one { text-decoration: none; color: #0047AB !important; font-weight: 525; font-size: 1.2em; }
.sv-one:hover { text-decoration: underline; }

.sv-disabled-link {
  pointer-events: none;   /* disables clicking */
  opacity: 0.5;           /* faded look */
  cursor: not-allowed;
}