/*
Theme Name: Hello Flower
Author: Hello Flower
Description: Custom botanical WordPress theme for the Hello Flower plant-learning site. Responsive, accessible, Customizer-driven.
Version: 1.2.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: hello-flower
Tags: blog, one-column, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

:root{
  --hf-green:#236b2d;
  --hf-dark-green:#155722;
  --hf-pink:#e85c82;
  --hf-purple:#7651a8;
  --hf-gold:#e8a414;
  --hf-blue:#2e83bd;
  --hf-cream:#fffdf7;
  --hf-ink:#222;
  --hf-muted:#5b5b5b;
  --hf-radius:20px;
  --hf-shadow:0 8px 24px rgba(35,107,45,.10);
  --hf-max:1400px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--hf-ink);
  background:var(--hf-cream);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hf-green);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
.site-shell{overflow:hidden}
.container{width:min(calc(100% - 32px),var(--hf-max));margin-inline:auto}

/* Header */
.site-header{
  background:#fffef9;
  border-top:3px solid var(--hf-green);
  position:relative;
  z-index:20;
}
.header-main{
  min-height:150px;
  display:grid;
  grid-template-columns:190px 1fr auto 150px;
  align-items:center;
  gap:26px;
}
.brand-mark{
  width:190px;height:190px;
  display:grid;
  place-items:center;
}
.brand-mark img{
  width:100%;height:100%;
  object-fit:contain;
  border-radius:50%;
}
.socials{grid-column:3}
.brand-badge{
  grid-column:4;
  width:140px;height:140px;
  display:grid;
  place-items:center;
  justify-self:end;
}
.brand-badge img{
  width:100%;height:100%;
  object-fit:contain;
  border-radius:50%;
  box-shadow:var(--hf-shadow);
}
.brand-copy .site-title{
  margin:0;
  font-family:"Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(38px,4vw,58px);
  line-height:.95;
  letter-spacing:-.04em;
  color:var(--hf-green);
  text-transform:uppercase;
}
.brand-copy .site-title a{color:inherit}
.site-tagline{
  margin:.35rem 0 0;
  color:var(--hf-purple);
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:32px;
}
.header-topics{
  margin:.75rem 0 0;
  font-size:16px;
  color:#777;
}
.header-topics span:nth-child(1){color:var(--hf-green)}
.header-topics span:nth-child(2){color:#2e8297}
.header-topics span:nth-child(3){color:#c58b08}
.header-topics span:nth-child(4){color:var(--hf-purple)}

.socials{display:flex;gap:12px;align-items:center}
.socials a{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--hf-green);color:#fff;
  font-weight:800;font-size:16px;
}
.socials a:hover{background:var(--hf-dark-green);text-decoration:none}

.rainbow-rule{
  height:70px;
  position:relative;
  margin:20px 0 10px;
  pointer-events:none;
  opacity:.95;
  background:url(assets/images/rainbow.png) center / contain no-repeat;
}
.primary-nav{
  border-bottom:1px solid #eee8d7;
  position:relative;
}
.primary-nav .container{display:flex;justify-content:center}
.primary-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;gap:5px;flex-wrap:wrap;
}
.primary-nav li{margin:0}
.primary-nav a{
  display:flex;align-items:center;gap:8px;
  padding:15px 17px;
  color:#202020;
  font-weight:600;
  border-bottom:3px solid transparent;
}
.nav-toggle{
  display:none; /* shown only under the mobile breakpoint below */
  width:44px;height:44px;
  margin:6px auto;
  border:0;background:transparent;
  position:relative;
  cursor:pointer;
}
.nav-toggle-bars,.nav-toggle-bars:before,.nav-toggle-bars:after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:26px;height:3px;
  margin-left:-13px;margin-top:-1.5px;
  background:var(--hf-green);
  border-radius:2px;
  transition:transform .18s ease,opacity .18s ease,top .18s ease;
}
.nav-toggle-bars:before{top:-9px;margin-top:0}
.nav-toggle-bars:after{top:9px;margin-top:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars:before{top:0;margin-top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars:after{top:0;margin-top:0;transform:rotate(-45deg)}

.primary-nav a:hover,.primary-nav .current-menu-item>a{
  border-bottom-color:var(--hf-green);
  text-decoration:none;
}

/* Hero */
.hero{
  min-height:440px;
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,#8ed1fb 0%,#bfe6f7 30%,#6fc3d8 52%,#3aa7c0 66%,#e8d4a0 84%,#d9c088 100%);
}
.hero:before,.hero:after{
  content:"";
  position:absolute;bottom:0;top:0;
  width:40%;
  z-index:0;
  background-repeat:no-repeat;
  background-position:bottom;
  background-size:auto 100%;
}
.hero:before{
  left:0;
  background-image:url(assets/images/hero-left-v2.jpg);
  -webkit-mask-image:linear-gradient(to right,#000 55%,transparent 100%);
          mask-image:linear-gradient(to right,#000 55%,transparent 100%);
}
.hero:after{
  right:0;
  background-image:url(assets/images/hero-right-v2.jpg);
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent 100%);
          mask-image:linear-gradient(to left,#000 55%,transparent 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  width:min(850px,92%);
  text-align:center;
  padding:70px 20px 82px;
}
.hero-kicker{
  margin:0 0 8px;
  color:var(--hf-green);
  font-family:"Trebuchet MS",sans-serif;
  font-size:clamp(52px,7vw,82px);
  line-height:.95;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hero-title{
  margin:0;
  color:var(--hf-dark-green);
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(38px,5vw,60px);
  font-weight:400;
}
.hero-copy{
  max-width:680px;margin:16px auto 24px;
  font-size:18px;
}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 25px;
  border-radius:999px;
  border:0;
  background:var(--hf-pink);
  color:#fff;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(232,92,130,.22);
}
.button:hover{color:#fff;text-decoration:none;transform:translateY(-1px)}
.button.green{background:var(--hf-green)}
.button.purple{background:var(--hf-purple)}
.button.gold{background:var(--hf-gold)}
.button.blue{background:var(--hf-blue)}
.button.pink{background:var(--hf-pink)}

/* Feature cards */
.features{padding:18px 0 16px;background:#fff}
.feature-grid{
  display:grid;
  /* auto-fit + minmax lets the row reflow from up-to-5 columns down to 1
     based on BOTH the viewport width and the number of cards - no media
     query and no inline style needed (an inline grid-template-columns
     would beat every @media rule and break mobile). */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:16px;
}
.feature-card{
  min-height:205px;
  border-radius:var(--hf-radius);
  padding:20px;
  box-shadow:0 3px 12px rgba(0,0,0,.04);
  display:flex;flex-direction:column;
}
.feature-card:nth-child(1){background:#eff7d9}
.feature-card:nth-child(2){background:#eee5fa}
.feature-card:nth-child(3){background:#fff5ca}
.feature-card:nth-child(4){background:#fce7e8}
.feature-card:nth-child(5){background:#e1f1fb}
.feature-card h2{
  margin:0 0 8px;
  text-align:center;
  font-family:"Trebuchet MS",sans-serif;
  font-size:23px;
  letter-spacing:.02em;
}
.feature-card:nth-child(1) h2{color:#4f922d}
.feature-card:nth-child(2) h2{color:#7953a5}
.feature-card:nth-child(3) h2{color:#d6920b}
.feature-card:nth-child(4) h2{color:#d95672}
.feature-card:nth-child(5) h2{color:#2b7eb5}

/* Colour chosen per card in the Customizer (wins over the position rules above) */
.feature-card.tint-green{background:#eff7d9}
.feature-card.tint-purple{background:#eee5fa}
.feature-card.tint-gold{background:#fff5ca}
.feature-card.tint-pink{background:#fce7e8}
.feature-card.tint-blue{background:#e1f1fb}
.feature-card.tint-green h2{color:#4f922d}
.feature-card.tint-purple h2{color:#7953a5}
.feature-card.tint-gold h2{color:#d6920b}
.feature-card.tint-pink h2{color:#d95672}
.feature-card.tint-blue h2{color:#2b7eb5}
.feature-card-body{display:flex;gap:13px;align-items:center;flex:1}
.feature-icon{
  font-size:0; /* hide the emoji glyph - it's kept in the markup for aria/no-JS fallback only */
  line-height:1;
  flex:0 0 auto;
  width:64px;height:64px;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.feature-card.tint-green  .feature-icon{background-image:url(assets/images/icon-books.jpg)}
.feature-card.tint-purple .feature-icon{background-image:url(assets/images/icon-shows.jpg)}
.feature-card.tint-gold   .feature-icon{background-image:url(assets/images/icon-learning.jpg)}
.feature-card.tint-pink   .feature-icon{background-image:url(assets/images/icon-nature.jpg)}
.feature-card.tint-blue   .feature-icon{background-image:url(assets/images/icon-chronicles.jpg)}
.feature-card p{font-size:14px;margin:0}
.feature-card .button{align-self:center;margin-top:10px;padding:7px 15px;font-size:13px}

/* Intro */
.intro{
  margin:0 auto 0;
  padding:35px 0 46px;
  background:
    url(assets/images/sprout.png) left 10px bottom no-repeat,
    url(assets/images/fern.png) right 10px bottom no-repeat,
    linear-gradient(rgba(242,247,224,.96),rgba(242,247,224,.96)),
    repeating-linear-gradient(135deg,transparent 0 20px,rgba(98,151,61,.08) 21px 22px);
  background-size:130px auto,140px auto,auto,auto;
  border-radius:20px 20px 0 0;
}
.intro-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.intro h2{
  margin:0 0 8px;
  color:var(--hf-dark-green);
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:42px;font-weight:400;
}
.intro p{margin:0;max-width:580px}
.quote{
  border-left:2px dashed #8bb15d;
  padding-left:38px;
  font-size:18px;
}
.quote p{font-family:Georgia,serif}
.quote cite{display:block;text-align:right;color:var(--hf-pink);font-family:"Brush Script MT","Segoe Script",cursive;font-size:24px}

/* Content */
.site-main{min-height:40vh}
.content-wrap{padding:45px 0}
.entry-title{color:var(--hf-green);font-size:clamp(32px,4vw,48px);margin:0 0 18px}
.entry-content{max-width:900px}
.entry-content h2,.entry-content h3{color:var(--hf-green)}
.entry-content img{border-radius:12px}
.post-card{padding:25px 0;border-bottom:1px solid #e8eadf}
.post-card:last-child{border-bottom:0}
.post-card h2{margin:0 0 8px;color:var(--hf-green)}
.post-meta{color:#777;font-size:14px;margin-bottom:10px}

/* Footer */
.site-footer{
  background:var(--hf-dark-green) url(assets/images/snail.jpg) right 18px center no-repeat;
  background-size:90px auto;
  color:#fff;
  padding:15px 0;
  border-top:5px solid #2e7a32;
}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:13px;
}
.site-footer a{color:#fff}
.footer-heart{color:#ffd86b;font-size:20px}

/* WordPress helpers */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
.alignwide{width:min(100%,1200px);margin-left:auto;margin-right:auto}
.alignfull{width:100%;margin-left:0;margin-right:0}
.wp-block-button__link{border-radius:999px}
.wp-block-image img{border-radius:12px}
.wp-caption{max-width:100%}
:focus-visible{outline:3px solid #e6a800;outline-offset:3px}

/* Mobile */
@media (max-width:1100px){
  /* Below desktop width the round "Hello Flower" badge (top-right on desktop)
     becomes THE logo, replacing the "hf" wreath mark - client's preference.
     Every item gets an explicit row so the stacking order is guaranteed
     (badge, then title block, then socials) instead of relying on grid
     auto-placement to guess it. */
  .header-main{grid-template-columns:1fr;text-align:center}
  .brand-mark{display:none}
  .brand-badge{
    display:grid; grid-row:1; grid-column:1/-1;
    width:135px;height:135px;
    justify-self:center; margin:0 auto 6px;
  }
  .brand-copy{grid-row:2; grid-column:1/-1}
  .socials{grid-row:3; grid-column:1/-1; justify-content:center}
  .rainbow-rule{display:none}
  .hero:before,.hero:after{width:26%}
}
@media (max-width:760px){
  .header-main{padding:18px 0 8px}
  .brand-badge{width:130px;height:130px}
  .brand-copy .site-title{font-size:clamp(30px,8vw,38px)}
  .site-tagline{font-size:clamp(22px,6vw,27px)}
  .header-topics{font-size:15px}
  .socials{grid-column:auto;justify-content:center}

  /* Nav collapses behind a hamburger button instead of showing all 7
     items - the button is hidden above this breakpoint (base rule),
     JS toggles [aria-expanded] on click and .is-open on the menu wrap. */
  .nav-toggle{display:block}
  .primary-nav .nav-inner{flex-direction:column}
  .nav-menu-wrap{
    display:none;
    width:100%;
    max-height:60vh;
    overflow-y:auto;
  }
  .nav-menu-wrap.is-open{display:block}
  .primary-nav ul{flex-direction:column;justify-content:center;gap:0}
  .primary-nav li{border-top:1px solid #eee8d7}
  .primary-nav li:first-child{border-top:0}
  .primary-nav a{padding:14px 12px;font-size:15px;justify-content:center}
  .hero{min-height:360px}
  .hero:before,.hero:after{display:none}
  .hero-content{padding:52px 14px 72px}
  .hero-kicker{font-size:clamp(40px,12vw,66px)}
  .hero-title{font-size:clamp(30px,8vw,50px)}
  .hero-copy{font-size:16px}
  .intro{padding:28px 0 36px;background-image:none}
  .intro-grid{grid-template-columns:1fr;gap:24px}
  .intro h2{font-size:36px}
  .quote{border-left:0;border-top:2px dashed #8bb15d;padding:20px 0 0}
  .footer-inner{flex-direction:column;text-align:center}
  .site-footer{background-image:none}
}
@media (max-width:430px){
  .feature-card-body{flex-direction:column;text-align:center;gap:8px}
  .feature-icon{width:52px;height:52px}
}