/*
Theme Name: Hanabatake
Theme URI: https://hanabatake.site
Author: hanabatake
Description: はなばたけ 公式サイト用オーダーメイドテーマ（花束・ブライダル装花・お供え・フラワーレッスン）
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hanabatake
*/

:root{
  --purple:#C9B8E0;
  --purple-deep:#5C3F7D;
  --ink:#241A30;
  --green:#B7D4B0;
  --green-deep:#5E8C57;
  --bg:#D9ECD3;
  --green-pale:#D9ECD3;
  --tx:#201A26;
  --mu:#6E6676;
  --line:#E4DFE8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
  font-weight:600;
  margin:0 0 .5em;
  letter-spacing:.04em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
section{padding:100px 0}
@media (max-width:700px){section{padding:64px 0}.wrap{padding:0 20px}}

/* ---- reveal on scroll ---- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:translateY(0)}

/* ---- header: solid dark bar, no blur, no pill button ---- */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--ink);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.logo{
  font-family:"Shippori Mincho",serif;font-size:1.15rem;letter-spacing:.14em;
  color:#fff;
}
nav.main-nav{display:flex;gap:34px;align-items:center}
nav.main-nav a{
  font-size:.82rem;color:#fff;letter-spacing:.12em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid transparent;
}
nav.main-nav a:hover{border-bottom-color:var(--purple)}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;color:#fff;cursor:pointer}
@media (max-width:860px){
  nav.main-nav{
    position:fixed;top:72px;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  nav.main-nav.open{max-height:420px}
  nav.main-nav a{width:100%;padding:18px 32px;border-top:1px solid rgba(255,255,255,.12);border-bottom:none}
  .nav-toggle{display:block}
}

/* ---- hero: full-bleed photo, no overlay text, no gradient box ---- */
.hero{position:relative;height:100vh;overflow:hidden;background:var(--green-pale)}
.hero img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;
  transform:scale(.8);
  clip-path:circle(0% at 50% 50%);
  animation:heroBloom 1.8s cubic-bezier(.19,1,.22,1) forwards;
}
@keyframes heroBloom{
  0%{opacity:0;transform:scale(.8);clip-path:circle(0% at 50% 50%)}
  55%{opacity:1}
  100%{opacity:1;transform:scale(1);clip-path:circle(150% at 50% 50%)}
}
.hero-copy{
  position:absolute;left:50%;top:50%;z-index:2;margin:0;
  transform:translate(-50%,-50%);
  width:min(76%,500px);
  background:rgba(255,255,255,.22);
  border-radius:50%;
  padding:.35em .5em;
  text-align:center;font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.15rem,5vh,2.1rem);letter-spacing:.12em;line-height:1.9;
  color:var(--ink);
}
.hero-copy .ln{display:inline-block}
.hero-copy .ln:first-child{position:relative;left:-1em}
.hero-copy .ch{
  display:inline-block;opacity:0;transform:translateY(8px);
  animation:heroCopyIn .3s ease forwards;
}
@keyframes heroCopyIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width:700px){.hero-copy{font-size:clamp(.95rem,3.3vh,1.45rem);width:82%}}
@media (max-width:700px){.hero{height:70vh}}

/* ---- store name intro: plain white section, large serif, like reference's catch line ---- */
.store-intro{text-align:center;padding:56px 0 40px;background:var(--green-pale)}
.store-intro .store-name{
  font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:.2em;color:var(--ink);
  margin:0;
}

/* ---- eyebrow label: section heading, large ---- */
.eyebrow{
  display:block;font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:2.3rem;letter-spacing:.1em;color:var(--green-deep);
  margin-bottom:.5em;text-align:center;
}

