/*
 Theme Name:   Kadence Child
 Theme URI:    https://example.com/kadence-child/
 Description:  Kadence Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     kadence
 Version:      1.0.2
 Tags:         customizable, modern, responsive-layout, gutenberg, header builder, footer builder
 Text Domain:  kadencechild
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* ==========================================================
   1. short code(TOP)
========================================================== */
.game-card-container{
    display:flex;
    gap:16px;                  /* ??????????????????? */
    overflow-x:auto;
    scroll-behavior:smooth;
    padding-bottom:15px;
}
.game-card{
    flex:0 0 260px;
    min-width: 260px;
    display:flex;
    flex-direction:column;
    min-height:auto;
    height:auto;
    padding:18px 20px;
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    transition:.3s;
}
.game-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,.1);
}

.result-win{   background:#fff5f6; border-left:6px solid #8e1728; }
.result-lose{  background:#f5f5f5; border-left:6px solid #9e9e9e; }
.result-draw{  background:#fff9db; border-left:6px solid #f4c542; }

.game-card-header{ 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    margin-bottom:12px;
}
.game-meta{ 
    display:flex; 
    justify-content:flex-start; 
    align-items:center; 
    font-size:0.8rem; 
    font-weight:600; 
    width:100%; 
    white-space:nowrap; 
    color:#666;
    gap:0.5em; 
}
.game-date{ 
    font-size:0.8rem; 
    color:#888; 
    margin-top:2px; 
    margin-bottom:4px; 
}
.game-score-block{ 
    margin-top:0; 
    display:flex; 
    flex-direction:column; 
    gap:2px; 
}

.game-card .our-team{ 
    text-align:left; 
    font-size:1.15rem; 
    font-weight:700; 
    margin-bottom:0; 
    line-height:1.1; 
}

.game-card .score{ 
    display:flex; 
    justify-content:center; 
    align-items:baseline; 
    font-size:2.2rem; 
    font-weight:800; 
    line-height:1; 
    white-space:nowrap; 
    margin: 6px 0;
}
.game-card .our-score{ width:2.5ch; text-align:right; }
.opp-score{ width:2.5ch; text-align:left; }
.hyphen{ width:1.5ch; text-align:center; color:#bbb; }

/* ?????????????????????????? */
.opponent-team{ 
    width:100%; 
    text-align:right; 
    font-size:1.15rem; 
    font-weight:700; 
    line-height:1.4; 
}
.game-card-link{ display:block; width:100%; text-decoration:none; color:inherit; }

/* ==========================================================
   2. basic design
========================================================== */
/* ????????????? */
a:hover {
    color: #8e1728 !important;
}

.single-game-wrapper{
    max-width:900px;
    margin:40px auto;
    padding:0 20px;
}
.single-game-card{
    border-radius:24px;
    padding:40px;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.single-game-card .game-meta{ justify-content:center; gap:.5em; margin-bottom:3px; font-size:1.1rem; font-weight:700; }
.single-game-card .game-date{ text-align:center; margin-top:3px; margin-bottom:3px; font-size:.95rem; color:#777; }
.game-venue{ text-align:center; margin-top:3px; margin-bottom:30px; font-size:.95rem; color:#777; }

.single-game-card .our-team,
.single-game-card .opponent-team{ font-size:2rem; font-weight:700; }
.single-game-card .our-team{ text-align:left; }
.single-game-card .opponent-team{ text-align:right; }

/* ?????? */
.single-game-card .score{ margin:15px 0; font-size:5rem; font-weight:800; }
.single-game-card .our-score{ width:3ch; text-align:right; }
.single-game-card .opp-score{ width:3ch; text-align:left; }
.single-game-card .hyphen{ width:1.5ch; text-align:center; }

/* OT????? */
.ot-section{ margin-top:30px; padding-top:20px; border-top:1px solid rgba(0,0,0,.1); }
.ot-title{ font-size:.9rem; font-weight:700; color:#777; margin-bottom:10px; letter-spacing:.05em; }
.ot-score{ font-size:1.1rem; font-weight:600; margin-top:5px; }

.single-score-area{ margin-top:25px; }
.single-team-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.single-team-left, .single-team-right{ font-size:2rem; font-weight:700; }
.single-team-left{ text-align:left; }
.single-team-right{ text-align:right; }
.single-final-score{ display:flex; justify-content:center; align-items:center; font-size:5rem; font-weight:800; line-height:1; }
.single-our-score{ width:3ch; text-align:right; }
.single-opp-score{ width:3ch; text-align:left; }
.single-hyphen{ width:1.5ch; text-align:center; }

/* ???????????? */
.quarter-scores{ margin-top:25px; }
.quarter-row{ display:flex; justify-content:center; gap:18px; margin:6px 0; font-size:1rem; }
.quarter-score{ width:6em; text-align:left; font-weight:600; }
.overtime-row{ margin-top:12px; }
.main-score-row{ display:grid; grid-template-columns: 1fr auto 80px auto 1fr; align-items:center; margin-bottom:18px; }
.team-name-left{ text-align:right; font-size:1.8rem; font-weight:700; padding-right:20px; }
.team-name-right{ text-align:left; font-size:1.8rem; font-weight:700; padding-left:20px; }
.main-score-left, .main-score-right{ font-size:4.5rem; font-weight:800; line-height:1; }

.quarter-table{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:20px; padding:18px 30px; background:rgba(255,255,255,.45); border-radius:16px; }

.team-header-row{ display:grid; grid-template-columns: 1fr 180px 1fr; gap:40px; margin-bottom:15px; }
.team-header-left, .team-header-right{ font-size:2rem; font-weight:700; display:flex; justify-content:center; text-align:center; }

/* ??????????????????????1???? */
.game-result-grid{ display:grid; grid-template-columns: 1fr 180px 1fr; gap:40px; align-items:center; margin-top:30px; }
.score-side{ font-size:6rem; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; text-align:center; }
.quarter-column{ display:flex; flex-direction:column; justify-content:center; gap:8px; }
.quarter-line{ display:grid; grid-template-columns: 4.3ch 4.3ch 4.3ch; align-items:center; justify-content:center; }
.quarter-score-left, .quarter-score-right{ text-align:center; }
.quarter-label{ text-align:center; font-weight:700; color:#666; }

/* ????????? */
.game-navigation{ margin-top:50px; padding-top:25px; border-top:1px solid rgba(0,0,0,.1); display:flex; justify-content:space-between; align-items:center; }
.game-nav-button{ text-decoration:none; color:#444; font-weight:600; transition:.2s; }
.game-nav-button:hover{ color:#000; transform:translateY(-1px); }
/* ?????????????????? */
.game-nav-button svg,
.game-nav-button::after,
.game-nav-button::before {
    color: #8e1728 !important;
    fill: #8e1728 !important;
}

/* ==========================================================
   3. history page design
========================================================== */
.record-room{ max-width: 1100px; margin: 0 auto; padding:40px 30px 60px; }
.record-room-title{ font-size:2rem; font-weight:700; margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:3px solid #8e1728; }
.record-room .record-room-description{ font-size:1rem; color:#555; margin:0 0 1.5rem; }
.record-room-year{ font-size:2rem; margin:1.5rem 0; }
.record-room .record-room-years{ max-width:500px; display:flex; flex-direction:column; gap:12px; }
.record-room .year-card{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border:1px solid #ddd; border-radius:10px; background:#fff; text-decoration:none; color:#333; transition:all .2s ease; }
.record-room .year-card:hover{ background:#f8f8f8; border-color:#999; transform:translateX(6px); }
.record-room .year-text{ font-size:1.1rem; font-weight:600; }
.record-room .year-arrow{ color:#888; font-size:1.2rem; }
.record-room-navigation{ display:flex; justify-content:space-between; align-items:center; margin:.8rem 0 2rem; }
.record-room-navigation a{ text-decoration:none; font-weight:600; color:#8e1728; }
.record-room-navigation a:hover{ text-decoration:underline; }
/* ?????????????????? */
.record-room-navigation a svg,
.record-room-navigation a::after,
.record-room-navigation a::before {
    color: #8e1728 !important;
    fill: #8e1728 !important;
}

/* ??????PC???????1?????? */
.record-room .tournament-title{ margin:2rem 0 .5rem; padding:0.8rem 1.2rem; background:#fff5f6; border-left:6px solid #8e1728; border-radius:1px 1px ; font-size:1.2rem; font-weight:700; }
.record-room .record-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid #d8e1ea; border-radius:12px; overflow:hidden; margin-top:.5rem; margin-bottom:2rem; box-shadow:0 3px 12px rgba(0,0,0,.06); }
.record-room .record-table td{ padding:1rem 1rem; }
.record-room .record-table tr:not(:last-child) td{ border-bottom:1px solid #edf1f5; }

.record-room .result-cell{ display:flex; align-items:center; }
.record-room .stage-name{ width:9rem; }
/* ???????????????????????? */
.record-room .team-home{ width:7rem; text-align:right; color:#8e1728; font-weight:700; font-size: 1.1rem; }
.record-room .score{ width:6rem; text-align:center; }
/* ???????????????????????? */
.record-room .team-away{ width: 10rem; color:#444; text-decoration:underline; font-weight:500; font-size: 1.1rem; }
.record-room .team-away:hover{ text-decoration:underline; color:#000; }
.record-room .detail-link{ width: 3rem; }
.record-room .detail-link a{ min-width:60px; text-align:center; display:inline-block; padding:.4rem; border-radius:20px; background:#fff5f6; text-decoration:none; font-size:.9rem; transition:.2s; color:#8e1728; }
.record-room .detail-link a:hover{ background:#8e1728 !important; color:#fff !important; }

/* ==========================================================
   4 button
========================================================== */
.record-room-links{
    max-width:220px;
    margin:2rem auto 4rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.record-room-button{
    display:block;
    padding:0.9rem 1.2rem;
    border:2px solid #8e1728;
    border-radius:10px;
    text-align:center;
    font-weight:700;
    text-decoration:none;
    color:#8e1728;
    background:#fff;
    transition:.2s;
}
.record-room-button:hover{
    background:#8e1728 !important;
    color:#fff !important;
}

/* ==========================================================
   5 opp page style(PC)
========================================================== */
.record-summary{ margin:0 0 2rem; font-size:1.1rem; }
.record-summary strong{ font-size:1.4rem; color:#8e1728; }
.opponent-history{ display:flex; flex-direction:column; gap:1.2rem; }
.opponent-card{ display:block; padding:1rem 1.2rem; border:1px solid #ddd; border-radius:12px; background:#fff; text-decoration:none; color:inherit; transition:.2s; }
.opponent-card:hover{ border-color:#8e1728; box-shadow:0 6px 16px rgba(0,0,0,.08); transform:translateY(-2px); }
.opponent-date{ font-size:1rem; color:#777; margin-bottom:.4rem; }
.opponent-tournament{ font-size:1rem; font-weight:700; margin-bottom:.8rem; }
.opponent-result{ display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; }
/* ?????????????????????????? */
.opponent-result .team-home{ flex:0 0 auto; color:#8e1728; font-weight:700; font-size: 1.1rem; }
.opponent-result .score{ flex:0 0 5rem; text-align:center; font-weight:bold; font-size:1.1rem; }
.opponent-detail{ text-align:right; color:#8e1728; font-size:.9rem; font-weight:600; }
/* ????????????????????? */
.opponent-detail svg,
.opponent-detail::after,
.opponent-detail::before {
    color: #8e1728 !important;
    fill: #8e1728 !important;
}

/* ??????????????????????????? */
.record-room .opponent-result .team-away {
    flex:1;
    color: inherit;
    font-weight: normal;
    text-decoration: none;
    font-size: 1.1rem;
}
/* ??????????????? */
.record-room .opponent-card:hover .team-away {
    text-decoration: none;
}


/* ==========================================================
  6 tablet style(768px)
========================================================== */
@media (max-width: 768px){
    /*game detail*/
    .single-game-card{ padding:20px; }
    .team-header-row{ grid-template-columns: 1fr 120px 1fr; gap:10px; }
    .single-game-card .game-meta{ font-size:.95rem; }
    .team-header-left,.team-header-right{ font-size:1.2rem; font-weight:700; display:flex; justify-content:center; align-items:center; text-align:center; }
    .game-result-grid{ grid-template-columns: 1fr 120px 1fr; gap:10px; }
    .score-side{ font-size:36px; display:flex; justify-content:center; align-items:center; text-align:center; }
    .quarter-line{ font-size:12px; }
    .quarter-label{ width:32px; }

    /*table design*/
    .record-room .result-cell{ flex-wrap:wrap; gap:0.3rem; }
    .record-room .stage-name{ width:100%; }
    .record-room .team-home{ width:auto; text-align:right; }
    .record-room .score{ width:5rem; }
    .record-room .team-away{ width:7rem; flex:none; }
    .record-room .detail-link{ width:3rem; text-align:right; margin-top: 0; }

    /*opp history*/
    .opponent-result{ gap:.5rem; }
    .opponent-result .score{ flex-basis:4.8rem; font-size:1rem; }
    .opponent-detail{ margin-top: .4rem; }
}


/* ==========================================================
   7:tablet(480px)
========================================================== */
@media (max-width: 480px){
    /*game detail*/
    .team-header-row{ grid-template-columns: 1fr 120px 1fr; gap:10px; }
    .team-header-left,.team-header-right{ font-size:1.1rem; font-weight:700; display:flex; justify-content:center; align-items:center; text-align:center; }
    .game-result-grid{ grid-template-columns: 1fr 120px 1fr; }
    .score-side{ font-size:28px; display:flex; justify-content:center; align-items:center; text-align:center; }
    .quarter-line{ font-size:11px; }

    /*table*/
    .record-room .detail-link{
        width: 100% !important;
        text-align: right !important;
        margin-top: 0.5rem !important;
    }
}

/* ==========================================================
   8. top page design
========================================================== */

/* home container */
.home-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* main visual */
.home-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    border-radius: 0;
    margin: 0 0 50px 0;
    aspect-ratio: 3 / 1;
}

.hero-inner {
    position: relative;
    z-index: 2;
}



/* home-section(midashi) */
.home-section {
    margin-bottom: 40px;
}
.home-section .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8e1728;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #edf1f6;
    position: relative;
}
.home-section .section-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #8e1728;
}

/* --- 2 column layout --- */
.home-columns-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-top: 20px;
}

/* 2 column left side(65%)*/
.home-main-column {
    flex: 0 0 65%;
    min-width: 0;
}

/* 2 column right side(32%) */
.home-sidebar-column {
    flex: 0 0 32%;
    position: sticky;
    top: 20px;
}

/* --- news list design --- */
.news-list {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    overflow: hidden;
}
.news-item {
    border-bottom: 1px solid #edf1f6;
    transition: background 0.2s ease;
}
.news-item:last-child {
    border-bottom: none;
}
.news-link {
    display: block;
    padding: 20px 24px;
    text-decoration: none;
    color: #333;
}
.news-item:hover {
    background-color: #fff5f6;
}
.news-meta {
    margin-bottom: 6px;
}
.news-date {
    font-size: 0.85rem;
    color: #94777c;
    font-weight: 600;
}
.news-item-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.4;
    color: #8e1728;
}
.news-excerpt {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}
.view-all-container {
    margin-top: 20px;
    text-align: right;
}
.btn-view-all {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #8e1728;
    text-decoration: none;
    transition: transform 0.2s;
}
.btn-view-all:hover {
    transform: translateX(4px);
}
/* TOP????????????????????????? */
.btn-view-all svg,
.btn-view-all::after,
.btn-view-all::before {
    color: #8e1728 !important;
    fill: #8e1728 !important;
}

/* --- (2) Instagram design --- */
.instagram-widget-container {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    min-height: 400px;
}
.insta-placeholder {
    height: 100%;
    min-height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed #e6b3bc;
    border-radius: 12px;
    background: #fff9fa;
    text-align: center;
    color: #8e1728;
    padding: 20px;
}
.insta-placeholder p {
    margin: 5px 0;
    font-weight: 600;
}

/* ==========================================================
  9. top page response
========================================================== */
@media (max-width: 992px) {
    .home-columns-wrapper {
        gap: 25px;
    }
    .home-main-column { flex: 0 0 60%; }
    .home-sidebar-column { flex: 0 0 36%; }
}

@media (max-width: 768px) {
    .home-columns-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .home-main-column,
    .home-sidebar-column {
        width: 100%;
        flex: none;
    }
    .home-hero {
        margin: 15px 0 35px;
    }
    .news-link {
        padding: 16px 18px;
    }
    .news-item-title {
        font-size: 1rem;
    }
    .news-excerpt {
        font-size: 0.85rem;
    }
}