/* ==========================================================================
   MharaHaryana Modern CSS — v2.0
   PHP 8.3 Upgrade | Premium Responsive Design | Core Web Vitals Optimised
   Fonts: Noto Sans + Noto Sans Devanagari (Hindi-first)
   Author: Senior Web Engineer Upgrade — 2026
   ========================================================================== */

/* ── 1. Font Import (display=swap for CWV) ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Noto+Sans+Devanagari:wght@300;400;600;700&display=swap');

/* ── 2. Design Tokens (CSS Custom Properties) ───────────────────────────── */
:root {
  /* Brand Palette – Deep Saffron + Forest Green (Haryana flag-inspired) */
  --clr-accent:        hsl(27, 95%, 48%);    /* saffron  #f47203 */
  --clr-accent-dark:   hsl(27, 95%, 36%);    /* burnt    #b45400 */
  --clr-accent-light:  hsl(27, 100%, 92%);   /* blush    #ffe8c6 */
  --clr-green:         hsl(140, 55%, 28%);   /* forest   #207a3b */
  --clr-green-light:   hsl(140, 45%, 94%);   /* mint     #e8f5ec */

  /* Neutrals */
  --clr-bg:            hsl(40, 33%, 97%);    /* warm white */
  --clr-surface:       hsl(0, 0%, 100%);
  --clr-surface-alt:   hsl(40, 20%, 96%);
  --clr-border:        hsl(30, 15%, 88%);
  --clr-text:          hsl(20, 12%, 18%);    /* WCAG AA on white */
  --clr-text-muted:    hsl(20, 8%, 45%);
  --clr-text-light:    hsl(0, 0%, 100%);
  --clr-link:          hsl(218, 72%, 35%);
  --clr-link-visited:  hsl(271, 45%, 38%);

  /* Nav */
  --clr-nav-bg:        hsl(27, 90%, 20%);    /* dark saffron */
  --clr-nav-text:      hsl(0, 0%, 100%);

  /* Typography */
  --font-body:         'Noto Sans Devanagari', 'Noto Sans', system-ui, sans-serif;
  --font-heading:      'Noto Sans Devanagari', 'Noto Sans', system-ui, sans-serif;
  --font-mono:         'Courier New', Courier, monospace;

  /* Type Scale (fluid) */
  --text-xs:    clamp(0.75rem, 1.5vw, 0.8125rem);
  --text-sm:    clamp(0.875rem, 1.8vw, 0.9375rem);
  --text-base:  clamp(0.9375rem, 2vw, 1.0625rem);
  --text-md:    clamp(1rem, 2.2vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 2.5vw, 1.375rem);
  --text-xl:    clamp(1.25rem, 3vw, 1.75rem);
  --text-2xl:   clamp(1.5rem, 4vw, 2.25rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Layout */
  --max-width: 980px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);
  --shadow-lg:  0 16px 40px rgba(0,0,0,.14);
  --shadow-glow: 0 0 0 3px hsl(27 95% 48% / .25);

  /* Transitions */
  --t-fast:  150ms ease;
  --t-base:  250ms ease;
  --t-slow:  400ms ease;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --clr-bg:          hsl(22, 12%, 10%);
    --clr-surface:     hsl(22, 10%, 14%);
    --clr-surface-alt: hsl(22, 8%, 18%);
    --clr-border:      hsl(22, 10%, 26%);
    --clr-text:        hsl(30, 15%, 90%);
    --clr-text-muted:  hsl(30, 10%, 60%);
    --clr-link:        hsl(218, 85%, 72%);
    --clr-nav-bg:      hsl(22, 18%, 8%);
  }
}

/* ── 3. Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 4. Typography ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-text);
  margin-bottom: var(--space-3);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p {
  margin-bottom: var(--space-4);
  max-width: 70ch; /* optimal reading width */
}

a {
  color: var(--clr-link);
  text-decoration: none;
  transition: color var(--t-fast), opacity var(--t-fast);
}

a:visited { color: var(--clr-link-visited); }

