/* ============================================================
   KEMPO DANKAN — WKDF site
   Faithful reproduction of the original site's layout & colors:
   blue nav bar / cyan banner & sidebars / pale-yellow boxes /
   blue body text on inner pages. Only fonts modernised and
   text-as-image banners converted to real text.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');

:root{
  --white:#FFFFFF;
  --black:#000000;
  --blue:#0000FF;
  --cyan:#80FFFF;
  --yellow-link:#FFFF80;
  --yellow-box:#FFFFC4;
  --visited:#800080;
  --active:#CC0000;
}

*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  margin:0;
  padding-bottom:52px;
  background:var(--white);
  color:var(--black);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:1.6;
  overflow-wrap:break-word;
  word-break:break-word;
}
a{color:var(--blue); text-decoration:underline;}
a:visited{color:var(--visited);}
a:hover, a:active{color:var(--active);}
img{max-width:100%; display:block;}

h1,h2,h3,h4{
  font-family:'Dancing Script', cursive;
  color:var(--blue);
  font-weight:700;
  line-height:1.2;
  margin:0 0 0.3em;
}

/* ---------- nav bar + banner, sticky together as one header unit ---------- */
.site-header-sticky{position:sticky; top:0; z-index:100; box-shadow:0 1px 0 rgba(0,0,0,0.15);}
.navbar{background:var(--blue);}
.navbar .inner{
  max-width:min(1500px, 94vw); margin:0 auto; padding:0.5rem 0.8rem;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:0.3rem 0;
}
.navbar ul{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; margin:0; padding:0; align-items:center; gap:0.15rem;}
.navbar li{display:flex; align-items:center;}
.navbar a{
  color:var(--cyan); font-weight:bold; font-size:0.82rem; text-decoration:none;
  padding:0.4rem 0.7rem; border-radius:16px; transition:background-color 0.15s ease, color 0.15s ease;
}
.navbar a:hover{background:rgba(255,255,255,0.2); color:#fff; text-decoration:none;}
.navbar a.active{background:rgba(255,255,255,0.12);}
.navbar a.lang{display:flex; align-items:center; text-decoration:none; padding:0.3rem 0.45rem;}
.navbar a.lang svg{display:block; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,0.5);}
.navbar a.lang:hover{background:rgba(255,255,255,0.2); opacity:1;}

/* ---------- footer (fixed to the bottom of the viewport, like the sticky header at top) ---------- */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  height:52px; display:flex; align-items:center;
  background:#fff; border-top:2px solid var(--blue);
}
.footer-inner{
  width:100%; max-width:min(1500px, 94vw); margin:0 auto; padding:0 0.8rem;
  display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap;
}
.footer-inner a{color:var(--blue); font-size:0.8rem; font-weight:bold; text-decoration:none;}
.footer-inner a:hover{text-decoration:underline;}

