/*
Theme Name: FluffyAffair
Theme URI: https://www.fluffyaffair.com/
Author: FluffyAffair
Author URI: https://www.fluffyaffair.com/
Description: A warm, editorial pet-care theme for FluffyAffair — cozy "field guide" design with a milk & oat base, deep pine green, marigold accents, Fraunces display type, paw-pad blob image frames and stitched wavy dividers. Includes custom home page, single article layout with reading progress + table of contents, and category archive with sub-topic chips.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: fluffyaffair
Tags: blog, news, two-columns, custom-menu, custom-logo, featured-images, sticky-post, translation-ready
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root{
  --milk:#FBF7EF; --oat:#F2EADB; --cloud:#FFFFFF;
  --pine:#214034; --pine-deep:#163026; --fern:#41654F;
  --marigold:#F0A63C; --marigold-soft:#FBE6C4;
  --blossom:#F3D9CE; --sky:#D6E4E0;
  --ink:#23201B; --ink-soft:#5C564B;
  --line:#E4DAC7;
  --r-lg:28px; --r-md:20px; --r-sm:12px;
  --display:"Fraunces",Georgia,serif;
  --body:"Nunito Sans",system-ui,sans-serif;
  --shadow:0 10px 30px -12px rgba(35,32,27,.18);
  --blob:62% 38% 54% 46% / 48% 58% 42% 52%;
}

/* =========================================================
   2. Base
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--milk);color:var(--ink);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:6px}
ul,ol{list-style:none}
.screen-reader-text{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;word-wrap:normal!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--body);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fern);display:inline-block}
h1,h2,h3,h4.display{font-family:var(--display);font-weight:560;line-height:1.13;letter-spacing:-.01em}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;padding:14px 26px;border-radius:999px;border:none;cursor:pointer;transition:.18s;font-family:var(--body)}
.btn--solid{background:var(--pine);color:#fff}
.btn--solid:hover{background:var(--pine-deep);transform:translateY(-2px);color:#fff}
.btn--ghost{background:transparent;border:1.5px solid var(--pine);color:var(--pine)}
.btn--ghost:hover{background:var(--pine);color:#fff}

/* Category pills — color classes are assigned per-category in PHP */
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:999px;background:var(--marigold-soft);color:#8A5A12}
.pill--c0{background:var(--marigold-soft);color:#8A5A12}
.pill--c1{background:#DCE9D5;color:#2F5A31}
.pill--c2{background:var(--blossom);color:#95492E}
.pill--c3{background:var(--sky);color:#2C5A50}
.pill--c4{background:#E3DCF0;color:#4E3E7A}

/* Wavy divider */
.wave{display:block;width:100%;height:38px;color:var(--oat)}
.wave--pine{color:var(--pine)}
.wave--flip{transform:rotate(180deg)}
.section{padding:64px 0}
.section-oat{background:var(--oat)}

/* =========================================================
   3. Header
   ========================================================= */
.topbar{background:var(--pine);color:#EAF1EC;font-size:.8rem;text-align:center;padding:8px 16px;font-weight:600}
.topbar a{color:var(--marigold);font-weight:800}
.topbar a:hover{text-decoration:underline}
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,247,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.logo{font-family:var(--display);font-size:1.6rem;font-weight:620;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;line-height:1}
.logo .paw{width:34px;height:34px;background:var(--pine);border-radius:var(--blob);display:grid;place-items:center;color:var(--marigold);font-size:1rem;transform:rotate(-8deg);flex-shrink:0}
.logo em{font-style:normal;color:var(--fern)}
.logo .custom-logo{max-height:44px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-weight:700;font-size:.92rem;align-items:center}
.nav-links a{padding:6px 2px;border-bottom:2px solid transparent;display:block}
.nav-links li{position:relative}
.nav-links a:hover,.nav-links .current-menu-item > a{border-color:var(--marigold);color:var(--pine)}
.nav-links .sub-menu{position:absolute;top:100%;left:-14px;background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:10px;min-width:200px;display:none;z-index:60}
.nav-links li:hover > .sub-menu,.nav-links li:focus-within > .sub-menu{display:block}
.nav-links .sub-menu a{padding:8px 12px;border-radius:8px;border-bottom:none;font-size:.88rem}
.nav-links .sub-menu a:hover{background:var(--oat)}
.search-toggle{margin-left:8px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--cloud);display:grid;place-items:center;cursor:pointer;font-size:1rem}
.search-toggle:hover{background:var(--oat)}
.burger{display:none;margin-left:auto;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* Search overlay */
.search-overlay{position:fixed;inset:0;background:rgba(22,48,38,.75);backdrop-filter:blur(4px);z-index:99;display:none;align-items:flex-start;justify-content:center;padding:120px 24px}
.search-overlay.open{display:flex}
.search-overlay .search-form{width:100%;max-width:560px;display:flex;gap:10px}
.search-form input[type=search]{flex:1;border:none;border-radius:999px;padding:16px 26px;font-family:var(--body);font-size:1.05rem;background:#fff}
.search-form .btn{flex-shrink:0}

/* Mobile menu */
.mobile-nav{display:none;background:var(--milk);border-bottom:1px solid var(--line);padding:18px 24px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:11px 4px;font-weight:800;border-bottom:1px solid var(--line)}
.mobile-nav .sub-menu a{padding-left:22px;font-weight:600}

/* =========================================================
   4. Front page
   ========================================================= */
.hero{padding:64px 0 40px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.9rem);margin:14px 0 20px}
.hero h1 .swash{font-style:italic;color:var(--fern);font-weight:500}
.hero .lede{font-size:1.12rem;color:var(--ink-soft);max-width:33rem;margin-bottom:26px}
.species{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--cloud);border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;font-weight:800;font-size:.9rem;transition:.18s}
.chip:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-art{position:relative}
.blob-frame{width:100%;aspect-ratio:1/1;max-width:470px;margin-left:auto;border-radius:var(--blob);overflow:hidden;background:linear-gradient(140deg,var(--oat),var(--blossom));box-shadow:var(--shadow);position:relative;animation:breathe 9s ease-in-out infinite}
.blob-frame img{width:100%;height:100%;object-fit:cover}
@keyframes breathe{0%,100%{border-radius:62% 38% 54% 46% / 48% 58% 42% 52%}50%{border-radius:46% 54% 42% 58% / 56% 44% 58% 42%}}
.float-card{position:absolute;background:var(--cloud);border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px 18px;font-size:.85rem;font-weight:700;display:flex;gap:12px;align-items:center;border:1px solid var(--line);max-width:290px}
.float-card .dot{width:38px;height:38px;border-radius:var(--blob);display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;background:var(--marigold-soft)}
.float-card small{display:block;font-weight:600;color:var(--ink-soft)}
.float-card--a{bottom:34px;left:-10px}
.float-card--b{top:26px;right:-6px}
.float-card--b .dot{background:var(--sky)}

.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:36px}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:8px}
.sec-head .more{font-weight:800;color:var(--fern);border-bottom:2px solid var(--marigold);padding-bottom:3px;white-space:nowrap}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* Post card */
.card{background:var(--cloud);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:0 4px 14px -8px rgba(35,32,27,.12);display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--sky),var(--oat));position:relative;overflow:hidden;display:block}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.045)}
.card .thumb .pill{position:absolute;top:14px;left:14px;box-shadow:0 3px 8px rgba(0,0,0,.14);z-index:2}
.card .thumb .no-img{position:absolute;inset:0;display:grid;place-items:center;font-size:2.6rem;opacity:.4}
.card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-size:1.24rem}
.card-body h3 a:hover{color:var(--fern)}
.card-body .excerpt{font-size:.93rem;color:var(--ink-soft)}
.meta{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-top:auto;padding-top:8px;flex-wrap:wrap}
.meta .avatar{width:26px;height:26px;border-radius:50%;background:var(--pine);color:var(--marigold);display:grid;place-items:center;font-size:.65rem;font-weight:800;overflow:hidden}
.meta .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.meta i{font-style:normal;opacity:.5}

