/*
Theme Name: Kathiyawadi Khamir
Theme URI: https://kathiyawadikhamir.com
Author: Kathiyawadi Khamir
Description: Custom mobile-first theme built for Kathiyawadi Khamir — fast, lightweight, and AdSense-friendly. Design language draws from Saurashtra's toran (doorway garland) motif, fort terracotta, and turban indigo.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kathiyawadi-khamir
*/

/* ============ DESIGN TOKENS ============ */
:root{
  --color-indigo: #1F3A5F;
  --color-indigo-dark: #14273f;
  --color-terracotta: #A63D40;
  --color-mustard: #E1A93C;
  --color-sand: #F4EDE1;
  --color-sand-light: #FAF6EF;
  --color-ink: #2B2521;
  --color-ink-soft: #55493f;
  --color-maroon: #6B1E23;
  --color-border: #e4d9c5;
  --color-header-text: #FFFFFF;
  --color-footer-text: #CBD7E6;
  --color-badge-bg: #FBF0DA;

  --font-display: "Rasa", Georgia, serif;
  --font-body: "Noto Sans Gujarati", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --max-width: 1180px;
  --content-width: 700px;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(43,37,33,0.06), 0 4px 14px rgba(43,37,33,0.05);
  --sticky-offset: 160px; /* JS overwrites this with the real measured header height */
}

/* ============ RESET ============ */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body{
  margin: 0;
  background: var(--color-sand);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--color-maroon); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--color-mustard);
  outline-offset: 2px;
}
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--color-ink); line-height: 1.25; margin: 0 0 .5em; }
h1{ font-size: clamp(1.7rem, 5vw, 2.6rem); }
h2{ font-size: clamp(1.35rem, 3.6vw, 1.9rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1.1em; }

.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--color-ink);
  color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* ============ HEADER ============ */
.site-topbar{ background: var(--color-indigo-dark); color: var(--color-header-text); font-size: .78rem; opacity: .9; }
.site-topbar .container{ display: flex; justify-content: space-between; align-items: center; padding-top: 6px; padding-bottom: 6px; }
.site-topbar .social{ display: flex; align-items: center; }
.site-topbar .social a{ display: inline-flex; color: var(--color-header-text); margin-left: 14px; opacity: .85; }
.site-topbar .social a:hover{ opacity: 1; }
.site-topbar .date{ font-family: var(--font-mono); letter-spacing: .02em; }

