/*
Theme Name: Stoney Creek Hawks RC Club
Theme URI: https://example.com/
Author: ChatGPT
Description: Custom WordPress theme inspired by the Stoney Creek Hawks RC Club banner concept, using the clean hero image with custom overlay navigation bars.
Version: 1.6 Mobile Optimized
License: GPLv2 or later
Text Domain: schawks
*/

:root{
  --black:#030303;
  --dark:#0b0b0d;
  --panel:#111114;
  --gold:#d99a22;
  --gold-light:#f6c24a;
  --white:#fff;
  --muted:#d7d7d7;
  --line:rgba(217,154,34,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Oswald','Arial Narrow',Arial,sans-serif;background:radial-gradient(circle at top,#1a1408 0,#070707 38%,#030303 100%);color:var(--white)}
a{color:inherit;text-decoration:none}.container{width:min(1200px,92vw);margin-inline:auto}

/* Top navigation bar above hero image */
.site-header{position:relative;top:auto;left:auto;right:auto;z-index:50;background:rgba(3,3,3,.96);border-bottom:2px solid #d99a22;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.navbar{height:84px;display:flex;align-items:stretch;justify-content:space-between;padding:0 0 0 26px;text-transform:uppercase;font-weight:800;letter-spacing:.055em}
.nav-left,.nav-right{display:flex;align-items:stretch}.nav-left{gap:34px}.nav-right{gap:34px}.navbar a{display:flex;align-items:center;color:#f2f2f2;font-size:18px;line-height:1;white-space:nowrap;text-shadow:0 2px 3px rgba(0,0,0,.6);position:relative}.navbar a:not(.login-btn):after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:transparent}.navbar a:hover,.navbar a.active{color:var(--gold-light)}.navbar a:hover:after,.navbar a.active:after{background:var(--gold-light)}
.home-tile{gap:16px;color:var(--gold-light)!important}.home-icon{font-size:30px;line-height:1;color:var(--gold-light)}
.login-btn{align-self:center;margin-left:4px;height:54px;padding:0 26px;background:linear-gradient(180deg,#efad28 0%,#d68f1d 100%);color:#050505!important;border:1px solid #f6bf4a;border-radius:5px 0 0 5px;font-size:18px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.35);gap:12px}.login-btn:hover{filter:brightness(1.04)}
.menu-toggle{display:none;background:transparent;color:#fff;border:1px solid #333;padding:9px 12px;border-radius:6px;margin:auto 16px}

/* Clean hero image below top navigation */
.hero-wrap{position:relative;background:#000;border-bottom:1px solid var(--line);overflow:hidden}
.hero-image{background:#000}
.hero-image img{display:block;width:100%;height:auto;min-height:640px;max-height:920px;object-fit:cover;object-position:center top;margin-inline:auto}

.quick-links{display:none}.quick-grid{background:rgba(7,7,8,.96);border:1px solid rgba(217,154,34,.42);display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 18px 38px rgba(0,0,0,.55);clip-path:polygon(1% 0,99% 0,100% 50%,99% 100%,1% 100%,0 50%);backdrop-filter:blur(2px)}
.quick-card{padding:22px 24px;display:flex;align-items:center;gap:16px;border-right:1px solid #343438;min-height:126px;transition:background .18s ease}.quick-card:last-child{border-right:0}.quick-card:hover{background:#111114}.quick-icon{width:62px;height:62px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold-light);font-size:27px;flex:none}.quick-card h3{margin:0 0 7px;font-size:20px;line-height:1;text-transform:uppercase;color:#f1f1f1}.quick-card p{margin:0;color:var(--gold-light);font-size:16px;line-height:1.25}.arrow{margin-left:auto;color:#9e8356;font-size:42px;line-height:1}

.intro-section{padding:70px 0 36px;display:grid;grid-template-columns:1.5fr .9fr;gap:30px;align-items:stretch}.intro-copy,.intro-panel,.feature-card{background:linear-gradient(180deg,#131315,#0a0a0b);border:1px solid rgba(217,154,34,.24);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.28)}.intro-copy{padding:42px}.intro-panel{padding:34px;border-left:5px solid var(--gold)}.eyebrow{color:var(--gold-light);text-transform:uppercase;letter-spacing:.16em;font-size:15px;margin:0 0 10px!important}.intro-copy h1{font-size:58px;line-height:.95;margin:0 0 22px;text-transform:uppercase}.intro-panel h2{font-size:32px;line-height:1.05;margin:0 0 16px;text-transform:uppercase;color:var(--gold-light)}p{font-family:Arial,sans-serif;color:var(--muted);line-height:1.7}.button-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:8px;text-transform:uppercase;font-weight:900;letter-spacing:.04em}.primary-btn{background:linear-gradient(#f2b735,#c98216);color:#050505}.secondary-btn{border:1px solid var(--gold);color:var(--gold-light)}

.feature-section{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 0 74px}.feature-card{padding:30px}.feature-card h3{color:var(--gold-light);font-size:27px;margin:0 0 10px;text-transform:uppercase}.site-footer{background:#020202;border-top:2px solid var(--gold);padding:28px;text-align:center;color:#bbb}

@media (max-width:1180px){.nav-left,.nav-right{gap:22px}.navbar a{font-size:15px}.quick-links{position:relative;bottom:auto;margin-top:0}.quick-grid{grid-template-columns:repeat(2,1fr);clip-path:none}.quick-card:nth-child(2n){border-right:0}.intro-section{grid-template-columns:1fr}.feature-section{grid-template-columns:1fr}}
@media (max-width:760px){.site-header{position:relative}.navbar{height:auto;min-height:68px;padding-left:16px;align-items:center}.nav-left a:not(.home-tile),.nav-right{display:none}.menu-toggle{display:block}.hero-image img{min-height:420px;max-height:none}.quick-grid{grid-template-columns:1fr}.quick-card{border-right:0;border-bottom:1px solid #323236;min-height:104px}.quick-card:last-child{border-bottom:0}.intro-copy{padding:30px}.intro-copy h1{font-size:42px}}


/* =========================================================
   Mobile Optimization - v1.6
   Improves header, navigation, hero image, spacing, and text
   for phones and tablets.
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.site-header,
header {
    position: relative;
    z-index: 10;
}

nav,
.main-navigation,
.menu,
.primary-menu {
    max-width: 100%;
}

nav ul,
.main-navigation ul,
.menu,
.primary-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
}

nav li,
.main-navigation li,
.menu li,
.primary-menu li {
    margin: 0;
}

nav a,
.main-navigation a,
.menu a,
.primary-menu a {
    display: inline-block;
    padding: 10px 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.hero,
.hero-banner,
.home-hero {
    width: 100%;
    overflow: hidden;
}

.hero img,
.hero-banner img,
.home-hero img,
img.hero-image {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.content,
.site-content,
.page-content,
main {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    nav ul,
    .main-navigation ul,
    .menu,
    .primary-menu {
        gap: 6px;
    }

    nav a,
    .main-navigation a,
    .menu a,
    .primary-menu a {
        font-size: 14px;
        padding: 9px 10px;
    }

    .hero img,
    .hero-banner img,
    .home-hero img,
    img.hero-image {
        min-height: 220px;
        max-height: 420px;
    }
}

@media (max-width: 600px) {
    header,
    .site-header {
        padding-left: 8px;
        padding-right: 8px;
    }

    nav ul,
    .main-navigation ul,
    .menu,
    .primary-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    nav a,
    .main-navigation a,
    .menu a,
    .primary-menu a {
        font-size: 13px;
        padding: 8px 8px;
        border-radius: 6px;
    }

    .hero img,
    .hero-banner img,
    .home-hero img,
    img.hero-image {
        min-height: 185px;
        max-height: 320px;
        object-position: center center;
    }

    .content,
    .site-content,
    .page-content,
    main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    h1 {
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(22px, 6vw, 32px);
        line-height: 1.15;
    }

    p,
    li {
        font-size: 16px;
        line-height: 1.6;
    }
}

@media (max-width: 420px) {
    nav a,
    .main-navigation a,
    .menu a,
    .primary-menu a {
        font-size: 12px;
        padding: 7px 6px;
    }

    .hero img,
    .hero-banner img,
    .home-hero img,
    img.hero-image {
        min-height: 165px;
        max-height: 280px;
    }
}