/* U.S. Taekwondo Hapkido unified site shell */
:root {
    --tkd-red: #d00000;
    --tkd-red-hot: #ff1a1a;
    --tkd-black: #030303;
    --tkd-panel: rgba(12,12,14,.96);
    --tkd-line: rgba(255, 0, 0, .72);
    --tkd-muted: #d8d8d8;
}

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(circle at 20% 0%, rgba(255,0,0,.24), transparent 26%),
        radial-gradient(circle at 85% 14%, rgba(255,255,255,.06), transparent 22%),
        linear-gradient(135deg, #000 0%, #080808 45%, #1a0000 100%) !important;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    background:
        linear-gradient(120deg, transparent 0 82%, rgba(255,0,0,.85) 83%, transparent 84%),
        radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.4px);
    background-size: 260px 260px, 22px 22px;
    z-index: -1;
}

body::after {
    content: "";
    position: fixed;
    right: -180px;
    top: 120px;
    width: 520px;
    height: 520px;
    pointer-events: none;
    opacity: .12;
    background: url("brush-divider.svg") center/contain no-repeat;
    transform: rotate(-18deg);
    z-index: -1;
}

.site-brand-banner {
    background:
        linear-gradient(90deg, #050505, #210000 30%, #050505 70%),
        #050505;
    border-bottom: 3px solid var(--tkd-red);
    padding: 18px 18px 14px;
    box-shadow: 0 8px 35px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.1);
    position: relative;
    overflow: hidden;
}

.site-brand-banner::before,
.site-brand-banner::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 340px;
    height: 80px;
    background: url("brush-divider.svg") center/contain no-repeat;
    opacity: .38;
    transform: translateY(-50%);
    pointer-events: none;
}

.site-brand-banner::before {
    left: -90px;
}

.site-brand-banner::after {
    right: -90px;
    transform: translateY(-50%) scaleX(-1);
}

.site-brand-inner {
    max-width: 1350px;
    margin: 0 auto;
    border: 2px solid rgba(255,0,0,.8);
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(232,232,232,.94));
    padding: 8px 18px;
    box-shadow: 0 0 22px rgba(255,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.08);
    position: relative;
    z-index: 1;
}

.site-brand-inner img {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}

.nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
    background:
        linear-gradient(180deg, #151515, #050505) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 2px solid var(--tkd-red) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.55) !important;
    padding: 0 !important;
}

.nav a {
    color: #fff !important;
    padding: 11px 14px !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    border-left: 1px solid rgba(255,0,0,.13) !important;
    background: linear-gradient(90deg, rgba(255,0,0,.08), transparent) !important;
}