/* Species band */
.band{background:var(--pine);color:#F2F6F1;border-radius:40px;padding:56px 48px;position:relative;overflow:hidden}
.band::before{content:"🐾";position:absolute;font-size:9rem;opacity:.06;right:-20px;top:-30px;transform:rotate(18deg)}
.band .eyebrow{color:var(--marigold)}
.band h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:10px 0 34px;max-width:26rem}
.species-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tile{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:26px 22px;text-align:center;transition:.2s;display:block}
.tile:hover{background:rgba(255,255,255,.14);transform:translateY(-4px)}
.tile .ico{width:66px;height:66px;margin:0 auto 14px;border-radius:var(--blob);background:var(--marigold);display:grid;place-items:center;font-size:1.8rem}
.tile b{font-family:var(--display);font-size:1.15rem;font-weight:560;display:block}
.tile small{color:#BFD0C4;font-weight:600}

/* Spotlight */
.spot{display:grid;grid-template-columns:1fr 1fr;background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.spot .thumb{min-height:340px;background:linear-gradient(135deg,var(--blossom),var(--oat));display:block;position:relative}
.spot .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.spot-body{padding:48px 52px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.spot-body h2{font-size:clamp(1.6rem,2.6vw,2.15rem)}
.spot-body p{color:var(--ink-soft)}

/* Newsletter */
.news{background:var(--marigold-soft);border-radius:40px;padding:60px 48px;text-align:center;position:relative;overflow:hidden}
.news h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:10px 0 12px}
.news p{color:var(--ink-soft);max-width:32rem;margin:0 auto 28px}
.news form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news input[type=email]{flex:1;min-width:230px;border:1.5px solid #E4C48E;border-radius:999px;padding:14px 22px;font-family:var(--body);font-size:.95rem;background:#fff}
.news .paw-row{position:absolute;bottom:14px;left:0;right:0;font-size:1rem;opacity:.28;letter-spacing:18px;user-select:none}

/* =========================================================
   5. Single article
   ========================================================= */
.progress{position:fixed;top:0;left:0;height:5px;width:0;background:linear-gradient(90deg,var(--fern),var(--marigold));z-index:100;border-radius:0 4px 4px 0}
.progress::after{content:"🐾";position:absolute;right:-6px;top:-9px;font-size:.95rem;transform:rotate(90deg)}
.a-hero{padding:52px 75px 20px;margin:0 auto}
.crumbs{font-size:.85rem;font-weight:700;color:var(--ink-soft);margin-bottom:20px}
.crumbs a:hover{color:var(--fern)}
.crumbs i{font-style:normal;margin:0 8px;opacity:.45}
.a-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);margin:16px 0 22px}
.a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.a-meta .avatar{width:44px;height:44px;border-radius:var(--blob);background:var(--pine);color:var(--marigold);display:grid;place-items:center;font-weight:800;overflow:hidden}
.a-meta .avatar img{width:100%;height:100%;object-fit:cover}
.a-meta b{color:var(--ink);display:block}
.a-meta .sep{opacity:.4}
.upd{background:var(--sky);color:#2C5A50;border-radius:999px;padding:5px 13px;font-size:.75rem;font-weight:800}
.a-figure{max-width:1020px;margin:36px auto 0;padding:0 24px}
.a-figure .frame{border-radius:36px 120px 36px 36px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:21/10;background:linear-gradient(140deg,var(--oat),var(--blossom))}
.a-figure img{width:100%;height:100%;object-fit:cover}
.a-figure figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:10px;text-align:right;font-weight:600}

.a-layout{display:grid;grid-template-columns:250px minmax(0,720px);gap:64px;justify-content:center;padding:56px 24px 0;max-width:1180px;margin:0 auto}
.rail{align-self:start;display:flex;flex-direction:column;gap:26px}
.toc{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.toc h4{margin:0}
.toc-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:var(--body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--fern);text-align:left}
.toc-arrow{display:inline-block;font-size:.85rem;line-height:1;transition:transform .2s ease}
.toc-toggle[aria-expanded="true"] .toc-arrow{transform:rotate(180deg)}
.toc-list{display:flex;flex-direction:column;margin-top:14px}
.toc-list[hidden]{display:none}
.toc a{display:block;font-size:.88rem;font-weight:700;color:var(--ink-soft);padding:7px 0 7px 14px;border-left:2.5px solid var(--line);line-height:1.4}
.toc a:hover,.toc a.on{color:var(--pine);border-color:var(--marigold)}
.share{display:flex;gap:10px}
.share a,.share button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--cloud);cursor:pointer;font-size:1rem;transition:.15s;display:grid;place-items:center}
.share a:hover,.share button:hover{background:var(--pine);color:#fff;border-color:var(--pine)}

/* Entry content */
.entry-content{font-size:17px;line-height:1.75}
.entry-content > *{margin-bottom:1.4em}
.entry-content p{color:#3A362E}
.entry-content > p:first-of-type{font-size:1.22rem;line-height:1.7;color:var(--ink)}
.entry-content > p:first-of-type::first-letter{font-family:var(--display);font-size:3.4em;float:left;line-height:.85;padding:4px 12px 0 0;color:var(--fern)}
.entry-content h2{font-size:1.75rem;margin:1.6em 0 .7em;position:relative;padding-left:20px}
.entry-content h2::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:6px;border-radius:6px;background:var(--marigold)}
.entry-content h3{font-size:1.25rem;margin:1.6em 0 .6em}
.entry-content ul{margin:0 0 1.5em 1.2em;list-style:none}
.entry-content ul li{margin-bottom:.6em;padding-left:8px}
.entry-content ul li::marker{content:"🐾 ";font-size:.8em}
.entry-content ul{list-style:disc}
.entry-content ol{margin:0 0 1.5em 1.4em;list-style:decimal}
.entry-content ol li{margin-bottom:.6em}
.entry-content strong{color:var(--pine)}
.entry-content a{color:var(--fern);font-weight:700;border-bottom:2px solid var(--marigold);overflow-wrap:anywhere;word-break:break-word}
.entry-content a:hover{color:var(--pine)}
.entry-content .references-list,.entry-content .references-list li,.entry-content .references-list cite{overflow-wrap:anywhere;word-break:break-word}
.entry-content img{border-radius:var(--r-md)}
.entry-content figcaption{font-size:.82rem;color:var(--ink-soft);font-weight:600;margin-top:8px}
.entry-content blockquote,.wp-block-quote{font-family:var(--display);font-style:italic;font-size:1.5rem;line-height:1.45;color:var(--pine);border:none;margin:2.2em 0;padding:26px 30px;background:var(--oat);border-radius:6px 40px 40px 40px;position:relative}
.entry-content blockquote::before{content:"“";position:absolute;top:-18px;left:20px;font-size:4rem;color:var(--marigold);font-style:normal}
.entry-content blockquote p{color:var(--pine);margin-bottom:0}
.entry-content blockquote cite{display:block;font-family:var(--body);font-style:normal;font-size:.85rem;font-weight:800;margin-top:12px;color:var(--ink-soft)}

/* Callout block styles (Group block styles) */
.callout,.is-style-fa-vet-note,.is-style-fa-warning{border-radius:var(--r-md);padding:26px 28px 26px 74px;margin:2em 0;position:relative;font-size:.97rem}
.callout::before,.is-style-fa-vet-note::before,.is-style-fa-warning::before{position:absolute;left:22px;top:24px;font-size:1.6rem}
.callout--vet,.is-style-fa-vet-note{background:#E4EEE6;border:1.5px solid #BBD3C0}
.callout--vet::before,.is-style-fa-vet-note::before{content:"🩺"}
.callout--warn,.is-style-fa-warning{background:#FBEAE2;border:1.5px solid #ECC5B2}
.callout--warn::before,.is-style-fa-warning::before{content:"⚠️"}

/* Tables */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8em 0;border-radius:var(--r-md);box-shadow:0 4px 14px -8px rgba(35,32,27,.12)}
.entry-content table,.wp-block-table table{width:100%;border-collapse:collapse;margin:0;font-size:.93rem;background:var(--cloud)}
.table-scroll table{border-radius:var(--r-md);overflow:hidden}
.entry-content th{background:var(--pine);color:#fff;text-align:left;padding:13px 18px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border:none}
.entry-content td{padding:13px 18px;border:none;border-bottom:1px solid var(--line)}
.entry-content tr:last-child td{border-bottom:none}

/* Tags / author / related */
.tagrow{display:flex;flex-wrap:wrap;gap:10px;margin:3em 0 0}
.tag{background:var(--cloud);border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.82rem;font-weight:800}
.tag:hover{background:var(--oat)}
.author-card {display: flex;gap: 22px;background: var(--cloud);border: 1px solid var(--line);border-radius: var(--r-lg);padding: 28px;margin-top: 44px;align-items: stretch;flex-wrap: nowrap;flex-direction: row;}.author-card .pic{width:84px;height:84px;flex-shrink:0;border-radius:var(--blob);background:var(--pine);color:var(--marigold);display:grid;place-items:center;font-family:var(--display);font-size:1.5rem;overflow:hidden}
.author-card .pic img{width:100%;height:100%;object-fit:cover}
.author-card p{font-size:.92rem;color:var(--ink-soft);margin-top:4px}
.author-card h3{font-size:1.15rem}
.author-card a{font-weight:800;color:var(--fern)}
.related{background:var(--oat);margin-top:80px;padding:64px 0}
.related h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:8px 0 32px}

/* Comments */
.comments-area{max-width:768px;margin:64px auto 0;padding:0 24px}
.comments-area .comments-title,.comment-reply-title{font-family:var(--display);font-size:1.5rem;margin-bottom:24px}
.comment-list .comment{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;margin-bottom:18px}
.comment-list .children{margin:18px 0 0 26px}
.comment-author{display:flex;align-items:center;gap:10px;font-weight:800}
.comment-author img{border-radius:50%}
.comment-metadata{font-size:.78rem;color:var(--ink-soft);margin:4px 0 10px}
.comment-form label{display:block;font-weight:800;font-size:.85rem;margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;font-family:var(--body);margin-bottom:16px;background:#fff}
.comment-form .submit{background:var(--pine);color:#fff;border:none;border-radius:999px;padding:13px 28px;font-weight:800;cursor:pointer;font-family:var(--body)}
.comment-form .submit:hover{background:var(--pine-deep)}
.reply a{font-size:.8rem;font-weight:800;color:var(--fern)}

/* =========================================================
   6. Archive / category
   ========================================================= */
.cat-hero{background:var(--pine);color:#F0F5F0;position:relative;overflow:hidden;padding:64px 0 88px}
.cat-hero::after{content:"🐾";position:absolute;right:-30px;bottom:-50px;font-size:14rem;opacity:.07;transform:rotate(-16deg)}
.cat-hero .crumbs{color:#A9C0AF}
.cat-hero .crumbs a:hover{color:var(--marigold)}
.badge-cat{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 18px;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--marigold)}
.cat-hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);margin:18px 0 16px;color:#fff}
.cat-hero h1 em{font-style:italic;color:var(--marigold);font-weight:500}
.cat-hero .cat-desc{max-width:38rem;color:#CBDACF;font-size:1.08rem;margin-bottom:26px}
.cat-stats{display:flex;gap:28px;font-weight:800;font-size:.9rem;color:#A9C0AF}
.cat-stats b{color:#fff;font-family:var(--display);font-size:1.4rem;font-weight:560;display:block}
.subcats{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.subchip{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 18px;font-weight:800;font-size:.85rem;color:#E9F0EA;transition:.18s;display:inline-block}
.subchip:hover,.subchip.active{background:var(--marigold);border-color:var(--marigold);color:var(--pine-deep)}
.cat-wave{display:block;width:100%;height:40px;color:var(--pine);margin-top:-1px;transform:rotate(180deg)}

.featured{margin-top:-44px;position:relative;z-index:2}
.feat-card{display:grid;grid-template-columns:1.1fr .9fr;background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.feat-card .thumb{min-height:330px;background:linear-gradient(135deg,var(--sky),var(--blossom));position:relative;display:block}
.feat-card .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feat-card .flag{position:absolute;top:18px;left:18px;background:var(--pine);color:var(--marigold);border-radius:999px;padding:7px 16px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.feat-body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.feat-body h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.feat-body h2 a:hover{color:var(--fern)}
.feat-body p{color:var(--ink-soft)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:52px 0 30px;flex-wrap:wrap}
.toolbar h2{font-size:1.5rem}
.toolbar .count{color:var(--ink-soft);font-weight:700;font-size:.9rem}

/* Newsletter card variant inside grids */
.card--news{background:var(--marigold-soft);border-color:#E9CD9B;align-items:flex-start;padding:34px 30px;justify-content:center;gap:14px}
.card--news h3{font-size:1.45rem}
.card--news p{color:#6B5326;font-size:.95rem}
.card--news form{display:flex;flex-direction:column;gap:10px;width:100%}
.card--news input[type=email]{border:1.5px solid #E4C48E;border-radius:999px;padding:12px 20px;font-family:var(--body);background:#fff}

/* WP pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin:60px 0 20px;flex-wrap:wrap}
.pager .nav-links{display:flex;gap:10px;margin:0;align-items:center;flex-wrap:wrap;justify-content:center}
.pager .page-numbers{min-width:46px;height:46px;display:grid;place-items:center;border-radius:var(--blob);font-weight:800;border:1.5px solid var(--line);background:var(--cloud);padding:0 14px;transition:.15s}
.pager a.page-numbers:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
.pager .page-numbers.current{background:var(--marigold);border-color:var(--marigold);color:var(--pine-deep)}
.pager .page-numbers.dots{border:none;background:none}

/* Generic page / search / 404 */
.page-plain{max-width:768px;margin:0 auto;padding:56px 24px}
.page-plain h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:24px}
.notfound{text-align:center;padding:100px 24px}
.notfound .big{font-family:var(--display);font-size:6rem;color:var(--fern);line-height:1}
.notfound p{color:var(--ink-soft);margin:16px auto 28px;max-width:28rem}

/* =========================================================
   7. Footer
   ========================================================= */
.site-footer{background:var(--pine-deep);color:#C9D6CC;margin-top:80px;padding:64px 0 28px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.site-footer .logo{color:#fff;font-size:1.4rem}
.site-footer .logo em{color:var(--marigold)}
.site-footer h4{color:#fff;font-family:var(--body);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.site-footer li{margin-bottom:10px}
.site-footer a:hover{color:var(--marigold)}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#8FA697}

/* =========================================================
   8. Responsive
   ========================================================= */
@media(max-width:960px){
   .a-hero{padding:52px 10px 20px;margin:0 auto}

  .hero-grid{grid-template-columns:1fr;gap:44px}
  .blob-frame{margin:0 auto}
  .grid-3{grid-template-columns:1fr 1fr}
  .species-tiles{grid-template-columns:1fr 1fr}
  .spot,.feat-card{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links,.search-toggle{display:none}
  .burger{display:block}
  .a-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .rail{position:static;order:-1}
}
@media(max-width:620px){
  .grid-3{grid-template-columns:1fr}
  .band,.news{padding:40px 26px;border-radius:28px}
  .spot-body,.feat-body{padding:32px 26px}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* WP core alignment/classes */
.alignwide{max-width:1020px;margin-left:auto;margin-right:auto}
.alignfull{width:100%;max-width:none}
.aligncenter{margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.wp-caption{max-width:100%}
.sticky{display:block}
.bypostauthor{display:block}

.advert {
   position: relative;
   margin: 0;
   text-align: center !important;
}
.advert:before {
 content: "Advertisement";
 display: block;
 left: 0;
 height: 20px;
 font-size: 11px;
 line-height: 20px;
 letter-spacing: 1px;
 color: #6f7174;
 top: -20px;
}

.advert:before {
   text-align: center !important
}
div.advertinside:before {
content: 'Advertisement - Continue Reading Below';
display: block;
top: -20px;
left: 0;
height: 20px;
font-size: 11px;
line-height: 20px;
letter-spacing: 1px;
color: #6f7174;
text-align: center;
}

div.advertinside:after {
content: 'Advertisement - Continue Reading Below';
display: block;
top: -20px;
left: 0;
height: 20px;
font-size:11px;
line-height: 20px;
letter-spacing: 1px;
color: #6f7174;
text-align: center;
}
.mn-h-400 {
min-height: 100px
}
div.advertinside {
text-align: center;
background: #f5f5f5;
}
@media (min-width: 1024px) {
.advertmobile {
   display: none;
}
}

@media screen and (max-width:720px) {

.advert {
   position: relative;
   margin: 0;
   text-align: center !important;
}

.advert:before {
   text-align: center !important
}

}