a:hover, a:focus-visible {
  color: var(--clr-accent);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

a:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── 5. Layout Wrapper ───────────────────────────────────────────────────── */
.mh-wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Override legacy 960px table layout at mobile widths */
table[width="960"],
table[width="940"] {
  width: 100% !important;
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (max-width: 640px) {
  table[width="960"],
  table[width="940"],
  table[width="100%"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Make nested tables stack */
  td {
    display: block;
    width: 100% !important;
  }

  /* But keep nav table cells inline */
  .nav_bg td,
  .ddsmoothmenu td {
    display: table-cell;
  }
}

/* ── 6. Header ───────────────────────────────────────────────────────────── */
.site-header {
  background: var(--clr-surface);
  border-bottom: 2px solid var(--clr-accent);
  padding-block: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: hsl(0 0% 100% / .92);
}

@media (prefers-color-scheme: dark) {
  .site-header {
    background-color: hsl(22 12% 10% / .92);
  }
}

/* Logo */
.site-logo img {
  height: auto;
  width: 100%;
  max-width: 444px;
}

/* Header slogan */
.header-txt-top {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-block: var(--space-1);
}

/* ── 7. Navigation Bar ───────────────────────────────────────────────────── */
.nav_bg {
  background: var(--clr-nav-bg) !important;
  border-radius: 0;
}

/* Smooth menu override for modern look */
.ddsmoothmenu {
  background: transparent !important;
}

.ddsmoothmenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ddsmoothmenu ul li a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--clr-nav-text) !important;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.ddsmoothmenu ul li a:hover,
.ddsmoothmenu ul li a:focus-visible {
  background: hsl(0 0% 100% / .15);
  color: var(--clr-accent-light) !important;
  text-decoration: none;
}

/* Dropdown */
.ddsmoothmenu ul ul {
  background: var(--clr-nav-bg);
  border: 1px solid hsl(0 0% 100% / .1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

/* ── 8. Search Bar ───────────────────────────────────────────────────────── */
.search-form-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  float: right;
  margin-top: 40px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.search-form-wrap:focus-within {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-glow);
}

/* Main search input */
.search-form-wrap input[type="text"].search,
.search-form-wrap input#src_field {
  border: none !important;
  background: transparent !important;
  height: 32px;
  padding: 0 var(--space-2);
  outline: none;
  box-shadow: none !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--clr-text);
  min-width: 160px;
  -webkit-appearance: none;
  appearance: none;
}

.search-form-wrap input[type="text"].search::placeholder,
.search-form-wrap input#src_field::placeholder {
  color: var(--clr-text-muted);
  opacity: .7;
}

/* Search submit button */
.search-form-wrap .search-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted) !important;
  cursor: pointer;
  border-radius: 50% !important;
  transition: background var(--t-fast), color var(--t-fast);
  box-shadow: none !important;
  transform: none !important;
}

.search-form-wrap .search-btn:hover {
  background: var(--clr-accent-light) !important;
  color: var(--clr-accent) !important;
}

.search-form-wrap .search-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── 9. Voice Search Button ──────────────────────────────────────────────── */
#voice-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  position: relative;
  overflow: hidden;
  padding: 0 !important; /* CRITICAL: Prevent generic button padding squash! */
  box-shadow: none !important;
  transform: none !important;
}

#voice-search-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--clr-text-muted) !important;
  transition: fill var(--t-base);
  pointer-events: none;
}

#voice-search-btn:hover {
  background: var(--clr-accent-light) !important;
}

#voice-search-btn:hover svg { fill: var(--clr-accent) !important; }

#voice-search-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* Recording state */
#voice-search-btn.recording {
  background: hsl(0 80% 96%) !important;
  border: 1px solid hsl(0 72% 50%) !important;
  box-shadow: 0 0 0 0 hsl(0 72% 50% / .6) !important;
  animation: voice-pulse 1.2s ease-out infinite;
}

#voice-search-btn.recording svg { fill: hsl(0 72% 50%) !important; }

@keyframes voice-pulse {
  0%   { box-shadow: 0 0 0 0    hsl(0 72% 50% / .6); }
  70%  { box-shadow: 0 0 0 10px hsl(0 72% 50% / 0);  }
  100% { box-shadow: 0 0 0 0    hsl(0 72% 50% / 0);  }
}

/* Voice feedback tooltip */
#voice-feedback {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--clr-text);
  color: var(--clr-text-light);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 200;
}

#voice-feedback.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 10. Content Cards ───────────────────────────────────────────────────── */
.box_innerdesign,
.content-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base);
}

@media (prefers-reduced-motion: no-preference) {
  .content-card:hover,
  .box_innerdesign:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

/* ── 11. Sidebar ─────────────────────────────────────────────────────────── */
.right_panel_new .box_innerdesign {
  background: var(--clr-surface-alt);
}

/* ── 12. Quotes / Daily Banner ───────────────────────────────────────────── */
#quote {
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-dark) 100%);
  color: var(--clr-text-light);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  min-height: 46px;
}