/* ---------- banner (was title.jpg / wkdf.jpg) ---------- */
.banner{background:var(--cyan); text-align:center; padding:0.8rem 1rem;}
.banner h1{font-size:clamp(1.6rem, 4.2vw, 2.6rem); margin-bottom:0.1em;}
.banner p{color:#000; font-size:0.85rem; margin:0;}

/* ---------- shared page frame ---------- */
.page-wrap{max-width:min(1500px, 94vw); margin:0 auto; padding:1rem 0.8rem 1.6rem;}

/* ============ HOMEPAGE: 3-column layout ============ */
.home-grid{display:grid; grid-template-columns:minmax(190px,300px) minmax(0,1fr) minmax(190px,300px); gap:0 20px;}
@media (max-width: 860px){
  .home-grid{grid-template-columns:1fr;}
  .home-grid .side-col{order:initial;}
}

.side-col{display:flex; flex-direction:column; gap:14px; padding-top:0.4rem; min-width:0;}

.side-box{border:1px solid #bfe8e8;}
.side-box .sb-head{
  background:var(--cyan); padding:0.35rem 0.6rem;
}
.side-box .sb-head a{color:var(--blue); font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.95rem; text-decoration:none;}
.side-box .sb-head a:hover{text-decoration:underline;}
.side-box .sb-body{
  background:var(--yellow-box); color:#000; font-size:0.82rem; padding:0.6rem;
}
.side-box .sb-body a{font-size:0.82rem; font-weight:normal;}

.center-col{padding-top:0.4rem; min-width:0;}
.center-box{
  background:var(--cyan); border:1px solid #4dd2d2; padding:0.9rem 1.1rem;
}
.center-item{color:var(--blue); font-size:0.92rem; overflow:hidden; padding-bottom:0.6rem; margin-bottom:0.6rem; border-bottom:1px solid #4dd2d2;}
.center-item:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.center-item p{color:var(--blue); margin:0;}

/* ============ INNER PAGES: content + sidebar photo ============ */
.inner-grid{display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:0 16px;}
@media (max-width: 700px){
  .inner-grid{grid-template-columns:1fr;}
}
.content-col{color:var(--blue); font-size:0.92rem; padding-top:0.6rem; min-width:0;}
.content-col p{color:var(--blue); margin:0 0 1em;}
.content-col .page-title{
  font-family:'Dancing Script', cursive; color:var(--blue); font-size:1.9rem; margin-bottom:0.5rem;
}
.content-col em{font-style:italic;}
.content-col strong{font-weight:bold;}

.sidebar-col{background:var(--cyan); padding:0.8rem 0.6rem; text-align:center;}
.sidebar-col img{margin:0 auto 0.6rem;}
.sidebar-col p{color:var(--blue); font-size:0.78rem; text-align:left; margin:0;}

/* ---------- floated bio/highlight photos (home center box) ---------- */
.float-img{width:110px; height:110px; object-fit:cover;}
.float-left{float:left; margin:0 12px 8px 0;}
.float-right{float:right; margin:0 0 8px 12px;}
.clearfix::after{content:"";display:table;clear:both;}

/* ---------- belt path (Join Us) — factual colours, not brand colours ---------- */
.path{display:flex; flex-wrap:wrap; border-radius:2px; overflow:hidden; margin:1rem 0 1.4rem; border:1px solid #999;}
.path div{flex:1 1 80px; min-width:0; padding:0.7rem 0.6rem; font-size:0.7rem; font-weight:bold; text-transform:uppercase; text-align:center;}
.path .pw{background:#F1EBDD; color:#2b2620;}
.path .po{background:#E08A2E; color:#2b1c08;}
.path .pb{background:#6B4A34; color:#fff;}
.path .pr{background:#B31217; color:#fff;}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid #bfe8e8; padding:0.7rem 0;}
details.faq summary{
  cursor:pointer; font-weight:bold; color:var(--blue); list-style:none;
  display:flex; justify-content:space-between; gap:1rem; font-size:0.92rem;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+'; font-size:1.1rem; line-height:1;}
details.faq[open] summary::after{content:'\2212';}
details.faq p{margin-top:0.5rem;}

/* ---------- news / archive ---------- */
.agenda{background:var(--yellow-box); border:1px solid var(--yellow-link); padding:0.9rem 1.1rem; margin-bottom:1.2rem;}
.agenda h3{color:var(--blue); font-size:1.3rem;}
.agenda ul{margin:0.5rem 0 0; padding-left:1.1rem; color:#000;}
.agenda li{margin-bottom:0.3rem;}
.agenda p{color:#000;}

.archive-item{padding:0.9rem 0; border-top:1px solid #cfe;}
.archive-item:first-child{border-top:none;}
.archive-item h4{font-size:0.85rem; color:var(--blue); margin-bottom:0.3em; font-weight:bold; font-family:Arial, sans-serif;}

/* ---------- links page ---------- */
.linklist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0.4rem 1.6rem;}
.linklist li{border-bottom:1px dotted #99c; padding-bottom:0.3rem;}
@media (max-width:640px){.linklist{grid-template-columns:1fr;}}

/* ---------- video (modern click-to-play facade: real thumbnail preview,
   loads + autoplays only after a click — no iframe loaded up front) ---------- */
.video-grid{display:grid; gap:1.4rem;}
.video-intro{color:var(--blue); font-size:0.92rem; margin-bottom:0.5rem;}
.yt-facade{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border:1px solid #4dd2d2; background:#000; cursor:pointer;
}
.yt-facade img{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
}
.yt-facade iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.yt-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; background:rgba(204,0,0,0.85);
  border:2px solid #fff; color:#fff; font-size:1.4rem; display:flex;
  align-items:center; justify-content:center; cursor:pointer; padding:0 0 0 4px;
}
.yt-facade:hover .yt-play{background:var(--active);}
.video-note{font-size:0.8rem; color:var(--blue); margin-top:0.4rem;}

/* ---------- contact form ---------- */
.contact-form{max-width:520px;}
.contact-form label{display:block; font-size:0.85rem; font-weight:bold; color:var(--blue); margin:0.8rem 0 0.25rem;}
.contact-form input, .contact-form textarea{
  width:100%; font-family:Verdana, Arial, sans-serif; font-size:0.9rem;
  padding:0.5rem 0.6rem; border:1px solid #4dd2d2; border-radius:3px; color:#000; background:#fff;
}
.contact-form textarea{resize:vertical; min-height:110px;}
.contact-form button{
  margin-top:1rem; background:var(--blue); color:#fff; border:2px solid var(--blue);
  font-weight:bold; font-size:0.92rem; padding:0.6rem 1.4rem; border-radius:3px; cursor:pointer;
  font-family:Verdana, Arial, sans-serif;
}
.contact-form button:hover{background:var(--active); border-color:var(--active);}
.form-note{font-size:0.78rem; color:#333; margin-top:0.6rem;}
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"]{
  border-color:#CC0000; background:#fff6f6;
}
.field-error{
  color:#a61b13; font-size:0.78rem; margin:0.25rem 0 0; min-height:1em;
}
.form-status{
  max-width:520px; padding:0.9rem 1.1rem; border-radius:4px; font-size:0.92rem; margin-top:1rem;
}
.form-status-ok{background:#e6f9e6; border:1px solid #2e7d32; color:#1b5e20;}
.form-status-err{background:#fdecea; border:1px solid #CC0000; color:#a61b13;}
.checkbox-row{
  display:flex; align-items:flex-start; gap:0.5rem; margin-top:1rem;
  font-size:0.85rem; color:#000;
}
.checkbox-row input{width:auto; margin-top:0.2rem; flex:none;}