.site-header-sticky{ position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

.site-header{ background: var(--color-indigo); }
.site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.site-branding a{ color: var(--color-header-text); text-decoration: none; }
.site-title{ font-family: var(--font-display); font-size: 1.6rem; margin: 0; letter-spacing: .01em; }
.site-title img{ max-height: 44px; }
.site-description{ color: var(--color-header-text); opacity: .78; font-size: .8rem; margin: 2px 0 0; font-family: var(--font-body); }

.menu-toggle{
  display: inline-flex; background: transparent; border: 2px solid #cbd7e6; border-radius: var(--radius);
  color: #fff; padding: 8px 10px; font-size: 1rem; cursor: pointer;
}
@media (min-width: 900px){ .menu-toggle{ display: none; } }

.primary-nav{ background: var(--color-indigo-dark); }
.primary-nav .nav-inner{ display: flex; align-items: center; justify-content: space-between; }
.primary-nav .nav-menu{ display: none; flex-wrap: wrap; flex: 1 1 auto; }
.primary-nav.is-open .nav-menu{ display: flex; flex-direction: column; }
.primary-nav ul li a{
  display: block; padding: 12px 16px; color: var(--color-header-text); font-weight: 600; font-size: .92rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.primary-nav ul li a:hover{ background: rgba(255,255,255,0.08); text-decoration: none; }
.primary-nav li.current-menu-item > a,
.primary-nav li.current-menu-ancestor > a,
.primary-nav li.current_page_item > a{
  background: rgba(255,255,255,0.16); border-radius: 4px;
}

/* Parent items with children get a separate toggle button (added by JS) next
   to the link, so tapping/clicking the arrow opens the submenu without
   navigating away, and the link text still navigates normally on its own. */
.primary-nav li.menu-item-has-children{ position: relative; display: flex; align-items: center; }
.primary-nav li.menu-item-has-children > a{ flex: 1 1 auto; border-bottom: none; }
.primary-nav .submenu-toggle{
  background: transparent; border: none; color: var(--color-header-text); opacity: .85;
  cursor: pointer; padding: 12px 14px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.primary-nav .submenu-toggle::after{ content: "▾"; font-size: .7em; display: inline-block; transition: transform .15s ease; }
.primary-nav .submenu-toggle[aria-expanded="true"]::after{ transform: rotate(180deg); }
.primary-nav .submenu-toggle:hover{ opacity: 1; }

/* Sub-menus: a plain vertical block list (one item per line) — deliberately
   NOT flex/wrap like the top-level .nav-menu, so items never pair up
   side-by-side no matter how the top-level menu is laid out. */
.primary-nav .sub-menu{ display: none; padding-left: 14px; background: rgba(0,0,0,0.12); }
.primary-nav .sub-menu li{ display: block; width: 100%; }
.primary-nav li.submenu-open > .sub-menu{ display: block; }
.primary-nav .sub-menu li a{ font-size: .85rem; padding: 10px 16px; }

@media (min-width: 900px){
  .primary-nav .nav-menu{
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;              /* wraps to a 2nd line instead of scrolling/clipping — see note below */
    justify-content: flex-start;
    overflow: visible;            /* must stay visible or dropdown submenus get clipped */
  }
  .primary-nav .nav-menu > li{ flex: 0 0 auto; }
  .primary-nav ul li a{
    border-bottom: none;
    padding: 14px 13px;
    white-space: nowrap;
    font-size: .88rem;
  }
  .primary-nav .submenu-toggle{ border-bottom: none; padding: 14px 10px 14px 4px; }

  /* Desktop: sub-menus become absolutely-positioned dropdowns instead of an
     inline nested list. Shown on hover for mouse users, and on the
     .submenu-open class (toggled by clicking the arrow button) for
     click/keyboard users. Closes automatically on mouse-out since it's a
     real :hover state, and on outside click via JS for the click-opened case. */
  .primary-nav .sub-menu{
    position: absolute; top: 100%; left: 0; min-width: 220px; width: max-content; max-width: 280px; padding-left: 0;
    background: var(--color-indigo-dark); box-shadow: var(--shadow-card); z-index: 220;
    padding: 6px 0; border-radius: 0 0 var(--radius) var(--radius);
  }
  .primary-nav li.menu-item-has-children:hover > .sub-menu,
  .primary-nav li.submenu-open > .sub-menu{ display: block; }
  .primary-nav .sub-menu li a{ padding: 10px 18px; white-space: normal; font-size: .85rem; border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (min-width: 1300px){
  .primary-nav .nav-menu{ justify-content: center; }
  .primary-nav ul li a{ font-size: .92rem; padding: 14px 16px; }
}

/* Search icon + dropdown search box in the nav bar (desktop only) */
.nav-search{ position: relative; flex: 0 0 auto; }
@media (max-width: 899px){
  .nav-search{ display: none; }
}
.nav-search-toggle{
  background: transparent; border: none; color: var(--color-header-text); opacity: .9;
  cursor: pointer; padding: 10px 14px; display: flex; align-items: center;
}
.nav-search-toggle:hover{ opacity: 1; }
.nav-search-form{
  position: absolute; top: 100%; right: 0; background: #fff; padding: 10px;
  border-radius: var(--radius); box-shadow: var(--shadow-card); margin-top: 6px; z-index: 230;
}
.nav-search-form[hidden]{ display: none; }
.nav-search-form .search-form{ margin: 0; min-width: 240px; }

/* ============ DUHA OF THE DAY ============ */
.duha-section{ padding: 8px 0 4px; }
.duha-card{
  display: block; position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 36px 26px 30px; text-align: center; box-shadow: var(--shadow-card); margin-top: 14px;
  text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.duha-card:hover{
  text-decoration: none; border-color: var(--color-terracotta);
  box-shadow: 0 6px 20px rgba(43,37,33,0.12); transform: translateY(-2px);
}
.duha-eyebrow{
  display: inline-flex; align-items: center; gap: 7px; background: var(--color-mustard); color: var(--color-ink); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; padding: 6px 18px;
  border-radius: 100px; margin: 0 0 20px;
}
.duha-eyebrow-icon{ display: inline-flex; width: 15px; height: 15px; }
.duha-eyebrow-icon svg{ width: 100%; height: 100%; }
.duha-text{ font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.35rem); line-height: 1.85; color: var(--color-ink); }
.duha-text p{ margin: 0 0 4px; }
.duha-text strong, .duha-text b{ color: var(--color-terracotta); font-weight: 700; }
.duha-attribution{ margin-top: 18px; font-family: var(--font-body); font-style: italic; color: var(--color-ink-soft); font-size: .92rem; }
.duha-source{ font-style: italic; }

/* ============ READ / UNREAD TRACKING ============ */
.read-badge{
  display: inline-block; margin-left: 10px; background: #e4f3e6; color: #2e7d32;
  font-family: var(--font-mono); font-size: .68rem; padding: 3px 10px; border-radius: 100px; vertical-align: middle;
}
.post-card.is-read{ opacity: .68; }
.post-card.is-read .thumb-wrap{ filter: grayscale(35%); }
.post-card.is-read .thumb-wrap::after{
  content: "✓ વંચાયેલ";
  position: absolute; top: 10px; right: 10px; background: rgba(43,37,33,0.78); color: #fff;
  font-family: var(--font-mono); font-size: .64rem; padding: 3px 9px; border-radius: 100px; letter-spacing: .02em;
}
.clear-read-link{ text-align: center; font-size: .78rem; margin-top: 4px; }
.clear-read-link a{ color: var(--color-ink-soft); }

/* ============ HOMEPAGE OVERVIEW ============ */
.home-hero{
  position: relative; background: var(--color-indigo) center/cover no-repeat;
  padding: 60px 0; overflow: hidden; display: flex; align-items: center;
}
.home-hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,0.72) 0%, rgba(20,20,20,0.5) 55%, rgba(20,20,20,0.25) 100%);
}
.hero-inner{ position: relative; z-index: 1; width: 100%; }
.hero-text{ max-width: 620px; }
.home-hero h1{ color: #fff; }
.home-hero p{ color: #eee; font-size: 1.02rem; }
.hero-btn{ margin-top: 18px; }

.topics-section{ padding: 26px 0 6px; }
.topic-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px){ .topic-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px){ .topic-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .topic-grid{ grid-template-columns: repeat(5, 1fr); } }
.topic-tile{
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 16px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.topic-tile:hover{ border-color: var(--color-terracotta); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-card); }
.topic-tile .topic-icon{
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%; background: var(--color-badge-bg); color: var(--color-terracotta);
}
.topic-tile .topic-icon svg{ width: 22px; height: 22px; }
.topic-tile .topic-text{ min-width: 0; }
.topic-tile .topic-name{ display: block; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-size: .96rem; }
.topic-tile .topic-count{ display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .76rem; color: var(--color-ink-soft); margin-top: 6px; }
.topic-tile .topic-count-num{
  display: inline-block; background: var(--color-badge-bg); color: var(--color-terracotta);
  font-weight: 800; font-size: .82rem; padding: 1px 9px; border-radius: 100px;
}

/* ============ POST GRID / CARDS ============ */
.section-title{ margin: 30px 0 14px; display: flex; align-items: baseline; justify-content: space-between; }
.section-title a{ font-size: .8rem; font-family: var(--font-mono); }

.post-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px){ .post-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){
  .post-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .post-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px){
  .post-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
}

.post-card{
  background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border); display: flex; flex-direction: column;
}
.post-card .thumb-wrap{ position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--color-sand); }
.post-card .thumb-wrap img{ width: 100%; height: 100%; object-fit: cover; }
.post-card .eyebrow{
  position: absolute; top: 10px; left: 10px; background: var(--color-mustard); color: var(--color-ink);
  font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; text-transform: uppercase; letter-spacing: .03em;
}
.post-card .card-body{ padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.post-card h3{ margin-bottom: 6px; }
.post-card h3 a{ color: var(--color-ink); }
.post-card p.excerpt{ color: var(--color-ink-soft); font-size: .92rem; margin-bottom: 10px; flex: 1; }
.post-meta{ font-family: var(--font-mono); font-size: .74rem; color: #8a7c6a; display: flex; gap: 10px; }

/* ============ AD SLOTS ============ */
.ad-slot{
  background: #fff; border: 1px dashed var(--color-border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; margin: 24px 0; overflow: hidden;
  min-height: 100px; /* reserved space to avoid layout shift */
}
.ad-slot.ad-infeed{ grid-column: 1 / -1; }
.ad-slot .ad-label{ font-family: var(--font-mono); font-size: .65rem; color: #b3a48d; letter-spacing: .08em; text-transform: uppercase; }

/* ============ SINGLE POST ============ */
.single-wrap{ padding: 26px 0 50px; }
.single-header{ max-width: var(--content-width); margin: 0 auto 18px; }
.single-header .cat-links a{
  display: inline-block; background: var(--color-mustard); color: var(--color-ink); font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 100px; margin-right: 6px; text-transform: uppercase;
}
.single-header h1{ margin-top: 12px; }
.single-meta{ font-family: var(--font-mono); font-size: .8rem; color: var(--color-ink-soft); margin-top: 8px; }
.single-featured{ max-width: var(--content-width); margin: 20px auto; border-radius: var(--radius); overflow: hidden; }

/* Content area as a white card, distinct from the sand page background */
.entry-content-card{
  max-width: var(--content-width);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 30px 32px;
}
@media (max-width: 640px){
  .entry-content-card{ padding: 20px 18px; }
}
.entry-content{ font-size: 1.05rem; }
.entry-content h2, .entry-content h3{ margin-top: 1.4em; }
.entry-content img{ border-radius: var(--radius); margin: 1em 0; }
.entry-content blockquote{
  border-left: 4px solid var(--color-terracotta); margin: 1.4em 0; padding: 4px 0 4px 18px; color: var(--color-ink-soft); font-style: italic;
}
.tags-row{ max-width: var(--content-width); margin: 24px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags-row a{ background: var(--color-sand-light); border: 1px solid var(--color-border); font-size: .78rem; padding: 5px 12px; border-radius: 100px; color: var(--color-ink-soft); }

/* ============ SIDEBAR ============ */
.content-layout{ display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 980px){
  .content-layout{ grid-template-columns: 2.2fr 1fr; align-items: start; }
  .site-sidebar{
    position: sticky;
    top: calc(var(--sticky-offset, 160px) + 16px);
    /* No internal scrollbar: it sticks below the header while there's room,
       then scrolls off naturally with the page if it's taller than that gap. */
  }
}
.widget{
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 18px 18px 16px; margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.widget h2{
  font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-terracotta);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--color-sand-light);
  display: flex; align-items: center; gap: 8px;
}
.widget h2::before{ content: ""; width: 4px; height: 16px; background: var(--color-mustard); border-radius: 2px; flex: 0 0 auto; }
.widget ul li{ padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; transition: padding-left .15s ease; }
.widget ul li:last-child{ border-bottom: none; }
.widget ul li a:hover{ color: var(--color-terracotta); }
.widget .cat-count{ font-family: var(--font-mono); color: #b3a48d; font-size: .75rem; }

/* ============ PAGINATION ============ */
.pagination{ display: flex; gap: 8px; justify-content: center; margin: 32px 0; font-family: var(--font-mono); flex-wrap: wrap; }
.pagination a, .pagination span{ padding: 8px 13px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; font-size: .85rem; }
.pagination .current{ background: var(--color-indigo); color: #fff; border-color: var(--color-indigo); }
.pagination a:hover{ background: var(--color-sand-light); text-decoration: none; }

/* ============ SEARCH FORM / 404 ============ */
.search-form{ display: flex; gap: 8px; max-width: 480px; margin: 20px auto; }
.search-form input[type="search"]{ flex: 1; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; font-family: var(--font-body); }
.search-form button{ background: var(--color-terracotta); color: #fff; border: none; padding: 0 18px; border-radius: var(--radius); font-weight: 700; cursor: pointer; }
.error-404{ text-align: center; padding: 60px 0; }

/* ============ CUSTOM FORMS ([kk_form] shortcode) ============ */
.kk-form{ max-width: 600px; }
.kk-form-row{ margin-bottom: 18px; }
.kk-form-row label{ display: block; margin-bottom: 6px; font-weight: 600; color: var(--color-ink); }
.kk-form-row .required{ color: var(--color-terracotta); }
.kk-hp-field{ position: absolute; left: -9999px; top: -9999px; }
.kk-form-message{ display: none; margin-top: 14px; font-size: .92rem; padding: 10px 14px; border-radius: var(--radius); }
.kk-form-message:not(:empty){ display: block; }
.kk-form-message.kk-form-success{ background: #e4f3e6; color: #2e7d32; }
.kk-form-message.kk-form-error{ background: #fbe4e4; color: #a63d40; }
.feedback-section{ margin-top: 36px; padding-top: 8px; border-top: 1px solid var(--color-border); }

/* ============ BUTTONS & FORMS (site-wide, consistent everywhere) ============
   Two reusable button styles you can drop into any Text/Custom HTML widget
   or page content: class="btn btn-dark" (solid) or class="btn btn-light"
   (outline). These same visual styles are also applied automatically —
   with no extra classes needed — to plugin-generated forms (Contact Form 7,
   newsletter/subscribe widgets, etc.) via their standard input types, so a
   contact form, a newsletter signup, and a manually-added button all match. */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  padding: 11px 26px; border-radius: 100px; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: all .15s ease; line-height: 1.2;
}
.btn:hover{ text-decoration: none; transform: translateY(-1px); }
.btn-dark{ background: var(--color-terracotta); color: #fff; border-color: var(--color-terracotta); }
.btn-dark:hover{ background: var(--color-maroon); border-color: var(--color-maroon); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.btn-light{ background: transparent; color: inherit; border-color: currentColor; }
.btn-light:hover{ background: rgba(128,128,128,0.15); }

/* Defensive override: guarantees the button look wins even inside a widget
   area where WordPress's Text-widget editor or another plugin might apply
   its own paragraph/link styling around the class. */
a.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 26px !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Text/email/etc. fields — matches across Contact Form 7, newsletter
   widgets, search, and any other plugin using standard input types. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--color-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(166,61,64,0.15);
}

/* Submit buttons everywhere — same solid look as .btn-dark, no extra class needed */
input[type="submit"],
button[type="submit"],
.wpcf7-submit{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .92rem;
  padding: 12px 28px;
  border-radius: 100px;
  border: 2px solid var(--color-terracotta);
  background: var(--color-terracotta);
  color: #fff;
  cursor: pointer;
  transition: all .15s ease;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover{
  background: var(--color-maroon);
  border-color: var(--color-maroon);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

/* ============ TRUST BADGES ============ */
.trust-badges{ background: var(--color-sand-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 40px 0; margin-top: 20px; }
.trust-badges-grid{ display: grid; grid-template-columns: 1fr; gap: 26px; text-align: center; }
@media (min-width: 700px){ .trust-badges-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .trust-badges-grid{ grid-template-columns: repeat(4, 1fr); } }
.trust-badge .trust-icon{
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%; background: #fff; color: var(--color-terracotta); box-shadow: var(--shadow-card);
}
.trust-badge .trust-icon svg{ width: 24px; height: 24px; }
.trust-badge h3{ font-size: 1rem; margin-bottom: 6px; }
.trust-badge p{ font-size: .88rem; color: var(--color-ink-soft); margin: 0; }

/* ============ FOOTER ============ */
.site-footer{ background: var(--color-indigo-dark); color: var(--color-footer-text); margin-top: 50px; padding: 40px 0 20px; }
.footer-grid{ display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px){ .footer-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .footer-grid{ grid-template-columns: repeat(4, 1fr); } }
.footer-grid h3{ color: var(--color-footer-text); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.footer-grid a{ color: var(--color-footer-text); opacity: .85; }
.footer-grid a:hover{ opacity: 1; text-decoration: underline; }
.footer-widget{ margin-bottom: 18px; }
.footer-widget:last-child{ margin-bottom: 0; }
.footer-bottom{ text-align: center; font-size: .78rem; color: var(--color-footer-text); opacity: .65; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; }

/* ============ UTIL ============ */
.visually-hidden{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }