/*
Theme Name: Brunnfetti
Theme URI: https://brunnfetti.com
Author: Brunnfetti
Author URI: https://brunnfetti.com
Description: A playful, hand-cut-paper collage theme for Brunnfetti, handmade party decor. Built around a marigold, blush pink, poppy, leaf green, and cream palette with flat-shape confetti motifs.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brunnfetti
*/


  :root{
    --marigold:#F5A423;
    --blush:#F192B3;
    --poppy:#E35A3A;
    --leaf:#4B9B6C;
    --cream:#F6E7C9;
    --cream-2:#FBF3E1;
    --ink:#3A2A1C;
    --ink-soft:#6B5844;
    --max:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Quicksand',sans-serif;
    font-weight:500;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    margin:0;
    line-height:1.05;
  }
  p{ line-height:1.6; color:var(--ink-soft); }
  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; position:relative; }
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:3px solid var(--ink);
    outline-offset:3px;
    border-radius:6px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ---------- shared shape defs ---------- */
  .deco{ position:absolute; pointer-events:none; z-index:0; }
  .deco svg{ width:100%; height:100%; }

  /* ---------- NAV ---------- */
  .nav{
    position:relative;
    z-index:5;
    padding:22px 0 10px;
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .wordmark{
    font-family:'Baloo 2',sans-serif;
    font-weight:800;
    font-size:clamp(28px,4vw,36px);
    display:inline-flex;
    letter-spacing:1px;
  }
  .wordmark span{ display:inline-block; }
  .wordmark span:nth-child(1){ color:var(--poppy); transform:rotate(-6deg) translateY(2px); }
  .wordmark span:nth-child(2){ color:var(--marigold); transform:rotate(4deg) translateY(-3px); }
  .wordmark span:nth-child(3){ color:var(--leaf); transform:rotate(-3deg) translateY(1px); }
  .wordmark span:nth-child(4){ color:var(--blush); transform:rotate(5deg) translateY(-2px); }
  .wordmark span:nth-child(5){ color:var(--poppy); transform:rotate(-4deg) translateY(2px); }
  .wordmark span:nth-child(6){ color:var(--marigold); transform:rotate(3deg) translateY(-1px); }
  .wordmark span:nth-child(7){ color:var(--leaf); transform:rotate(-5deg) translateY(3px); }
  .wordmark span:nth-child(8){ color:var(--blush); transform:rotate(4deg) translateY(-2px); }
  .wordmark span:nth-child(9){ color:var(--poppy); transform:rotate(-2deg) translateY(1px); }
  .wordmark span:nth-child(10){ color:var(--marigold); transform:rotate(6deg) translateY(-3px); }

  .nav-links{
    display:flex; align-items:center; gap:28px;
    font-weight:600;
    font-size:16px;
  }
  .nav-links a{ text-decoration:none; position:relative; }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-4px;
    height:3px; background:var(--marigold);
    transform:scaleX(0); transform-origin:left;
    transition:transform .2s ease;
    border-radius:2px;
  }
  .nav-links a:hover::after{ transform:scaleX(1); }
  .nav-cta{
    background:var(--poppy); color:var(--cream-2);
    padding:11px 22px; border-radius:100px;
    font-weight:700; text-decoration:none;
    border:none; cursor:pointer; font-family:'Quicksand',sans-serif;
    font-size:15px;
    box-shadow:3px 3px 0 var(--ink);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .nav-cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
  .nav-menu-btn{ display:none; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:64px 0 40px;
    overflow:hidden;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:40px;
    min-height:420px;
  }
  .hero h1{
    font-size:clamp(40px,6vw,70px);
    color:var(--ink);
  }
  .hero h1 em{
    font-style:normal;
    color:var(--poppy);
    position:relative;
    display:inline-block;
  }
  .hero p.lede{
    margin-top:20px;
    font-size:19px;
    max-width:46ch;
  }
  .hero-actions{
    margin-top:30px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 28px;
    border-radius:100px;
    font-family:'Quicksand',sans-serif;
    font-weight:700;
    font-size:16px;
    text-decoration:none;
    border:2.5px solid var(--ink);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-solid{
    background:var(--marigold);
    color:var(--ink);
    box-shadow:4px 4px 0 var(--ink);
  }
  .btn-solid:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    box-shadow:4px 4px 0 var(--leaf);
    border-color:var(--leaf);
  }
  .btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--leaf); }

  .hero-art{
    position:relative;
    height:420px;
  }
  .hero-art .deco{ transition:transform .3s ease; }

  /* ---------- CONFETTI PATTERN BAND ---------- */
  .band{
    position:relative;
    height:74px;
    overflow:hidden;
    background:var(--cream-2);
    border-top:3px solid var(--ink);
    border-bottom:3px solid var(--ink);
  }
  .band-track{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    gap:34px;
    padding:0 20px;
    animation:scrollBand 34s linear infinite;
    width:max-content;
  }
  .band-track .deco-inline{ width:34px; height:34px; flex:0 0 auto; }
  @keyframes scrollBand{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{ padding:90px 0; position:relative; }
  .section-head{
    max-width:640px;
    margin-bottom:52px;
  }
  .section-head h2{
    font-size:clamp(32px,4.4vw,46px);
  }
  .section-head p{
    margin-top:14px;
    font-size:17px;
  }
  .tag{
    display:inline-block;
    background:var(--blush);
    color:var(--ink);
    font-weight:700;
    font-size:14px;
    padding:6px 16px;
    border-radius:100px;
    border:2px solid var(--ink);
    margin-bottom:16px;
    transform:rotate(-2deg);
  }

  /* ---------- CATEGORY CARDS (torn paper) ---------- */
  .categories{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
  }
  .cat-card{
    position:relative;
    padding:30px 24px 26px;
    border:2.5px solid var(--ink);
    min-height:230px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-decoration:none;
    color:var(--ink);
    clip-path:polygon(3% 6%,22% 0%,48% 4%,74% 0%,97% 5%,100% 30%,96% 55%,100% 78%,94% 100%,68% 96%,45% 100%,20% 97%,0% 82%,4% 52%,0% 28%);
    transition:transform .2s ease;
  }
  .cat-card:hover{ transform:translateY(-6px) rotate(0deg) !important; }
  .cat-card:nth-child(1){ background:var(--marigold); transform:rotate(-2deg); }
  .cat-card:nth-child(2){ background:var(--blush); transform:rotate(1.5deg); }
  .cat-card:nth-child(3){ background:var(--leaf); color:var(--cream-2); transform:rotate(-1deg); }
  .cat-card:nth-child(4){ background:var(--poppy); color:var(--cream-2); transform:rotate(2deg); }
  .cat-card .cat-icon{ width:54px; height:54px; margin-bottom:16px; }
  .cat-card h3{ font-size:22px; }
  .cat-card span.count{
    display:block; margin-top:6px; font-weight:600; font-size:14px; opacity:.85;
  }

  /* ---------- SHELF / PRODUCTS ---------- */
  .shelf{
    background:var(--ink);
    padding:90px 0;
    position:relative;
  }
  .shelf .section-head h2, .shelf .section-head p{ color:var(--cream-2); }
  .shelf .section-head p{ color:#D9C9AE; }
  .shelf-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
  }
  .product{
    background:var(--cream-2);
    border-radius:22px;
    padding:26px;
    position:relative;
    border:2.5px solid var(--ink);
  }
  .product:nth-child(2){ transform:translateY(24px); }
  .product-art{
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
  }
  .product-art svg{ height:100%; width:auto; }
  .product h3{ font-size:20px; margin-bottom:6px; }
  .product p{ font-size:15px; margin:0 0 14px; }
  .product-row{
    display:flex; align-items:center; justify-content:space-between;
  }
  .price{ font-weight:700; font-family:'Baloo 2',sans-serif; font-size:19px; }
  .swatch-row{ display:flex; gap:6px; }
  .swatch{ width:16px; height:16px; border-radius:50%; border:2px solid var(--ink); }

  /* ---------- PROCESS ---------- */
  .process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    position:relative;
  }
  .process-step{
    text-align:left;
    padding-top:20px;
  }
  .process-step .num{
    font-family:'Baloo 2',sans-serif;
    font-size:52px;
    color:var(--marigold);
    -webkit-text-stroke:2px var(--ink);
    line-height:1;
    margin-bottom:12px;
    display:inline-block;
  }
  .process-step:nth-child(2) .num{ color:var(--blush); }
  .process-step:nth-child(3) .num{ color:var(--leaf); }
  .process-step:nth-child(4) .num{ color:var(--poppy); }
  .process-step h3{ font-size:19px; margin-bottom:8px; }
  .process-step p{ font-size:15px; }

  /* ---------- CUSTOM BANNER ---------- */
  .banner{
    position:relative;
    margin:0 auto;
    max-width:var(--max);
    background:var(--blush);
    border:3px solid var(--ink);
    border-radius:34px;
    padding:64px 60px;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    align-items:center;
    gap:30px;
    overflow:hidden;
  }
  .banner h2{ font-size:clamp(28px,3.6vw,40px); }
  .banner p{ color:var(--ink); opacity:.85; margin-top:14px; font-size:17px; max-width:44ch; }
  .banner-art{ position:relative; height:180px; }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .quote{
    background:var(--cream-2);
    border:2.5px solid var(--ink);
    border-radius:24px;
    padding:30px 26px;
    position:relative;
  }
  .quote:nth-child(1){ transform:rotate(-1.5deg); }
  .quote:nth-child(2){ transform:rotate(1deg); }
  .quote:nth-child(3){ transform:rotate(-1deg); }
  .quote:before{
    content:"";
    position:absolute;
    bottom:-14px; left:36px;
    width:26px; height:26px;
    background:var(--cream-2);
    border-right:2.5px solid var(--ink);
    border-bottom:2.5px solid var(--ink);
    transform:rotate(45deg);
  }
  .quote p{ font-size:16px; color:var(--ink); font-weight:600; }
  .quote .who{ margin-top:16px; display:flex; align-items:center; gap:10px; }
  .quote .who .dot{ width:34px; height:34px; border-radius:50%; border:2px solid var(--ink); flex:0 0 auto; }
  .quote .who span{ font-size:14px; color:var(--ink-soft); font-weight:600; }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:var(--cream-2);
    padding:64px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid #55442f;
  }
  footer .wordmark span{ filter:brightness(1.15); }
  footer p.about{ color:#D9C9AE; font-size:15px; margin-top:16px; max-width:32ch; }
  footer h4{ font-family:'Quicksand',sans-serif; font-size:15px; font-weight:700; color:var(--marigold); margin-bottom:16px; }
  footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  footer a{ color:#D9C9AE; text-decoration:none; font-size:15px; }
  footer a:hover{ color:var(--cream-2); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:24px; font-size:13px; color:#9C8A70; flex-wrap:wrap; gap:10px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .hero-inner{ grid-template-columns:1fr; }
    .hero-art{ height:280px; order:-1; }
    .categories{ grid-template-columns:repeat(2,1fr); }
    .shelf-grid{ grid-template-columns:1fr 1fr; }
    .process{ grid-template-columns:1fr 1fr; row-gap:36px; }
    .banner{ grid-template-columns:1fr; padding:44px 30px; }
    .banner-art{ height:120px; }
    .testimonials{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
  }
  @media (max-width: 640px){
    .nav-links{ display:none; }
    .categories{ grid-template-columns:1fr; }
    .shelf-grid{ grid-template-columns:1fr; }
    .product:nth-child(2){ transform:none; }
    .process{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .section{ padding:60px 0; }
  }

/* ---------- WordPress nav-menu compatibility ---------- */
.nav-links{ list-style:none; }
.nav-links li{ list-style:none; }
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after{ transform:scaleX(1); }

/* Screen-reader text (WP convention) */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--ink);
  color:var(--cream-2);
  padding:12px 20px;
  z-index:999;
  border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Generic page / post content (page.php, single.php) ---------- */
.entry-content{ max-width:72ch; }
.entry-content p{ margin:0 0 20px; font-size:17px; }
.entry-content h2{ font-size:28px; margin:40px 0 14px; }
.entry-content h3{ font-size:22px; margin:30px 0 12px; }
.entry-content a{ color:var(--poppy); text-decoration:underline; }
.entry-content ul, .entry-content ol{ margin:0 0 20px; padding-left:24px; color:var(--ink-soft); }
.entry-content img{ border-radius:18px; border:2.5px solid var(--ink); margin:20px 0; }