/* ── 13. Links ───────────────────────────────────────────────────────────── */
.all_anc, a.all_anc {
  color: var(--clr-accent) !important;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.all_anc:hover { color: var(--clr-accent-dark) !important; opacity: .85; }

.top_link_1 { color: var(--clr-green) !important; font-weight: 700; }

/* ── 14. Footer ──────────────────────────────────────────────────────────── */
.footer_link_1,
.footer_txt {
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
}

/* ── 15. Forms ───────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--clr-text);
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-base), box-shadow var(--t-base);
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-glow);
}

input[type="submit"],
button {
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-text-light);
  background: var(--clr-accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

input[type="submit"]:hover, button:hover {
  background: var(--clr-accent-dark);
  transform: translateY(-1px);
}

/* ── 16. Tables ──────────────────────────────────────────────────────────── */
table.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

table.content-table th {
  background: var(--clr-nav-bg);
  color: var(--clr-text-light);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
}

table.content-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--clr-border);
}

table.content-table tr:nth-child(even) td {
  background: var(--clr-surface-alt);
}

/* ── 17. Date Display ────────────────────────────────────────────────────── */
#date_display, .date_txt {
  font-size: var(--text-sm);
  color: var(--clr-accent);
  font-weight: 700;
}

/* ── 18. Carousel (Author Scroller) ──────────────────────────────────────── */
#carousel_container {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}

#carousel_ul li {
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--t-base);
}

#carousel_ul li:hover { transform: scale(1.05); }

#carousel_ul li img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ── 19. Skip Link (Accessibility + CWV) ─────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--clr-accent);
  color: var(--clr-text-light);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 700;
  z-index: 9999;
  transition: top var(--t-fast);
}

.skip-link:focus { top: 0; }

/* ── 20. Structured-data badge (admin-visible) ───────────────────────────── */
.sd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--clr-green-light);
  color: var(--clr-green);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}

/* ── 21. Loading Skeleton (replaces "Loading…" gif) ─────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--clr-surface-alt) 25%,
    var(--clr-border)      50%,
    var(--clr-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 22. Mobile Nav Hamburger ────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-nav-text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .nav_bg .ddsmoothmenu ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .nav_bg.nav-open .ddsmoothmenu ul { display: flex; }
}

/* ── 23. Print Styles ────────────────────────────────────────────────────── */
@media print {
  .nav_bg, #carousel_container, #voice-search-btn, .skip-link { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a::after { content: ' (' attr(href) ')'; font-size: 10pt; }
}

/* ── 24. Reduced Motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 25. Manual Dark/Light Theme Classes ─────────────────────────────────── */
body.dark-theme,
:root.dark-theme {
  --clr-bg:          hsl(22, 12%, 10%) !important;
  --clr-surface:     hsl(22, 10%, 14%) !important;
  --clr-surface-alt: hsl(22, 8%, 18%) !important;
  --clr-border:      hsl(22, 10%, 26%) !important;
  --clr-text:        hsl(30, 15%, 90%) !important;
  --clr-text-muted:  hsl(30, 10%, 60%) !important;
  --clr-link:        hsl(218, 85%, 72%) !important;
  --clr-nav-bg:      hsl(22, 18%, 8%) !important;
}

body.light-theme,
:root.light-theme {
  --clr-bg:          hsl(40, 33%, 97%) !important;
  --clr-surface:     hsl(0, 0%, 100%) !important;
  --clr-surface-alt: hsl(40, 20%, 96%) !important;
  --clr-border:      hsl(30, 15%, 88%) !important;
  --clr-text:        hsl(20, 12%, 18%) !important;
  --clr-text-muted:  hsl(20, 8%, 45%) !important;
  --clr-link:        hsl(218, 72%, 35%) !important;
  --clr-nav-bg:      hsl(27, 90%, 20%) !important;
}

/* ── 26. Floating Actions (Bookmarks, Resizing, Theme) ─────────────────── */
.floating-actions-container {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999;
}

.floating-action-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 50% !important;
  background: var(--clr-accent) !important;
  color: var(--clr-text-light) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important; /* CRITICAL: Prevent generic button padding squash! */
  transition: transform var(--t-fast), background var(--t-fast) !important;
  transform: none !important;
}

.floating-action-btn:hover {
  transform: scale(1.1) !important;
  background: var(--clr-accent-dark) !important;
}

.floating-action-btn svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

.floating-action-btn.active {
  background: var(--clr-green) !important;
}