.nav a:hover,
.nav a:focus {
    background: linear-gradient(180deg, var(--tkd-red-hot), #8b0000) !important;
    color: #050505 !important;
    text-shadow: none !important;
}

.header {
    position: relative;
    background:
        linear-gradient(135deg, rgba(120,0,0,.65), rgba(0,0,0,.95) 55%),
        #050505 !important;
    overflow: hidden;
}

.header::before {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -32px;
    width: 360px;
    height: 110px;
    background: url("brush-divider.svg") center/contain no-repeat;
    opacity: .25;
    pointer-events: none;
}

.header h1 {
    text-shadow: 4px 4px 0 #000, 0 0 18px rgba(255,0,0,.65) !important;
}

.container, main {
    position: relative;
}

.section,
.gallery-section,
.player-panel,
.belt-section,
.day-card,
.training-card,
.testing-card,
.text-panel,
.sidebar,
.intro {
    border-color: rgba(255,0,0,.78) !important;
    box-shadow: 0 0 28px rgba(255,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.section h2,
.gallery-section h2,
.belt-section h2,
.player-panel h2 {
    text-shadow: 0 0 10px rgba(255,0,0,.35);
}

.section h2::after,
.gallery-section h2::after,
.belt-section h2::after,
.player-panel h2::after {
    content: "";
    display: block;
    width: 130px;
    height: 10px;
    background: url("mini-slash.svg") left center/contain no-repeat;
    margin-top: 8px;
}

button,
.watch-link,
.button-row a,
.footer a {
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

button:hover,
.watch-link:hover,
.button-row a:hover,
.footer a:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255,0,0,.35);
}

/* Uploaded home page originally used a sidebar shell. Hide it and let the unified nav do the job. */
.layout {
    display: block !important;
    min-height: auto !important;
}
.layout aside {
    display: none !important;
}
.layout main {
    padding: 34px clamp(18px,4vw,58px) !important;
}

@media (max-width: 750px) {
    .site-brand-banner {
        padding: 12px 10px 10px;
    }
    .site-brand-inner {
        padding: 6px 8px;
    }
    .nav a {
        font-size: 12px !important;
        padding: 9px 10px !important;
    }
}


/* Option 2 dropdown navigation: clean launch menu */
.nav {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:0 !important;
    padding:0 !important;
    background:linear-gradient(180deg,#151515,#050505) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    border-bottom:2px solid var(--tkd-red,#d00000) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.55) !important;
    position:sticky;
    top:0;
    z-index:50;
}
.nav .nav-item{position:relative;display:flex;align-items:stretch}
.nav a,.nav .dropbtn{
    display:flex !important;
    align-items:center !important;
    color:#fff !important;
    padding:12px 16px !important;
    text-decoration:none !important;
    font-weight:900 !important;
    font-size:14px !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-left:1px solid rgba(255,0,0,.13) !important;
    background:linear-gradient(90deg,rgba(255,0,0,.08),transparent) !important;
    cursor:pointer;
    white-space:nowrap;
    min-height:44px;
}
.nav .dropbtn::after{content:"▾";font-size:11px;margin-left:7px;color:#ff3a3a}
.nav a:hover,.nav a:focus,.nav .nav-item:hover>.dropbtn,.nav .nav-item:focus-within>.dropbtn,
.nav a.active,.nav .dropbtn.active{
    background:linear-gradient(180deg,#ff1a1a,#8b0000) !important;
    color:#fff !important;
    text-shadow:none !important;
}
.nav .dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:235px;
    background:rgba(5,5,5,.98);
    border:1px solid rgba(255,0,0,.55);
    border-top:2px solid #ff1a1a;
    box-shadow:0 18px 35px rgba(0,0,0,.72);
    padding:7px;
    z-index:60;
}
.nav .nav-item:hover>.dropdown,.nav .nav-item:focus-within>.dropdown{display:block}
.nav .dropdown a{
    display:block !important;
    min-height:auto;
    padding:10px 12px !important;
    margin:2px 0;
    border:1px solid rgba(255,255,255,.08) !important;
    background:linear-gradient(90deg,rgba(255,0,0,.12),rgba(255,255,255,.03)) !important;
    font-size:13px !important;
    clip-path:none !important;
}
.nav .dropdown a:hover,.nav .dropdown a:focus,.nav .dropdown a.active{
    background:linear-gradient(90deg,#d60000,rgba(214,0,0,.32)) !important;
}
@media(max-width:760px){
    .nav{position:relative;justify-content:flex-start !important;overflow:visible}
    .nav .nav-item{width:50%;position:relative}
    .nav a,.nav .dropbtn{width:100%;justify-content:center;font-size:12px !important;padding:10px 8px !important}
    .nav .dropdown{left:0;right:auto;min-width:100%;width:100%;position:absolute}
}
@media(max-width:460px){.nav .nav-item{width:100%}.nav .dropdown{position:static;display:block;border-top:0;box-shadow:none}.nav .dropbtn::after{content:""}}


/* ===== Mobile / tablet responsive patch ===== */
@media (max-width: 900px) {
  body::after,
  .site-brand-banner::before,
  .site-brand-banner::after,
  .header::before {
    display: none !important;
  }

  .site-brand-banner {
    padding: 10px 8px 10px !important;
  }

  .site-brand-inner {
    padding: 6px 8px !important;
    margin: 0 6px !important;
  }

  .nav {
    display: block !important;
    padding: 0 !important;
  }

  .nav > a,
  .nav > .dropdown {
    display: block !important;
    width: 100% !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  .nav a,
  .dropbtn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  .dropdown {
    position: static !important;
  }

  .dropdown-content {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .dropdown-content a {
    padding-left: 28px !important;
    font-size: 14px !important;
  }

  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
  }

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

  body, td, p, li {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .content, .container, .page-shell, .page-content, main {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 600px) {
  .site-brand-inner img {
    max-width: 100% !important;
  }

  body, td, p, li {
    font-size: 15px !important;
  }

  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }

  .content, .container, .page-shell, .page-content, main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}