/*
 Theme Name:  Cloud Tea Child
 Theme URI:   https://cloudteaboba.com
 Description: Child theme for Cloud Tea — pastel, rounded, playful brand styling.
 Author:      Danielle Major
 Template:    twentytwentyfive
 Version:     1.0.0
*/

/* Brand fonts (enqueued in functions.php) and design tokens */
:root{
  --cream:#FFF6EE;         /* background */
  --blue:#6E9DBA;          /* headings, accents */
  --blue-dark:#456D88;
  --peach:#F4C3B6;         /* CTA */
  --ink:#3f3f3f;           /* body text */
  --card:#FFFFFF;
  --radius:18px;
  --shadow:0 8px 22px rgba(0,0,0,.08);
}

/* Base */
body{
  background:var(--cream);
  color:var(--ink);
  font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Headings */
h1,h2,h3,.is-style-ct-heading{
  font-family:"Baloo 2", system-ui, sans-serif;
  color:var(--blue-dark);
  letter-spacing:.3px;
}

/* Buttons */
.ct-btn, .wp-element-button, button, .button{
  background:var(--peach);
  color:#3a3a3a;
  border-radius:999px;
  border:2px solid #eab4a6;
  box-shadow:var(--shadow);
  font-weight:700;
  padding:12px 22px;
}
.ct-btn:hover, .wp-element-button:hover, button:hover, .button:hover{
  transform:translateY(-1px);
}

/* Cards / panels */
.ct-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

/* Utility container */
.ct-container{width:min(1120px,92vw); margin-inline:auto}

/* Hero */
.ct-hero{padding:0px; text-align:center}
.ct-hero__title{
  font-size:clamp(36px,5vw,60px);
  margin:10px 0 8px;
}
.ct-hero__tag{color:var(--blue-dark); opacity:.9; font-weight:600; margin-bottom:22px}
.ct-note{font-size:14px; opacity:.9; margin-top:12px}

/* Grid */
.ct-grid{display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-card img{width:100%; height:260px; object-fit:cover; border-radius:12px}
.ct-card h3{
  margin:14px 0 4px; font-weight:700; color:var(--blue-dark);
  font-family:"Baloo 2"; font-size:20px;
}

/* Subscribe panel */
.ct-subscribe{background:#ffffffcc; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); max-width:680px; margin:26px auto 0}
.ct-subscribe form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.ct-subscribe input[type="email"]{
  flex:1 1 280px; padding:14px 16px; border-radius:999px; border:2px solid var(--blue); font-size:15px; background:#fff
}
.ct-subscribe .small{font-size:12px; color:#666; margin-top:8px; text-align:center}

/* Visit section */
.ct-visit{text-align:center; padding:48px 0 64px}
.ct-visit h2{font-size:34px}
.ct-address{font-weight:600; color:#2f5166}

/* Footer */
.ct-footer{border-top:1px dashed #cdd9e2; padding:22px 0 40px; text-align:center; color:#6a7f8e; font-size:14px}

/* Responsive */
@media(max-width:860px){
  .ct-grid{grid-template-columns:1fr}
  .ct-card img{height:220px}
}
.card img {
    width: 100%;
    height: 340px!important;
    object-fit: cover;
    border-radius: 12px;
}

/* --- HERO BACKGROUND IMAGE --- */
.hero {
  position: relative;
  background-image: url('https://cloudteaboba.com/wp-content/themes/Cloud-tea-child/assets/boba-tea-background.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll; /* change to 'fixed' for parallax effect */
  min-height: 100vh; /* full screen height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 20px;
}

/* keep hero text readable */
.hero h1, .hero p {
  position: relative;
  z-index: 2;
  color: #2f5166; /* tweak as needed */
}

/* optional: add a soft overlay tint for readability */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45); /* light cloud veil */
  z-index: 1;
}