/*
Theme Name: わん運動会
Theme URI: https://example.com
Author: フォトスタジオK
Description: 愛犬と楽しむ運動会イベント「わん運動会」公式サイト用テーマ。イベント概要・主催の思い・協賛企業紹介・イベント情報・写真販売(フォトレコ連携)・協賛お問い合わせを1テーマで完結できます。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: wan-undokai
*/

/* ==========================================================================
   0. Design Tokens
   ========================================================================== */
:root{
  --paper:      #FFFBF2;
  --paper-dim:  #FBF2DD;
  --ink:        #1F2A24;
  --ink-soft:   #4B5750;
  --red:        #D7263D;
  --red-deep:   #A81D2E;
  --navy:       #16324F;
  --navy-deep:  #0E2136;
  --sun:        #F6B93B;
  --turf:       #4C9F70;
  --line:       #E4D9BE;
  --white:      #FFFFFF;

  --font-display: 'Reggae One', 'Zen Maru Gothic', sans-serif;
  --font-body:    'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --container: 1160px;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
}

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:400; line-height:1.4; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline: 3px solid var(--sun); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
@media (max-width: 640px){
  .container{ padding: 0 var(--space-sm); }
}

.section{ padding: var(--space-xl) 0; }
@media (max-width: 780px){
  .section{ padding: var(--space-lg) 0; }
}
.section--dim{ background: var(--paper-dim); }
.section--navy{ background: var(--navy); color: var(--paper); }
.section--navy h2, .section--navy h3{ color: var(--paper); }

.section-head{ max-width: 640px; margin: 0 0 var(--space-md); }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-title{ font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--navy); }
.section-lead{ color: var(--ink-soft); margin-top: .6em; }

/* ==========================================================================
   2. Bunting flags (万国旗) divider — the site's signature motif
   ========================================================================== */
.bunting{
  display:flex;
  overflow:hidden;
  height: 26px;
  line-height:0;
}
.bunting span{
  flex: 1 0 34px;
  height: 26px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin-right: 6px;
}
.bunting span:nth-child(5n+1){ background: var(--red); }
.bunting span:nth-child(5n+2){ background: var(--sun); }
.bunting span:nth-child(5n+3){ background: var(--navy); }
.bunting span:nth-child(5n+4){ background: var(--turf); }
.bunting span:nth-child(5n+5){ background: var(--white); border:1px solid var(--line); }

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .9rem var(--space-md);
  max-width: var(--container);
  margin:0 auto;
}
.site-branding{ display:flex; align-items:center; gap:.7rem; }
.site-branding img{ max-height: 52px; width:auto; border-radius: 8px; }
.site-branding__text{ display:flex; flex-direction:column; }
.site-title{ font-family: var(--font-display); font-size: 1.35rem; color: var(--red); letter-spacing:.02em; }
.site-tagline{ font-size:.72rem; color: var(--ink-soft); }

.main-nav ul{ display:flex; gap: 1.6rem; }
.main-nav a{
  font-weight:700;
  font-size:.95rem;
  position:relative;
  padding: .3rem 0;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:3px; background: var(--red);
  transition: width .2s ease;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{ width:100%; }

.nav-toggle{
  display:none;
  background:none; border:2px solid var(--ink); border-radius: 10px;
  width:44px; height:44px;
  position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:10px; right:10px; height:3px; background:var(--ink);
}
.nav-toggle span{ top:20px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper);
    border-bottom: 3px solid var(--ink);
    max-height:0; overflow:hidden;
    transition: max-height .25s ease;
  }
  .main-nav.is-open{ max-height: 480px; }
  .main-nav ul{ flex-direction:column; gap:0; padding: .5rem var(--space-md) 1rem; }
  .main-nav a{ display:block; padding: .8rem 0; border-bottom:1px solid var(--line); }
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .9rem 1.7rem;
  border-radius: 999px;
  font-weight:700;
  font-size: 1rem;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover, .btn:focus-visible{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active{ transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.btn--primary{ background: var(--red); color: var(--white); border-color: var(--red-deep); box-shadow: 4px 4px 0 var(--red-deep); }
.btn--primary:hover{ box-shadow: 6px 6px 0 var(--red-deep); }
.btn--navy{ background: var(--navy); color: var(--white); border-color: var(--navy-deep); box-shadow: 4px 4px 0 var(--navy-deep); }
.btn--navy:hover{ box-shadow: 6px 6px 0 var(--navy-deep); }
.btn--ghost{ background: transparent; }
.btn-row{ display:flex; gap: 1rem; flex-wrap:wrap; }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{
  position:relative;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  color: var(--white);
  text-align:center;
  padding: var(--space-xl) 0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,33,54,.55), rgba(14,33,54,.85));
}
.hero__inner{ position:relative; z-index:1; max-width: 760px; margin:0 auto; padding: 0 var(--space-md); }
.hero__eyebrow{
  display:inline-block; background: var(--sun); color: var(--navy-deep);
  font-weight:700; font-size:.85rem; padding:.35rem 1rem; border-radius:999px; margin-bottom:1.2rem;
}
.hero__title{
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  color: var(--white);
  text-shadow: 3px 3px 0 var(--red-deep);
  letter-spacing:.02em;
}
.hero__lead{ margin-top:1.2rem; font-size:1.15rem; color:#F3EFE2; }
.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap: .8rem;
  margin: 1.6rem 0;
}
.hero__meta span{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size:.92rem;
}
.hero .btn-row{ justify-content:center; margin-top: 1.6rem; }

/* ==========================================================================
   6. Sponsor highlight (top page)
   ========================================================================== */
.sponsor-highlight__tier{ margin-bottom: var(--space-md); }
.sponsor-highlight__tier-label{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; color: var(--red); margin-bottom: 1rem;
}
.sponsor-highlight__tier-label::after{ content:""; flex:1; height:2px; background: var(--line); }

.sponsor-grid{ display:grid; gap: 1.2rem; }
.sponsor-grid--xl{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.sponsor-grid--lg{ grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); }
.sponsor-grid--md{ grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }

.sponsor-card{
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  padding: 1.4rem 1rem;
  text-align:center;
  transition: transform .15s ease;
}
.sponsor-grid--xl .sponsor-card{ padding: 2rem 1.4rem; }
.sponsor-card:hover{ transform: translateY(-4px); }
.sponsor-card img{ max-height: 64px; width:auto; margin:0 auto; }
.sponsor-grid--xl .sponsor-card img{ max-height: 88px; }
.sponsor-card__name{ font-weight:700; font-size:.95rem; }
.sponsor-card__note{ font-size:.8rem; color: var(--ink-soft); }
.sponsor-card__placeholder{
  width:100%; aspect-ratio: 3/2; border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, var(--paper-dim), var(--paper-dim) 10px, var(--paper) 10px, var(--paper) 20px);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-size:.75rem;
}

.sponsor-cta{
  margin-top: var(--space-md);
  border: 3px dashed var(--red);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  text-align:center;
  background: var(--paper);
}

/* ==========================================================================
   7. Content blocks / cards
   ========================================================================== */
.two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-lg); align-items:center; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; gap: var(--space-md); } }
.two-col--reverse{ direction: rtl; }
.two-col--reverse > *{ direction: ltr; }

.card{
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 1.8rem;
}
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.4rem; }

.info-table{ width:100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-md); overflow:hidden; border: 2px solid var(--ink); }
.info-table th, .info-table td{ padding: 1rem 1.2rem; text-align:left; border-bottom: 1px solid var(--line); }
.info-table th{ width: 9.5em; background: var(--paper-dim); color: var(--navy); white-space:nowrap; }
.info-table tr:last-child th, .info-table tr:last-child td{ border-bottom:none; }
@media (max-width: 600px){
  .info-table, .info-table thead, .info-table tbody, .info-table th, .info-table td, .info-table tr{ display:block; width:100%; }
  .info-table th{ border-bottom:none; padding-bottom:.3rem; }
  .info-table td{ padding-top:0; }
}

/* Program / schedule — lane-line list (legitimate sequence content) */
.program-list{ counter-reset: lane; }
.program-item{
  counter-increment: lane;
  display:flex; gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 2px dashed var(--line);
  align-items:baseline;
}
.program-item:last-child{ border-bottom:none; }
.program-item::before{
  content: counter(lane);
  font-family: var(--font-display);
  font-size:1.4rem;
  color: var(--white);
  background: var(--red);
  border-radius:50%;
  width:2.1rem; height:2.1rem;
  flex: none;
  display:flex; align-items:center; justify-content:center;
}
.program-item__time{ font-weight:700; color: var(--navy); min-width: 6.5em; }
.program-item__body strong{ display:block; color: var(--ink); }
.program-item__body span{ font-size:.88rem; color: var(--ink-soft); }