/* ---- circular link nav (mirrors reference's photo-circle menu) ---- */
.circle-nav{text-align:center}
.circle-nav .intro-text{max-width:640px;margin:0 auto 56px;color:var(--mu);text-align:center}
.circle-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;
}
@media (max-width:860px){.circle-grid{grid-template-columns:repeat(2,1fr)}}
.circle-item{text-align:center}
.circle-photo{
  width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:var(--purple);
}
.circle-photo img{width:100%;height:100%;object-fit:cover}
.circle-photo.notext{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--purple),var(--green));
}
.circle-photo.notext span{color:#fff;font-size:.95rem;letter-spacing:.1em;padding:0 1em}
.circle-item .label{
  display:block;margin-top:20px;font-family:"Shippori Mincho",serif;
  font-size:1rem;letter-spacing:.06em;color:var(--ink);
}
.circle-item .label-sub{display:block;margin-top:4px;font-size:.78rem;color:var(--mu)}

/* ---- gallery: flush photos, no card chrome ---- */
#gallery{background:var(--green-pale)}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
}
@media (max-width:820px){.gallery-grid{grid-template-columns:1fr}}
.gallery-item{position:relative}
.gallery-item .ph{aspect-ratio:3/4;overflow:hidden;background:#EFEAF2}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery-item .cap{
  margin-top:14px;font-size:.92rem;color:var(--mu);text-align:center;letter-spacing:.04em;
}
.gallery-item .cap b{display:block;font-size:1.1rem;color:var(--ink);font-family:"Shippori Mincho",serif;margin-bottom:.2em}

/* ---- buttons: plain bordered rectangle, no pill ---- */
.btn{
  display:inline-block;padding:.9em 2em;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--ink);color:var(--ink);
}
.btn:hover{background:var(--ink);color:#fff}
.btn.on-dark{border-color:rgba(255,255,255,.6);color:#fff}
.btn.on-dark:hover{background:#fff;color:var(--ink)}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:2em}

/* ---- contact / order block: solid dark, sharp white label bars ---- */
.contact-block{background:var(--ink);color:#fff;padding:90px 0}
.contact-block .wrap{text-align:center}
.contact-block h2{color:#fff}
.contact-block p{color:rgba(255,255,255,.78);max-width:560px;margin:0 auto}

.info-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14);margin-top:64px}
@media (max-width:700px){.info-cols{grid-template-columns:1fr}}
.info-col{background:var(--ink);padding:0 28px 28px}
.info-col .label-bar{
  display:inline-block;background:#fff;color:var(--ink);
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.5em 1.4em;margin:28px 0 20px;
}
.info-col p{font-size:.88rem;color:rgba(255,255,255,.85);margin:0 0 .6em}

/* ---- blog preview / list ---- */
#blog-preview{background:var(--green-pale)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;margin-top:56px}
@media (max-width:820px){.blog-grid{grid-template-columns:1fr}}
.post-card{border-bottom:1px solid var(--line);padding-bottom:28px}
.post-card .thumb{aspect-ratio:4/3;background:#F1EEF4;overflow:hidden;margin-bottom:18px}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .date{font-size:.75rem;color:var(--green-deep);letter-spacing:.12em}
.post-card h3{font-size:1rem;margin:.5em 0;font-weight:600}
.post-card p{font-size:.85rem;color:var(--mu);margin:0}
.empty-note{
  text-align:center;color:var(--mu);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:56px 24px;margin-top:48px;font-size:.9rem;
}
.center-btn{text-align:center;margin-top:56px}

/* ---- pagination: plain squared, no pill ---- */
.pagination{display:flex;gap:4px;justify-content:center;margin-top:64px}
.pagination a,.pagination span{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-size:.82rem;color:var(--tx);
}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- single post ---- */
.single-post{max-width:720px;margin:0 auto}
.single-post .date{color:var(--green-deep);font-size:.8rem;letter-spacing:.14em}
.single-post h1{font-size:1.9rem;margin:.3em 0 1em}
.single-post .entry-content{color:var(--tx)}
.single-post .entry-content img{margin:1.6em 0}
.back-link{
  display:inline-block;margin-top:3.2em;color:var(--ink);font-size:.82rem;
  letter-spacing:.1em;border-top:1px solid var(--line);padding-top:1.4em;
}

/* ---- footer: solid dark, plain text, square chevron ---- */
footer.site-footer{background:var(--ink);padding:48px 0 36px;text-align:center}
footer.site-footer .logo{
  display:inline-block;margin-bottom:1.4em;
  font-family:"Shippori Mincho",serif;color:#fff;letter-spacing:.14em;font-size:1rem;
}
footer.site-footer nav{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:1.8em}
footer.site-footer nav a{font-size:.78rem;color:rgba(255,255,255,.75);letter-spacing:.1em;text-transform:uppercase}
footer.site-footer .copy{margin-top:2em;font-size:.72rem;color:rgba(255,255,255,.45);letter-spacing:.06em}