.floating-action-btn.active:hover {
  background: var(--clr-green-light) !important;
  color: var(--clr-green) !important;
}

/* ── 27. Search form mic/Go button inline override ─────────────────────── */
.search-form-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--clr-surface) !important;
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  float: none !important;
  transition: border-color var(--t-base), box-shadow var(--t-base) !important;
}

.search-form-wrap:focus-within {
  border-color: var(--clr-accent) !important;
  box-shadow: var(--shadow-glow) !important;
}

.search-form-wrap input[type="text"].search,
.search-form-wrap input#src_field {
  border: none !important;
  background: transparent !important;
  height: 32px !important;
  padding: 0 var(--space-2) !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--clr-text) !important;
  min-width: 170px !important;
}

.search-mic-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--clr-text-muted) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}

.search-mic-btn:hover {
  background: var(--clr-accent-light) !important;
  color: var(--clr-accent) !important;
}

.search-mic-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

.search-mic-btn.recording {
  background: hsl(0 80% 96%) !important;
  border: 1px solid hsl(0 72% 50%) !important;
  animation: voice-pulse 1.2s ease-out infinite !important;
}

.search-mic-btn.recording svg {
  color: hsl(0 72% 50%) !important;
}

.search-go-btn {
  background: var(--clr-accent) !important;
  color: var(--clr-text-light) !important;
  border: none !important;
  padding: 0 var(--space-4) !important;
  height: 32px !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
  transition: background var(--t-fast), transform var(--t-fast) !important;
}

.search-go-btn:hover {
  background: var(--clr-accent-dark) !important;
  transform: scale(1.05) !important;
}

/* ── 28. Responsive Header Flexbox ─────────────────────────────────────── */
.head_part {
  width: 100% !important;
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: var(--space-4) var(--space-4) !important;
  gap: var(--space-4) !important;
  box-sizing: border-box !important;
}

.logo {
  float: none !important;
  margin-top: 0 !important;
  flex: 1 1 300px !important;
}

.logo img {
  max-width: 100% !important;
  height: auto !important;
}

.logo p,
.header-txt-top {
  margin-bottom: 0 !important;
  margin-top: var(--space-1) !important;
}

.head_part_right {
  float: none !important;
  width: auto !important;
  flex: 1 1 350px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.search-and-tools {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  flex-wrap: wrap !important;
}

@media (max-width: 768px) {
  .head_part {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .head_part_right {
    justify-content: center !important;
    width: 100% !important;
  }
  
  .logo {
    text-align: center !important;
    width: 100% !important;
  }
  
  .logo img {
    margin: 0 auto !important;
  }
}

/* ── 29. Fully Responsive Footer ────────────────────────────────────────── */
.footer_part {
  width: 100% !important;
  background: var(--clr-surface-alt) !important;
  border-top: 1px solid var(--clr-border) !important;
  padding-block: var(--space-8) !important;
  margin-top: var(--space-8) !important;
}

.footer {
  width: 100% !important;
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  padding-inline: var(--space-4) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
  box-sizing: border-box !important;
}

.footer_menu {
  width: 100% !important;
  margin: 0 auto !important;
}

.footer_menu ul {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--space-2) var(--space-3) !important;
  margin: var(--space-2) 0 !important;
}

.footer_menu ul li {
  display: inline-block !important;
  color: var(--clr-text-muted) !important;
  font-size: var(--text-sm) !important;
}

.footer_menu ul li a {
  color: var(--clr-link) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.footer_menu ul li a:hover {
  color: var(--clr-accent) !important;
  text-decoration: underline !important;
}

.footer_mid, .footer_bottom {
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.footer_mid p {
  font-size: var(--text-sm) !important;
  color: var(--clr-text-muted) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.footer_mid p span {
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  font-size: var(--text-md) !important;
}

.footer_bottom p {
  font-size: var(--text-xs) !important;
  color: var(--clr-text-muted) !important;
  border-top: 1px solid var(--clr-border) !important;
  padding-top: var(--space-4) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* ── 30. Footer Dark Mode Overrides ─────────────────────────────────────── */
body.dark-theme .footer_part {
  background: var(--clr-surface) !important;
  border-top-color: var(--clr-border) !important;
}

body.dark-theme .footer_mid p,
body.dark-theme .footer_mid p a,
body.dark-theme .footer_mid p span,
body.dark-theme .footer_bottom p {
  color: var(--clr-text-muted) !important;
}

body.dark-theme .footer_mid p a:hover {
  color: var(--clr-accent) !important;
}