/*
Theme Name: Craftify Bud
Theme URI: https://craftifybud.com/
Author: Nifty Tech Solution
Author URI: https://craftifybud.com/
Description: Custom blog theme for Craftify Bud — fun, free and printable crafts, coloring pages and activities for kids. Fully responsive, SEO-safe, built for speed.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: craftifybud
Tags: blog, one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Brand pastels — used for BACKGROUNDS, blobs, borders and decoration. */
  --teal:#3bb6a6;--teal-dark:#2a9488;
  --coral:#ff6f91;--coral-dark:#f2547a;
  --yellow:#ffc24b;--purple:#9b7ede;
  --ink:#2b2b3a;--muted:#6b6b7b;
  --cream:#fff9f2;--line:#ececf1;

  /* ------------------------------------------------------------------
   * Accessible variants — used wherever TEXT sits on the colour, or the
   * colour IS the text. Same hue family, just dark enough to clear
   * WCAG AA (4.5:1 for normal text, 3:1 for 24px+ headings).
   *
   * ⚠️ Do not swap these back to the pastels above. The pastels measure
   * 2.49–3.26 against white, which fails AA and makes buttons hard to
   * read in sunlight — the exact situation a parent printing a craft
   * on a phone is usually in.
   * ------------------------------------------------------------------ */
  --teal-btn:#17786c;    /* 5.33 with white text */
  --teal-btn-h:#126e62;  /* hover                */
  --teal-link:#126e62;   /* 6.12 on white        */
  --coral-btn:#d62e5c;   /* 4.77 with white text */
  --coral-btn-h:#b8244e; /* hover                */
  --purple-btn:#7a5bc7;  /* 5.06 with white text */
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Nunito',sans-serif;color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6,.logo{font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.25;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;}
section{padding:46px 0;}

/* Accessibility */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--teal-btn);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:700;}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--teal-btn);outline-offset:2px;}

/* ==========================================================================
   3. BUTTONS / TAGS / LINKS
   ========================================================================== */