/* ==========================================================================
   8. Photo sales page
   ========================================================================== */
.photo-cta{
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align:center;
}
.photo-cta h3{ font-size: clamp(1.4rem,3vw,2rem); color:var(--white); }
.photo-cta .btn{ background: var(--white); color: var(--red); border-color: var(--white); box-shadow:4px 4px 0 var(--navy-deep); margin-top:1.4rem; }
.photo-steps{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; margin-top: var(--space-md); }
.photo-steps .card{ text-align:center; }
.photo-steps .card .num{ font-family: var(--font-display); color: var(--turf); font-size:2rem; display:block; margin-bottom:.4rem; }

/* ==========================================================================
   9. Contact form
   ========================================================================== */
.contact-form{ max-width: 640px; margin: 0 auto; background: var(--white); border:2px solid var(--ink); border-radius: var(--radius-md); padding: var(--space-md); }
.form-row{ margin-bottom: 1.3rem; }
.form-row label{ display:block; font-weight:700; margin-bottom:.4rem; }
.form-row .required{ color: var(--red); font-size:.78rem; margin-left:.3rem; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=tel], .form-row select, .form-row textarea{
  width:100%; padding:.8rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--line);
  font-family: inherit; font-size: 1rem; background: var(--paper);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color: var(--red); }
.form-row textarea{ min-height: 140px; resize: vertical; }
.form-check{ display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; }
.hp-field{ position:absolute; left:-9999px; }
.form-notice{ padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1.4rem; font-weight:700; }
.form-notice--success{ background: #E4F4EA; color: var(--turf); border:2px solid var(--turf); }
.form-notice--error{ background: #FBE4E6; color: var(--red-deep); border:2px solid var(--red); }

/* ==========================================================================
   10. Organizer message
   ========================================================================== */
.organizer{ display:grid; grid-template-columns: 260px 1fr; gap: var(--space-lg); align-items:start; }
@media (max-width: 780px){ .organizer{ grid-template-columns: 1fr; } }
.organizer__photo img{ border-radius: var(--radius-lg); border: 3px solid var(--ink); }
.organizer__name{ font-weight:700; margin-top: 1rem; }
.organizer__role{ font-size:.85rem; color: var(--ink-soft); }
.organizer__body p:first-of-type::first-letter{
  font-family: var(--font-display); font-size: 2.6rem; color: var(--red); float:left; line-height:1; margin-right:.15em;
}

/* ==========================================================================
   11. WYSIWYG content fallback (the_content)
   ========================================================================== */
.entry-content h2{ color: var(--navy); font-size:1.5rem; margin: 1.6em 0 .6em; }
.entry-content h3{ color: var(--navy); font-size:1.2rem; margin: 1.4em 0 .5em; }
.entry-content p{ margin-bottom: 1.1em; }
.entry-content ul{ list-style: disc; padding-left: 1.4em; margin-bottom:1.1em; }
.entry-content ul li{ margin-bottom:.4em; }
.entry-content a{ color: var(--red); text-decoration: underline; text-underline-offset:.2em; }
.entry-content img{ border-radius: var(--radius-md); }
.entry-content figure{ margin: 1.6em 0; }
.entry-content .wp-block-gallery{ margin: 1.6em 0; }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer{ background: var(--navy-deep); color: #DCE4EA; padding: var(--space-lg) 0 var(--space-md); }
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-md); }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-title{ color: var(--white); font-family: var(--font-display); font-size:1.2rem; margin-bottom:1rem; }
.footer-nav a{ display:block; padding:.35rem 0; color:#C7D2D9; }
.footer-nav a:hover{ color: var(--sun); }
.footer-sns{ display:flex; gap:.8rem; margin-top:.6rem; }
.footer-sns a{ width:38px; height:38px; border-radius:50%; border:1px solid #3C556A; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.footer-bottom{ text-align:center; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid #26415A; font-size:.8rem; color:#8FA0AC; }

/* Page hero (inner pages) */
.page-hero{
  background: var(--navy);
  color: var(--white);
  text-align:center;
  padding: var(--space-lg) var(--space-md);
}
.page-hero h1{ font-size: clamp(2rem,5vw,3rem); }
.page-hero p{ color:#D7E0E6; margin-top:.6rem; }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--white); padding:.7rem 1rem; z-index:100; }
.skip-link:focus{ left: 1rem; top: 1rem; }