.btn{display:inline-block;background:var(--coral-btn);color:#fff;font-weight:700;padding:12px 24px;border-radius:40px;font-family:'Fredoka',sans-serif;transition:.2s;border:none;cursor:pointer;text-align:center;}
.btn:hover{background:var(--coral-btn-h);color:#fff;}
.btn-teal{background:var(--teal-btn);}
.btn-teal:hover{background:var(--teal-btn-h);}
.btn-ghost{background:#fff;color:var(--teal-link);border:2px solid var(--teal-btn);}
.btn-ghost:hover{background:var(--teal-btn);color:#fff;}
.tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#fff;padding:4px 11px;border-radius:20px;background:var(--purple-btn);}
.link-all{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--teal-link);font-size:15px;}
.link-all:hover{color:var(--coral-btn);}

/* ==========================================================================
   4. TOPBAR
   ========================================================================== */
.topbar{background:var(--ink);color:#fff;font-size:13px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;}
.topbar .socials a{margin-right:12px;opacity:.9;}
.topbar .socials a:hover{opacity:1;color:var(--yellow);}
.topbar .promo{font-weight:700;color:var(--yellow);}

/* ==========================================================================
   5. HEADER + NAV
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.03);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:16px;}
.logo{font-size:29px;line-height:1;flex:0 0 auto;}
.logo img{max-height:56px;width:auto;}
.logo .c1{color:var(--coral);}
.logo .c2{color:var(--teal);}
.logo .c3{color:var(--yellow);}
.logo .c4{color:var(--purple);}
.logo small{display:block;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--muted);}

.main-nav ul{display:flex;gap:24px;list-style:none;font-family:'Fredoka',sans-serif;font-size:16px;font-weight:500;align-items:center;}
.main-nav a{display:block;padding:6px 0;border-bottom:3px solid transparent;transition:.2s;}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a,
.main-nav .current-post-ancestor > a{color:var(--teal-link);border-color:var(--teal);}

/* Dropdown submenus */
.main-nav li{position:relative;}
.main-nav .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.1);padding:8px 0;min-width:220px;flex-direction:column;gap:0;z-index:60;}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{display:flex;}
.main-nav .sub-menu a{padding:10px 18px;border:none;font-size:15px;}
.main-nav .sub-menu a:hover{background:var(--cream);color:var(--teal-link);border:none;}

.header-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.search-ic{width:40px;height:40px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:17px;border:none;cursor:pointer;color:var(--ink);}
.search-ic:hover{background:#ffe3ea;}

/* Header search dropdown */
.header-search{display:none;background:var(--cream);border-bottom:1px solid var(--line);padding:16px 0;}
.header-search.open{display:block;}
.header-search form{max-width:620px;margin:0 auto;display:flex;background:#fff;border-radius:50px;padding:6px;box-shadow:0 6px 18px rgba(0,0,0,.07);}
/* 16px is deliberate: iOS Safari zooms the whole page when you tap an
 * input smaller than 16px, and leaves it zoomed. Never drop this below 16. */
.header-search input{flex:1;border:none;outline:none;padding:11px 20px;font-size:16px;font-family:'Nunito',sans-serif;background:transparent;border-radius:40px;}
.header-search input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-btn);}

/* Mobile hamburger */
.burger{display:none;width:42px;height:42px;border-radius:12px;background:var(--cream);border:none;cursor:pointer;font-size:19px;color:var(--ink);align-items:center;justify-content:center;}
/* ---------------------------------------------------------------------
 * Mobile menu — OVERLAY, not a push-down panel.
 *
 * Until v1.3.1 this was position:static, so opening the menu shoved the
 * hero and everything under it down the page. Tapping the burger looked
 * like the whole site had jumped. It must float over the content.
 *
 * z-index sits BELOW .site-header (50) on purpose, so the header — and
 * the ✕ button inside it — stay visible and clickable while the panel
 * is open. --cb-nav-top is written by assets/js/main.js from the real
 * header height, so the panel always starts exactly under the header
 * whether or not the top bar is on screen.
 * ------------------------------------------------------------------- */
.mobnav{
  display:none;
  position:fixed;
  top:var(--cb-nav-top,64px);
  left:0;right:0;
  z-index:48;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 20px 44px rgba(0,0,0,.18);
  max-height:calc(100vh - var(--cb-nav-top,64px));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobnav.open{display:block;}

.mobnav-backdrop{
  position:fixed;inset:0;z-index:47;
  background:rgba(22,22,32,.45);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.mobnav-backdrop.open{opacity:1;pointer-events:auto;}

/* Stop the page scrolling behind the open panel. */
body.cb-nav-open{overflow:hidden;}

/* Safety net: if the viewport grows to desktop while the panel is open,
 * kill it — the real menu is back and a floating panel would just hang
 * over the page. */
@media(min-width:821px){
  .mobnav,.mobnav-backdrop{display:none!important;}
}

.mobnav ul{list-style:none;padding:10px 22px 16px;}
.mobnav .sub-menu{padding:0 0 0 16px;}
.mobnav li{border-bottom:1px dashed var(--line);}
.mobnav li:last-child{border:none;}
.mobnav a{display:block;padding:13px 2px;font-family:'Fredoka',sans-serif;font-weight:500;font-size:16px;}
.mobnav a:hover{color:var(--teal-link);}

/* ---------------------------------------------------------------------
 * Accordion for parent items (Categories).
 *
 * Every child used to be listed flat, so the panel opened at 12 links /
 * 633px and the reader had to scroll past seven categories to reach
 * About or Contact. Collapsed it is 5 links / ~260px.
 *
 * The submenu is hidden with `display:none` rather than height:0 so the
 * links are also removed from the tab order while closed.
 * ------------------------------------------------------------------- */
.mobnav .menu-item-has-children > a{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mobnav .menu-item-has-children > a::after{
  content:"";
  width:9px;height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-right:6px;margin-top:-4px;
  transition:transform .2s;
  flex:0 0 auto;
}
.mobnav .menu-item-has-children.open > a::after{transform:rotate(-135deg);margin-top:2px;}
.mobnav .sub-menu{display:none;}
.mobnav .menu-item-has-children.open > .sub-menu{display:block;}
.mobnav .sub-menu a{font-size:15px;color:var(--muted);padding:11px 2px;}
.mobnav .sub-menu a:hover{color:var(--teal-link);}

/* Rainbow accent */
.rainbow{height:6px;background:linear-gradient(90deg,var(--coral) 0%,var(--yellow) 25%,var(--teal) 50%,var(--purple) 75%,var(--coral) 100%);}

/* ==========================================================================
   6. CATEGORY QUICK-NAV STRIP
   ========================================================================== */
.catstrip{background:var(--cream);border-bottom:1px solid var(--line);}
.catstrip .wrap{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:12px 22px;}
.chip{border-radius:30px;padding:8px 16px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;transition:.2s;border:2px solid transparent;background:#fff;}
.chip:hover{transform:translateY(-2px);}
/* Pastel pill, darker ink — all six clear 4.5:1 against their own background. */
.chip.c-coral{background:#ffe3ea;color:#c42450;}
.chip.c-teal{background:#d5f2ee;color:#126e62;}
.chip.c-yellow{background:#fff0d0;color:#8a5c00;}
.chip.c-purple{background:#ece2fb;color:#5c3fa6;}
.chip.c-green{background:#ddf3d6;color:#2f6b23;}
.chip.c-blue{background:#d9eefb;color:#1c5f92;}

/* ==========================================================================
   7. HOME HERO
   ========================================================================== */
.hero{background:linear-gradient(135deg,#fff0f5 0%,#fef6e6 35%,#e9f9f5 70%,#f1ecfd 100%);position:relative;overflow:hidden;padding:60px 0 66px;}
.hero .wrap{position:relative;z-index:2;text-align:center;}
.kicker{display:inline-block;background:#fff;color:var(--teal-link);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:7px 16px;border-radius:30px;box-shadow:0 4px 14px rgba(0,0,0,.06);margin-bottom:18px;}
.hero h1{font-size:50px;line-height:1.08;max-width:820px;margin:0 auto 16px;}
/* Large display text only needs 3:1 — these two clear it (3.32 / 3.69). */
.hero h1 .hl{color:var(--coral-dark);}
.hero h1 .hl2{color:var(--teal-dark);}
.hero .sub{font-size:19px;color:var(--muted);max-width:600px;margin:0 auto 28px;font-weight:600;}
.hero-search{max-width:560px;margin:0 auto;display:flex;background:#fff;border-radius:50px;padding:7px;box-shadow:0 10px 30px rgba(0,0,0,.08);}
.hero-search input{flex:1;border:none;outline:none;padding:12px 20px;font-size:16px;font-family:'Nunito',sans-serif;background:transparent;min-width:0;border-radius:40px;}
.hero-search input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-btn);}
.hero-badges{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-weight:700;font-size:14px;}
.hero-badges span::before{content:"✓ ";color:var(--teal-link);font-weight:800;}
.blob{position:absolute;border-radius:50%;filter:blur(1px);opacity:.5;z-index:1;pointer-events:none;}
.b1{width:150px;height:150px;background:var(--yellow);top:-30px;left:-20px;}
.b2{width:110px;height:110px;background:var(--coral);bottom:0;right:40px;}
.b3{width:80px;height:80px;background:var(--purple);top:50px;right:150px;}
.b4{width:64px;height:64px;background:var(--teal);bottom:40px;left:120px;}
.b5{width:46px;height:46px;background:var(--coral);top:80px;left:250px;opacity:.4;}

/* ==========================================================================
   8. SECTION HEADS
   ========================================================================== */
.row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap;}
.row-head h2{font-size:27px;display:flex;align-items:center;gap:10px;}
.row-head h2 .bar{width:6px;height:26px;border-radius:6px;background:var(--coral);display:inline-block;flex:0 0 6px;}
.sec-head{text-align:center;margin-bottom:30px;}
.sec-head .eyebrow{color:var(--coral-btn);font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:13px;}
.sec-head h2{font-size:30px;margin-top:6px;}
.sec-head p{color:var(--muted);font-weight:600;margin-top:8px;max-width:620px;margin-left:auto;margin-right:auto;}

/* ==========================================================================
   9. THUMB GRADIENTS (image placeholders / fallbacks)
   ========================================================================== */
.t-pink{background:linear-gradient(135deg,#ffd7e0,#ffeef2);}
.t-teal{background:linear-gradient(135deg,#cdeee9,#eafaf7);}
.t-yellow{background:linear-gradient(135deg,#ffe9bd,#fff6e3);}
.t-purple{background:linear-gradient(135deg,#e2d6f7,#f3edfd);}
.t-mix{background:linear-gradient(135deg,#ffe0ec,#e0f3ff);}
.t-green{background:linear-gradient(135deg,#d8f2d3,#eefbe9);}

/* ==========================================================================
   10. CARDS
   ========================================================================== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06);transition:.2s;display:block;}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.1);}
.card .thumb{height:160px;display:grid;place-items:center;font-size:46px;position:relative;overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .thumb .tag{position:absolute;top:12px;left:12px;z-index:2;}
.card .body{padding:16px 18px;}
.card h3,.card .body h2{font-size:17px;line-height:1.28;margin-bottom:8px;}
.card .meta{color:var(--muted);font-size:12px;font-weight:700;}

/* Featured spotlight */
.spotlight{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;}
.feat-big{border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1);background:#fff;transition:.2s;display:block;}
.feat-big:hover{transform:translateY(-4px);}
.feat-big .thumb{height:250px;display:grid;place-items:center;font-size:72px;position:relative;overflow:hidden;}
.feat-big .thumb img{width:100%;height:100%;object-fit:cover;}
.feat-big .thumb .tag{position:absolute;top:16px;left:16px;z-index:2;}
.feat-big .body{padding:22px 24px;}
.feat-big h2{font-size:26px;line-height:1.2;margin-bottom:10px;}
.feat-big .meta{color:var(--muted);font-weight:700;font-size:13px;}
.feat-side{display:flex;flex-direction:column;gap:16px;}
.mini{display:flex;gap:14px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 5px 16px rgba(0,0,0,.06);transition:.2s;}
.mini:hover{transform:translateY(-3px);}
.mini .mthumb{width:104px;flex:0 0 104px;display:grid;place-items:center;font-size:34px;overflow:hidden;}
.mini .mthumb img{width:100%;height:100%;object-fit:cover;}
.mini .mbody{padding:12px 14px 12px 0;display:flex;flex-direction:column;justify-content:center;}
.mini h3{font-size:15px;line-height:1.25;margin-bottom:6px;}
.mini .meta{font-size:12px;color:var(--muted);font-weight:700;}

/* ==========================================================================
   11. ARCHIVE / CATEGORY PAGE
   ========================================================================== */
.cat-hero{background:linear-gradient(135deg,#f6f1fe 0%,#eefaf8 100%);padding:46px 0;position:relative;overflow:hidden;}
.breadcrumb{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:14px;}
.breadcrumb a:hover{color:var(--teal-link);}
.cat-hero .icon{font-size:46px;margin-bottom:10px;display:block;}
.cat-hero h1{font-size:42px;margin-bottom:12px;}
.cat-hero h1 .u{color:var(--purple);}
.cat-hero p{color:var(--muted);font-weight:600;font-size:17px;max-width:620px;}

.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin:30px 0 26px;}
.subcats{display:flex;gap:9px;flex-wrap:wrap;}
.subcats .chip{border-radius:30px;padding:7px 15px;font-size:13px;background:#fff;border:2px solid var(--line);}
.subcats .chip:hover,.subcats .chip.active{background:var(--purple-btn);color:#fff;border-color:var(--purple-btn);}
.sortby{font-size:14px;font-weight:700;color:var(--muted);}
.sortby select{font-family:'Nunito',sans-serif;font-weight:700;border:2px solid var(--line);border-radius:30px;padding:7px 14px;color:var(--ink);background:#fff;}

/* ---------------------------------------------------------------------
 * ⚠️ minmax(0,1fr), never plain 1fr.
 *
 * `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` minimum
 * resolves to the track's MIN-CONTENT — so a single stubborn child (a
 * wide table, a long unbroken string) can force the column wider than
 * its own container. That is exactly what happened here: on a 375px
 * phone this column resolved to 440px and pushed the whole page 81px
 * sideways, so every post scrolled horizontally.
 *
 * minmax(0,1fr) lets the track shrink to fit. The .grid-safe rule below
 * does the same job for every other grid in this file.
 * ------------------------------------------------------------------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;padding-bottom:60px;}
.layout-wide{grid-template-columns:minmax(0,1fr) 380px;align-items:start;}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
.pagination .page-numbers{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:600;background:#fff;border:2px solid var(--line);transition:.2s;}
.pagination .page-numbers:hover,.pagination .page-numbers.current{background:var(--teal-btn);color:#fff;border-color:var(--teal-btn);}
.pagination .dots{border-color:transparent;}

/* ==========================================================================
   12. SIDEBAR
   ========================================================================== */
.side-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:24px;box-shadow:0 4px 14px rgba(0,0,0,.04);}
.side-box h4,.side-box h2{font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.side-box .bar{width:5px;height:20px;border-radius:5px;background:var(--coral);flex:0 0 5px;display:inline-block;}
.side-sticky{position:sticky;top:96px;}
.pop{display:flex;gap:12px;margin-bottom:14px;}
.pop:last-child{margin-bottom:0;}
.pop .pt{width:64px;height:64px;flex:0 0 64px;border-radius:12px;display:grid;place-items:center;font-size:26px;overflow:hidden;}
.pop .pt img{width:100%;height:100%;object-fit:cover;}
.pop h5{font-size:14px;font-family:'Fredoka',sans-serif;font-weight:500;line-height:1.25;margin-bottom:4px;}
.pop .meta{font-size:11px;color:var(--muted);font-weight:700;}
.side-cats a{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-weight:700;font-size:14px;gap:10px;}
.side-cats a:last-child{border:none;}
.side-cats a:hover{color:var(--teal-link);}
.side-cats .cnt{background:var(--cream);border-radius:20px;padding:2px 10px;font-size:12px;color:var(--muted);flex:0 0 auto;}
.side-nl{background:var(--teal-btn);color:#fff;text-align:center;}
.side-nl h4,.side-nl h2{justify-content:center;color:#fff;}
.side-nl p{font-size:13px;opacity:.92;font-weight:600;margin-bottom:14px;}
.side-nl input{width:100%;border:none;border-radius:30px;padding:11px 16px;margin-bottom:10px;font-family:'Nunito',sans-serif;}
.side-nl .btn{width:100%;}

/* ==========================================================================
   13. SINGLE POST
   ========================================================================== */
.article-top{background:linear-gradient(135deg,#fff0f5 0%,#eefaf8 100%);padding:38px 0 30px;}
.art-head{max-width:820px;}
.art-head .tag{margin-bottom:14px;}
.art-head h1{font-size:40px;margin-bottom:16px;font-weight:700;}
.art-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-weight:700;font-size:14px;flex-wrap:wrap;}
.art-meta .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--purple));display:grid;place-items:center;color:#fff;font-size:18px;overflow:hidden;}
.art-meta .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.art-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5;flex:0 0 4px;}

.hero-img{border-radius:22px;overflow:hidden;margin-bottom:14px;box-shadow:0 14px 34px rgba(0,0,0,.09);display:grid;place-items:center;min-height:220px;font-size:110px;}
.hero-img img{width:100%;height:auto;border-radius:22px;}
.caption{text-align:center;font-size:13px;color:var(--muted);font-style:italic;margin-bottom:28px;}

.entry-content{font-size:17.5px;color:#38384a;line-height:1.7;}
.entry-content p{margin-bottom:20px;}
.entry-content h2{font-size:27px;margin:34px 0 12px;padding-left:16px;border-left:6px solid var(--coral);border-radius:3px;color:var(--ink);}
.entry-content h3{font-size:21px;margin:24px 0 10px;color:var(--teal-link);}
.entry-content h4{font-size:18px;margin:20px 0 8px;}
.entry-content ul,.entry-content ol{margin:0 0 20px 22px;font-size:17px;}
.entry-content li{margin-bottom:9px;}
.entry-content img{border-radius:16px;margin:10px 0;}
.entry-content a{color:var(--teal-link);font-weight:700;text-decoration:underline;}
.entry-content a:hover{color:var(--coral-btn);}
.entry-content blockquote{border-left:6px solid var(--teal);background:var(--cream);border-radius:0 16px 16px 0;padding:18px 24px;margin:24px 0;font-style:italic;}
.entry-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:16px;}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px;text-align:left;}
.entry-content th{background:var(--cream);font-family:'Fredoka',sans-serif;font-weight:600;}
.entry-content figure{margin:20px 0;}
.entry-content figcaption{text-align:center;font-size:13px;color:var(--muted);font-style:italic;margin-top:8px;}

.dlbox{background:linear-gradient(135deg,#eafaf7,#f3edfd);border:2px dashed var(--teal);border-radius:20px;padding:26px 28px;text-align:center;margin:30px 0;}
.dlbox .ic{font-size:40px;}
.dlbox h2,.dlbox h3{font-size:22px;color:var(--ink);margin:6px 0;padding:0;border:none;}
.dlbox p{color:var(--muted);font-weight:600;margin-bottom:16px;font-size:15px;}

/* ---------------------------------------------------------------------
 * The box can now be dropped INSIDE the article with [download_box].
 *
 * In there it is up against `.entry-content a`, which is (0,2,0) and so
 * outranks `.btn` (0,1,0) no matter what order they appear in — the
 * button would come out as underlined dark-teal text on a dark-teal
 * background, i.e. unreadable. These rules win it back.
 * ------------------------------------------------------------------- */
.entry-content .dlbox a.btn,
.entry-content .dlbox a.btn:hover{color:#fff;text-decoration:none;font-weight:700;}
.entry-content .dlbox h2,
.entry-content .dlbox h3{font-size:22px;margin:6px 0;padding-left:0;border-left:none;color:var(--ink);}
.entry-content .dlbox p{color:var(--muted);margin-bottom:16px;}

.imgrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;}
.imgrow div{height:190px;border-radius:16px;display:grid;place-items:center;font-size:52px;}

.share{display:flex;align-items:center;gap:10px;margin:30px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap;}
.share span{font-weight:800;font-family:'Fredoka',sans-serif;}
/* The email share control is a <button>, not an <a> — see the note on
 * craftifybud_share_links() in functions.php. Styled identically. */
.share a,.share button{width:40px;height:40px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:17px;transition:.2s;border:none;padding:0;cursor:pointer;font-family:inherit;color:inherit;}
.share a:hover,.share button:hover{background:var(--teal-btn);}

.authorbox{background:var(--cream);border-radius:20px;padding:26px;display:flex;gap:20px;align-items:center;margin-bottom:20px;}
.authorbox .ava{width:88px;height:88px;flex:0 0 88px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--purple));display:grid;place-items:center;font-size:40px;color:#fff;overflow:hidden;}
.authorbox .ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.authorbox h2,.authorbox h4{font-size:19px;margin-bottom:6px;padding:0;border:none;}
.authorbox p{font-size:14px;color:var(--muted);font-weight:600;}

.related{background:#fff5f8;padding:52px 0;}

/* ==========================================================================
   14. ABOUT PAGE
   ========================================================================== */
.about-hero{background:linear-gradient(135deg,#fff0f5 0%,#fef6e6 35%,#e9f9f5 70%,#f1ecfd 100%);position:relative;overflow:hidden;padding:52px 0 56px;}
.about-hero .wrap{position:relative;z-index:2;}
.ah-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:center;}
.ah-grid h1{font-size:44px;line-height:1.1;margin-bottom:14px;}
.ah-grid h1 .hl{color:var(--coral-dark);}
.ah-grid h1 .hl2{color:var(--teal-dark);}
.ah-grid p{font-size:18px;color:var(--muted);font-weight:600;margin-bottom:22px;max-width:540px;}
.ah-actions{display:flex;gap:12px;flex-wrap:wrap;}
.portrait{width:300px;height:300px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--purple));display:grid;place-items:center;font-size:120px;color:#fff;margin:0 auto;box-shadow:0 18px 40px rgba(0,0,0,.12);border:10px solid #fff;overflow:hidden;}
/* aspect-ratio pins the crop to a square so the face stays centred instead
 * of the image being clipped at an arbitrary height by the circle. */
.portrait img{width:100%;height:135%;aspect-ratio:1;object-fit:cover;object-position:center 20%;border-radius:50%;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat{background:#fff;border-radius:18px;padding:24px 20px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.06);transition:.2s;}
.stat:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.1);}
.stat .ic{font-size:34px;}
.stat .num{font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;margin:6px 0 2px;}
.stat .lbl{color:var(--muted);font-weight:700;font-size:13px;}
.s1 .num{color:var(--coral);}
.s2 .num{color:var(--teal);}
.s3 .num{color:var(--purple);}
.s4 .num{color:#c8901c;}

/* Story — two columns only when a story image is set, otherwise one clean
   centred column. Stops an empty picture box leaving a big white gap. */
.story{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.story-single{grid-template-columns:1fr;max-width:860px;margin:0 auto;}
.story-img{border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.09);position:sticky;top:96px;}
.story-img img{width:100%;height:auto;display:block;}
.story h2{font-size:30px;margin-bottom:14px;display:flex;align-items:center;gap:10px;padding:0;border:none;}
.story h2 .bar{width:6px;height:28px;border-radius:6px;background:var(--teal);flex:0 0 6px;}
.story .entry-content{font-size:17px;}
.story .entry-content h2{font-size:24px;padding-left:16px;border-left:6px solid var(--coral);}
.sig{font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px;color:var(--coral-btn);margin-top:18px;}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.value{background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 6px 20px rgba(0,0,0,.06);transition:.2s;border-top:5px solid var(--coral);}
.value:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.1);}
.value:nth-child(2){border-top-color:var(--teal);}
.value:nth-child(3){border-top-color:var(--purple);}
.value:nth-child(4){border-top-color:var(--yellow);}
.value:nth-child(5){border-top-color:var(--coral);}
.value:nth-child(6){border-top-color:var(--teal);}
.value .ic{font-size:38px;margin-bottom:10px;}
.value h3{font-size:19px;margin-bottom:8px;}
.value p{color:var(--muted);font-weight:600;font-size:15px;}

.follow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.fbox{border-radius:18px;padding:26px 20px;text-align:center;color:#fff;transition:.2s;}
.fbox:hover{transform:translateY(-5px);color:#fff;}
.fbox .ic{font-size:34px;}
.fbox h3,.fbox h4{font-size:18px;margin:8px 0 2px;color:#fff;}
.fbox span{font-weight:700;font-size:13px;opacity:.9;}
.f-fb{background:#3b5998;}
.f-pin{background:#e60023;}
.f-ig{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);}
.f-yt{background:#ff0000;}

/* ==========================================================================
   15. CONTACT PAGE
   ========================================================================== */
.c-hero{background:linear-gradient(135deg,#fff0f5 0%,#fef6e6 35%,#e9f9f5 70%,#f1ecfd 100%);position:relative;overflow:hidden;padding:50px 0 54px;text-align:center;}
.c-hero .wrap{position:relative;z-index:2;}
.c-hero .breadcrumb{text-align:left;}
.c-hero h1{font-size:46px;line-height:1.1;margin-bottom:14px;}
.c-hero h1 .hl{color:var(--coral-dark);}
.c-hero h1 .hl2{color:var(--teal-dark);}
.c-hero p{font-size:18px;color:var(--muted);font-weight:600;max-width:600px;margin:0 auto;}

.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.reason{background:#fff;border-radius:18px;padding:24px 20px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.06);transition:.2s;border-top:5px solid var(--coral);}
.reason:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.1);}
.reason:nth-child(2){border-top-color:var(--teal);}
.reason:nth-child(3){border-top-color:var(--purple);}
.reason:nth-child(4){border-top-color:var(--yellow);}
.reason .ic{font-size:34px;}
.reason h2,.reason h3{font-size:18px;margin:8px 0 6px;padding:0;border:none;}
.reason p{color:var(--muted);font-weight:600;font-size:14px;}

.formbox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.formbox h2{font-size:26px;margin-bottom:6px;display:flex;align-items:center;gap:10px;padding:0;border:none;}
.formbox h2 .bar{width:6px;height:26px;border-radius:6px;background:var(--coral);flex:0 0 6px;}
.formbox .lead{color:var(--muted);font-weight:600;font-size:15px;margin-bottom:22px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;border:2px solid var(--line);border-radius:14px;padding:13px 16px;font-size:16px;font-family:'Nunito',sans-serif;font-weight:600;background:var(--cream);color:var(--ink);outline:none;transition:.2s;}
.field textarea{min-height:150px;resize:vertical;border-radius:18px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(59,182,166,.13);}
.field input::placeholder,.field textarea::placeholder{color:#a9a9b8;font-weight:600;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);font-weight:700;margin-bottom:18px;}
.consent input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--teal);}
.formbox .btn{width:100%;padding:15px;font-size:16px;}
.formnote{text-align:center;font-size:13px;color:var(--muted);font-weight:700;margin-top:12px;}

.inforow{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.inforow:last-child{margin-bottom:0;}
.inforow .ic{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;font-size:22px;}
.i-pink{background:linear-gradient(135deg,#ffd7e0,#ffeef2);}
.i-teal{background:linear-gradient(135deg,#cdeee9,#eafaf7);}
.i-yellow{background:linear-gradient(135deg,#ffe9bd,#fff6e3);}
.i-purple{background:linear-gradient(135deg,#e2d6f7,#f3edfd);}
.inforow b{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;margin-bottom:3px;}
.inforow span{font-size:14px;color:var(--muted);font-weight:600;}
.inforow a{color:var(--teal-link);font-weight:700;font-size:14px;}
.inforow a:hover{color:var(--coral-btn);}

.socgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.socgrid a{border-radius:14px;padding:14px 10px;text-align:center;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;transition:.2s;}
.socgrid a:hover{transform:translateY(-3px);color:#fff;}
.socgrid a .ic{display:block;font-size:22px;margin-bottom:4px;}
.s-fb{background:#3b5998;}
.s-pin{background:#e60023;}
.s-ig{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888);}
.s-yt{background:#ff0000;}

.faq{max-width:820px;margin:0 auto;}
.faq-item{background:#fff;border:2px solid var(--line);border-radius:16px;padding:20px 24px;margin-bottom:14px;transition:.2s;}
.faq-item:hover{border-color:var(--teal);}
.faq-item h3{font-size:18px;margin-bottom:8px;display:flex;align-items:flex-start;gap:10px;}
.faq-item h3 .q{color:var(--coral-btn);font-weight:700;}
.faq-item p{color:var(--muted);font-weight:600;font-size:15px;padding-left:26px;}

/* ==========================================================================
   15b. PINTEREST — board grid + save-on-image button
   ========================================================================== */
.pinsec{background:var(--cream);}
.pinboards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:8px;}
.pinboard{display:block;text-align:center;}
.pinboard-img{
  display:block;position:relative;
  aspect-ratio:4/3;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#fbeaf0,#ece2fb);
  box-shadow:0 6px 20px rgba(0,0,0,.07);
  transition:.2s;
}
.pinboard-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pinboard:hover .pinboard-img{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.12);}
.pinboard-badge{
  position:absolute;right:8px;bottom:8px;
  width:30px;height:30px;border-radius:50%;
  background:#fff;display:grid;place-items:center;font-size:15px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.pinboard-name{display:block;margin-top:10px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;}
.pinsec-cta{text-align:center;margin-top:30px;}

/* The board matching the category you are browsing, moved to the front. */
.pinboard.is-current .pinboard-img{box-shadow:0 0 0 3px var(--purple-btn),0 8px 22px rgba(0,0,0,.12);}
.pinboard.is-current .pinboard-name{color:var(--purple-btn);}

/* ---------------------------------------------------------------------
 * Save-to-Pinterest button, injected over each content image by main.js.
 *
 * `.pinnable` is inline-block so it hugs the image rather than the full
 * column width — otherwise the button would float in whitespace beside a
 * narrow image. On touch screens there is no hover, so the button is
 * always visible there (see the media query below).
 * ------------------------------------------------------------------- */
.pinnable{position:relative;display:inline-block;max-width:100%;line-height:0;}
.pin-save{
  position:absolute;top:12px;left:12px;
  display:inline-flex;align-items:center;gap:6px;
  background:#c42450;color:#fff!important;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;line-height:1;
  padding:9px 15px;border-radius:30px;
  text-decoration:none!important;
  box-shadow:0 3px 12px rgba(0,0,0,.25);
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s,transform .18s;
  pointer-events:none;
}
.pinnable:hover .pin-save,
.pin-save:focus-visible{opacity:1;transform:none;pointer-events:auto;}
.pin-save:hover{background:#a81c42;color:#fff!important;}

/* No hover on touch — show it permanently, a little smaller. */
@media(hover:none){
  .pin-save{opacity:1;transform:none;pointer-events:auto;font-size:13px;padding:8px 13px;}
}

/* ==========================================================================
   16. NEWSLETTER
   ========================================================================== */
.newsletter{background:var(--teal-btn);color:#fff;border-radius:26px;padding:44px;text-align:center;}
.newsletter h2{font-size:29px;margin-bottom:8px;padding:0;border:none;}
.newsletter p{opacity:.92;font-weight:600;margin-bottom:20px;}
.nl-form{max-width:470px;margin:0 auto;display:flex;gap:10px;}
.nl-form input{flex:1;border:none;border-radius:40px;padding:14px 20px;font-size:16px;font-family:'Nunito',sans-serif;min-width:0;}

/* ---------------------------------------------------------------------
 * Newsletter block powered by a WPForms shortcode.
 * The form is dropped inside .newsletter, which has a dark teal
 * background — so the WPForms defaults (dark label, white panel) have to
 * be flipped, and the field label is hidden visually but kept for screen
 * readers (clip, not display:none).
 * ------------------------------------------------------------------- */
.newsletter .wpforms-container,.side-nl .wpforms-container{max-width:470px;margin:0 auto!important;}
.newsletter .wpforms-field,.side-nl .wpforms-field{padding:0!important;}
.newsletter .wpforms-field-label,.newsletter .wpforms-field-sublabel,
.side-nl .wpforms-field-label,.side-nl .wpforms-field-sublabel{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.newsletter .wpforms-container input[type=email],
.side-nl .wpforms-container input[type=email]{border:none!important;border-radius:40px!important;background:#fff!important;font-size:16px!important;padding:14px 20px!important;text-align:center!important;}
.newsletter .wpforms-container input[type=email]:focus,
.side-nl .wpforms-container input[type=email]:focus{box-shadow:0 0 0 4px rgba(255,255,255,.45)!important;}
.newsletter .wpforms-container button[type=submit],
.side-nl .wpforms-container button[type=submit]{width:auto!important;min-width:170px!important;margin-top:10px!important;}
.newsletter .wpforms-confirmation-container-full,
.side-nl .wpforms-confirmation-container-full{background:rgba(255,255,255,.16)!important;border:2px dashed rgba(255,255,255,.6)!important;color:#fff!important;}
.side-nl .wpforms-container button[type=submit]{min-width:100%!important;}

/* ==========================================================================
   17. SEARCH / 404 / GENERIC PAGE
   ========================================================================== */
.page-hero{background:linear-gradient(135deg,#fff0f5 0%,#eefaf8 100%);padding:44px 0;}
.page-hero h1{font-size:40px;margin-bottom:10px;}
.page-hero p{color:var(--muted);font-weight:600;font-size:17px;max-width:640px;}
.notfound{text-align:center;padding:70px 0;}
.notfound .big{font-family:'Fredoka',sans-serif;font-weight:700;font-size:110px;line-height:1;color:var(--coral-dark);}
.notfound h1{font-size:34px;margin:10px 0 12px;}
.notfound p{color:var(--muted);font-weight:600;font-size:17px;max-width:520px;margin:0 auto 26px;}
.noresults{background:var(--cream);border:2px dashed var(--yellow);border-radius:20px;padding:40px;text-align:center;}
.noresults h2{font-size:24px;margin-bottom:10px;padding:0;border:none;}
.noresults p{color:var(--muted);font-weight:600;margin-bottom:18px;}

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:#cfcfe0;padding:50px 0 24px;}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;}
.site-footer h4{color:#fff;font-size:17px;margin-bottom:14px;}
.site-footer ul{list-style:none;}
.site-footer li{margin:8px 0;font-size:14px;}
.site-footer a:hover{color:var(--yellow);}
.site-footer .logo small{color:#8a8a9c;}
.footer-logo{display:inline-block;max-width:210px;}
.footer-logo img{width:100%;height:auto;border-radius:12px;display:block;}
.fbottom{border-top:1px solid #3a3a4c;margin-top:32px;padding-top:18px;text-align:center;font-size:13px;color:#8a8a9c;}

/* ==========================================================================
   19. WORDPRESS CORE CLASSES
   ========================================================================== */
.alignleft{float:left;margin:6px 24px 20px 0;}
.alignright{float:right;margin:6px 0 20px 24px;}
.aligncenter{margin-left:auto;margin-right:auto;display:block;}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto;}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);}
.wp-caption{max-width:100%;}
.wp-caption-text{text-align:center;font-size:13px;color:var(--muted);font-style:italic;margin-top:8px;}
.sticky{border:2px solid var(--yellow);}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0;}
.gallery img{border-radius:14px;}

/* Comments */
.comments-area{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);}
.comments-area h3{font-size:22px;margin-bottom:18px;}
.comment-list{list-style:none;}
.comment-list li{background:var(--cream);border-radius:16px;padding:18px 22px;margin-bottom:14px;}
.comment-list .children{list-style:none;margin-left:26px;margin-top:14px;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:2px solid var(--line);border-radius:14px;padding:12px 16px;font-family:'Nunito',sans-serif;font-weight:600;margin-bottom:14px;background:var(--cream);}
.comment-form input[type=submit]{background:var(--coral-btn);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;border:none;border-radius:40px;padding:13px 28px;cursor:pointer;}

/* ==========================================================================
   20. WPFORMS — match the theme
   ========================================================================== */
.wpforms-container .wpforms-field-label{font-family:'Fredoka',sans-serif!important;font-weight:600!important;font-size:14px!important;color:var(--ink)!important;margin-bottom:6px!important;}
.wpforms-container .wpforms-field-sublabel{font-family:'Nunito',sans-serif!important;font-size:12px!important;color:var(--muted)!important;font-weight:600!important;}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=url],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea{border:2px solid var(--line)!important;border-radius:14px!important;padding:13px 16px!important;font-size:16px!important;font-family:'Nunito',sans-serif!important;font-weight:600!important;background:var(--cream)!important;color:var(--ink)!important;box-shadow:none!important;transition:.2s!important;max-width:100%!important;}
.wpforms-container textarea{border-radius:18px!important;min-height:150px!important;}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{border-color:var(--teal)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(59,182,166,.13)!important;outline:none!important;}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder{color:#a9a9b8!important;font-weight:600!important;}
.wpforms-container .wpforms-submit,
.wpforms-container button[type=submit]{background:var(--coral-btn)!important;color:#fff!important;border:none!important;border-radius:40px!important;padding:15px 24px!important;width:100%!important;font-family:'Fredoka',sans-serif!important;font-weight:700!important;font-size:16px!important;cursor:pointer!important;transition:.2s!important;box-shadow:none!important;}
.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type=submit]:hover{background:var(--coral-btn-h)!important;}
.wpforms-container .wpforms-required-label{color:var(--coral-btn)!important;}
.wpforms-container label.wpforms-error{color:var(--coral-btn)!important;font-family:'Nunito',sans-serif!important;font-weight:700!important;font-size:13px!important;}
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error{border-color:var(--coral)!important;}
.wpforms-confirmation-container-full{background:#eafaf7!important;border:2px dashed var(--teal)!important;border-radius:18px!important;padding:22px 24px!important;color:var(--ink)!important;font-family:'Nunito',sans-serif!important;font-weight:600!important;}
.formbox .wpforms-container{margin:0!important;}
.formbox .wpforms-field{padding:0 0 16px 0!important;}

/* ==========================================================================
   21. WIDE CONTENT — tables, iframes, pre
   Post content can contain a table wider than a phone screen. Without a
   scrollable wrapper the whole PAGE scrolls sideways, which breaks every
   other section too. functions.php wraps every content table in
   .table-wrap; this keeps the overflow inside that box.
   ========================================================================== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;border-radius:14px;}
.table-wrap table{margin:0;min-width:100%;}
.entry-content iframe,.entry-content video{max-width:100%;}
.entry-content pre{overflow-x:auto;}

/* ---------------------------------------------------------------------
 * Grid blow-out guard.
 *
 * Grid and flex items default to `min-width:auto`, which means they
 * refuse to shrink below their min-content. One wide table or one long
 * unbroken URL is then enough to stretch the whole track and push the
 * page sideways — the bug that made every single post scroll
 * horizontally on phones.
 *
 * min-width:0 lets these children shrink to their share of the row.
 * Keep this rule. Removing it brings the horizontal scroll straight back.
 * ------------------------------------------------------------------- */
.layout > *,.layout-wide > *,.spotlight > *,.grid3 > *,.grid4 > *,
.imgrow > *,.ah-grid > *,.stats > *,.story > *,.values > *,
.follow > *,.reasons > *,.frow > *,.socgrid > *,.fcols > *,
.gallery > *,.related > *,.pinboards > *{min-width:0;}

/* Long URLs and unbroken strings must wrap, not stretch the column. */
.entry-content{overflow-wrap:break-word;word-wrap:break-word;}
.entry-content a{overflow-wrap:break-word;}

/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */
@media(max-width:1024px){
  .grid4{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:40px;}
  .layout{grid-template-columns:minmax(0,1fr) 280px;gap:26px;}
}

/* 820px, not 900px — at 768px (iPad portrait) there is still room for the
 * full menu, so tablet users keep it instead of getting the hamburger. */
@media(max-width:820px){
  .main-nav,.topbar .promo{display:none;}
  .burger{display:flex;}
  .layout,.layout-wide{grid-template-columns:minmax(0,1fr);}
  .side-sticky{position:static;}
  .spotlight,.story,.ah-grid{grid-template-columns:1fr;gap:28px;}
  .story-img{position:static;}
  .grid3,.grid4{grid-template-columns:1fr 1fr;}
  .values,.reasons,.stats,.follow{grid-template-columns:1fr 1fr;}
  .pinboards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fcols{grid-template-columns:1fr 1fr;}
  .hero{padding:44px 0 50px;}
  .hero h1{font-size:34px;}
  .hero .sub{font-size:17px;}
  .art-head h1{font-size:30px;}
  .cat-hero h1{font-size:32px;}
  .ah-grid h1{font-size:33px;}
  .c-hero h1{font-size:34px;}
  .portrait{width:220px;height:220px;font-size:86px;}
  .hero-img{min-height:180px;font-size:76px;}
  .formbox{padding:26px 22px;}
  .entry-content{font-size:16.5px;}
  .gallery{grid-template-columns:repeat(2,1fr);}

  /* 44px minimum touch target (Apple HIG / Material). Footer and social
   * links are only 18–19px tall by default — easy to mis-tap on a phone. */
  .site-footer a{display:inline-block;padding:9px 0;}
  .topbar .socials a{display:inline-block;padding:8px 0;}
}

/* Below 700px the four social labels no longer fit on one line and
 * "YouTube" drops to a second row, costing ~51px above the fold for
 * links that also exist in the footer. */
@media(max-width:700px){
  .topbar{display:none;}
}

@media(max-width:560px){
  .wrap{padding:0 16px;}
  section{padding:34px 0;}
  .site-header .wrap{min-height:64px;}
  .logo{font-size:24px;}
  .logo img{max-height:44px;}
  .header-cta .btn{display:none;}
  .grid3,.grid4,.imgrow,.gallery{grid-template-columns:1fr;}
  .values,.reasons,.stats,.follow,.frow,.socgrid{grid-template-columns:1fr;}
  /* Two per row keeps the covers big enough to actually see. */
  .pinboards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .pinboard-name{font-size:14px;}
  .fcols{grid-template-columns:1fr;text-align:center;}
  .fcols p{margin-left:auto;margin-right:auto;}
  .footer-logo{max-width:170px;}
  .hero h1{font-size:27px;}
  .hero .sub{font-size:15px;}
  .hero-search{flex-direction:column;border-radius:22px;gap:8px;}
  .hero-search input{text-align:center;}
  .hero-search .btn{width:100%;}
  .hero-badges{gap:12px;font-size:13px;}
  .art-head h1{font-size:25px;}
  .cat-hero h1,.ah-grid h1,.c-hero h1,.page-hero h1{font-size:26px;}
  .sec-head h2,.row-head h2,.story h2,.formbox h2{font-size:22px;}
  .feat-big h2{font-size:20px;}
  .newsletter{padding:30px 20px;border-radius:20px;}
  .newsletter h2{font-size:23px;}
  .nl-form{flex-direction:column;}
  .nl-form .btn{width:100%;}
  .authorbox{flex-direction:column;text-align:center;}
  .notfound .big{font-size:74px;}
  .entry-content h2{font-size:22px;}
  .entry-content h3{font-size:19px;}
  /* ---------------------------------------------------------------
   * Category chips: one scrolling row, not three wrapped ones.
   *
   * Seven chips wrapped to 3 rows / 131px, and with the sort control
   * the toolbar ate 189px before a single post appeared. Keeping them
   * on one swipeable row costs ~44px and — unlike a filter button —
   * leaves the categories visible, which is what makes people browse.
   *
   * The negative margin + matching padding let the row bleed to the
   * screen edges so the last chip does not look clipped mid-word.
   * ------------------------------------------------------------- */
  .toolbar{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:10px;margin:20px 0 18px;}

  .subcats{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    margin:0 -16px;
    padding:2px 16px;
    min-width:0;
    flex:1 1 auto;
  }
  .subcats::-webkit-scrollbar{display:none;}
  .subcats .chip{flex:0 0 auto;scroll-snap-align:start;}

  /* Sort sits on the same line. The "Sort by:" label is hidden with the
   * clip technique, NOT display:none — a display:none label is dropped
   * from the accessibility tree and the select would lose its name. */
  .sortby{flex:0 0 auto;}
  .sortby label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .sortby select{padding:7px 10px;font-size:13px;}

  /* Long-form posts run 3–15 minutes. 17px/1.7 is markedly easier to read
   * on a phone than the desktop 16px/1.5. */
  .entry-content{font-size:17px;line-height:1.7;}

  /* Keep interactive controls at the 44px touch target. */
  .pagination .page-numbers{width:44px;height:44px;font-size:15px;}
  .toolbar select,#cb-sort{min-height:44px;font-size:16px;}
}

/* ==========================================================================
   23. PRINT
   ========================================================================== */
@media print{
  .topbar,.site-header,.mobnav,.rainbow,.catstrip,.side-box,aside,.share,.related,.site-footer,.newsletter,.dlbox{display:none!important;}
  body{background:#fff;font-size:12pt;}
  .layout{grid-template-columns:1fr;}
  .entry-content a{text-decoration:none;color:#000;}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .card:hover,.stat:hover,.value:hover,.reason:hover,.fbox:hover,.mini:hover,.feat-big:hover{transform:none;}
}