/*
Theme Name: innewzealand
Theme URI: https://innewzealand.co.il/
Author: innewzealand Adventure Team
Author URI: https://innewzealand.co.il/
Description: פורטל התיירות, המסלולים, הטרקים והקמפרוואנים המוביל של ניו זילנד בהשראת טיולי (Tiuli). מציג אך ורק מאמרים אמיתיים שעלו לאתר לפי קטגוריות וורדפרס פעילות, הירו פנורמי מרהיב, תפריט ניווט וורדפרס טבעי, טופס יצירת קשר מאובטח, ונגישות WCAG מלאה.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: innewzealand
Tags: travel, hiking, new-zealand, trails, tiuli-style, nature, campervan, outdoor, rtl, responsive, clean
*/

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&family=Heebo:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary: #0D5C3A;         /* Rich New Zealand Fern / Tiuli Emerald */
  --primary-hover: #09432A;
  --primary-light: #E8F5E9;
  --secondary: #059669;       /* Vibrant Evergreen */
  --accent-gold: #F59E0B;     /* Sunshine Gold / Trail Marker */
  --accent-gold-hover: #D97706;
  --accent-teal: #0D9488;     /* Fjord Turquoise */
  --bg-page: #F8FAFC;         /* Crisp outdoor slate */
  --bg-card: #FFFFFF;
  --text-main: #1E293B;       /* Deep slate text */
  --text-title: #0F172A;
  --text-muted: #64748B;
  --border-light: #E2E8F0;
  --border-subtle: #F1F5F9;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 20px 25px -5px rgba(13, 92, 58, 0.1), 0 8px 10px -6px rgba(13, 92, 58, 0.1);
  --shadow-hero: 0 25px 50px -12px rgba(15, 23, 42, 0.45);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --font-heading: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Assistant', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--text-main);
  direction: rtl;
  text-align: right;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-title);
  line-height: 1.25;
  font-weight: 700;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================================
   TOP NOTIFICATION / WEATHER & TRAIL CONDITIONS BAR (TIULI STYLE)
   ========================================================================= */
.top-notice-bar {
  background: linear-gradient(90deg, #09432A 0%, #0D5C3A 50%, #059669 100%);
  color: #FFFFFF;
  font-size: 13.5px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.top-notice-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.notice-items {
  display: flex;
  align-items: center;
  gap: 18px;
}

.notice-badge {
  background-color: var(--accent-gold);
  color: #0F172A;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notice-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notice-links a {
  color: #E2E8F0;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.notice-links a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* =========================================================================
   HEADER & TIULI BRANDING
   ========================================================================= */
.site-header {
  background-color: #FFFFFF;
  border-bottom: 2px solid #E2E8F0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 20px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(13, 92, 58, 0.3);
  color: #FFFFFF;
  flex-shrink: 0;
}

.logo-text h1, .logo-text .site-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.logo-text .site-tagline {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Tiuli Search in Header */
.header-search-wrap {
  flex: 1;
  max-width: 420px;
  margin: 0 20px;
  display: none;
}

@media (min-width: 992px) {
  .header-search-wrap {
    display: block;
  }
}

.header-search-form {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-input {
  width: 100%;
  padding: 11px 44px 11px 18px;
  background-color: #F1F5F9;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-main);
  transition: all 0.25s ease;
}

.header-search-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 92, 58, 0.15);
}

.header-search-icon {
  position: absolute;
  right: 16px;
  color: var(--text-muted);
  pointer-events: none;
  font-size: 16px;
}

/* Header Action CTA */
.header-cta-btn {
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-hover) 100%);
  color: #0F172A;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.header-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
  color: #000;
}

/* =========================================================================
   STRICT WORDPRESS NATIVE NAVIGATION MENU BAR
   ========================================================================= */
.main-nav-bar {
  background-color: var(--primary);
  border-bottom: 3px solid var(--accent-gold);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.main-navigation li {
  position: relative;
}

.main-navigation li a {
  display: block;
  padding: 14px 18px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item > a {
  background-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: var(--accent-gold);
  color: #FFFFFF;
}

/* Submenu dropdown */
.main-navigation ul ul {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #FFFFFF;
  min-width: 220px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border: 1px solid var(--border-light);
  display: none;
  flex-direction: column;
  z-index: 110;
}

.main-navigation ul li:hover > ul {
  display: flex;
}

.main-navigation ul ul li a {
  color: var(--text-main);
  padding: 11px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.main-navigation ul ul li a:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}

/* Mobile Hamburger Toggle */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 26px;
  cursor: pointer;
  padding: 10px;
}

@media (max-width: 860px) {
  .mobile-nav-toggle {
    display: block;
  }
  .main-navigation {
    display: none;
    width: 100%;
    padding: 10px 0;
  }
  .main-navigation.is-active {
    display: block;
  }
  .main-navigation ul {
    flex-direction: column;
    align-items: stretch;
  }
  .main-navigation li a {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .main-navigation ul ul {
    position: static;
    background-color: rgba(0,0,0,0.15);
    box-shadow: none;
    border: none;
  }
  .main-navigation ul ul li a {
    color: #FFFFFF;
    padding-right: 32px;
  }
}

/* =========================================================================
   WORLD-CLASS BREATHTAKING HERO SECTION (HERO הכי מיוחד ומרשים שיש בעולם)
   ========================================================================= */
.breathtaking-hero {
  position: relative;
  min-height: 640px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  padding: 70px 0 90px;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 92, 58, 0.82) 0%, rgba(15, 23, 42, 0.88) 60%, rgba(15, 23, 42, 0.96) 100%);
  backdrop-filter: blur(1.5px);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-eyebrow .nz-flag {
  font-size: 20px;
}

.hero-title {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero-title .highlight {
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.hero-subtitle {
  font-size: 20px;
  line-height: 1.6;
  color: #E2E8F0;
  max-width: 820px;
  margin: 0 auto 36px;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* Tiuli-style Interactive Trail Finder Widget in Hero */
.hero-trail-finder {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-hero);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  color: var(--text-main);
  text-align: right;
  margin-bottom: 36px;
}

.finder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: flex-end;
}

@media (max-width: 992px) {
  .finder-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .finder-grid {
    grid-template-columns: 1fr;
  }
}

.finder-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 6px;
}

.finder-select, .finder-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-light);
  background-color: #FFFFFF;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text-main);
  transition: all 0.2s ease;
}

.finder-select:focus, .finder-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 92, 58, 0.15);
}

.finder-submit-btn {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(13, 92, 58, 0.35);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.finder-submit-btn:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 92, 58, 0.45);
}

/* Hero Quick Stats Ribbon (Tiuli Numbers) */
.hero-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
}

.stat-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.stat-info .stat-number {
  font-size: 20px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.1;
  font-family: var(--font-heading);
}

.stat-info .stat-label {
  font-size: 13px;
  color: #CBD5E1;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 34px;
  }
  .hero-subtitle {
    font-size: 16.5px;
  }
  .breathtaking-hero {
    min-height: auto;
    padding: 50px 0 60px;
  }
}

/* =========================================================================
   TOP FEATURED REAL POST (LATEST HERO STORY)
   ========================================================================= */
.top-featured-section {
  padding: 50px 0 30px;
}

.section-head-tiuli {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-title-wrap h2 {
  font-size: 30px;
  font-weight: 900;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-subtitle-tag {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 4px;
}

.featured-story-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  transition: all 0.3s ease;
}

.featured-story-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-color: #CBD5E1;
}

@media (max-width: 900px) {
  .featured-story-card {
    grid-template-columns: 1fr;
  }
}

.featured-img-wrap {
  position: relative;
  overflow: hidden;
  min-height: 380px;
}

.featured-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.featured-story-card:hover .featured-img-wrap img {
  transform: scale(1.04);
}

.featured-badge-float {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 6px;
}

.featured-content-wrap {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trail-meta-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.meta-pill {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background-color: #F1F5F9;
  color: var(--text-muted);
}

.meta-pill.difficulty {
  background-color: #FEF3C7;
  color: #B45309;
}

.meta-pill.region {
  background-color: var(--primary-light);
  color: var(--primary);
}

.featured-content-wrap h3 {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 16px;
  line-height: 1.25;
}

.featured-content-wrap h3 a:hover {
  color: var(--primary);
}

.featured-content-wrap p {
  font-size: 16px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 24px;
}

.read-trail-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--primary);
  color: #FFFFFF;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(13, 92, 58, 0.25);
}

.read-trail-btn:hover {
  background-color: var(--primary-hover);
  transform: translateX(-4px);
  color: #FFFFFF;
}

/* =========================================================================
   DYNAMIC REAL CATEGORIES SECTIONS (DISPLAY ONLY REAL CATEGORIES ON SITE)
   ========================================================================= */
.dynamic-category-block {
  padding: 40px 0;
}

.category-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 14px;
  margin-bottom: 28px;
  gap: 16px;
}

.category-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-icon-box {
  width: 40px;
  height: 40px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.category-header-title h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-title);
}

.category-count-badge {
  font-size: 12px;
  background-color: #E2E8F0;
  color: var(--text-muted);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.category-view-all {
  color: var(--primary);
  font-weight: 700;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-view-all:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* Tiuli Style Trail Cards Grid */
.tiuli-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 992px) {
  .tiuli-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tiuli-cards-grid {
    grid-template-columns: 1fr;
  }
}

.trail-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.trail-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: #CBD5E1;
}

.trail-card-thumb {
  position: relative;
  height: 220px;
  overflow: hidden;
  background-color: #E2E8F0;
}

.trail-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.trail-card:hover .trail-card-thumb img {
  transform: scale(1.05);
}

.trail-diff-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  background-color: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
}

.trail-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.trail-card-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.trail-card-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trail-card-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 12px;
}

.trail-card-title a:hover {
  color: var(--primary);
}

.trail-card-excerpt {
  font-size: 14.5px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}

.trail-card-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trail-region-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
}

.trail-link-arrow {
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trail-card:hover .trail-link-arrow {
  color: var(--secondary);
  transform: translateX(-4px);
}

/* Fallback Empty Category Notice */
.empty-category-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-light);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  grid-column: 1 / -1;
}

.empty-category-card p {
  font-size: 16px;
  margin-bottom: 12px;
}

/* =========================================================================
   TIULI PRACTICAL CAMPERVAN & HIKER GUIDE SECTION
   ========================================================================= */
.practical-guide-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.practical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}

@media (max-width: 992px) {
  .practical-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .practical-grid {
    grid-template-columns: 1fr;
  }
}

.guide-box {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 28px 24px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.guide-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

.guide-box-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}

.guide-box h4 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-title);
}

.guide-box p {
  font-size: 14.5px;
  color: #475569;
  line-height: 1.6;
}

/* =========================================================================
   CONTACT FORM SECTION (BACKEND PHP wp_mail, NO EMAIL DISPLAY, PRIVACY CHECKBOX)
   ========================================================================= */
.contact-section-wrap {
  padding: 70px 0;
  background-color: #FFFFFF;
}

.contact-card-tiuli {
  max-width: 820px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-card);
}

@media (max-width: 600px) {
  .contact-card-tiuli {
    padding: 24px;
  }
}

.contact-card-header {
  text-align: center;
  margin-bottom: 32px;
}

.contact-card-header h2 {
  font-size: 32px;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 10px;
}

.contact-card-header p {
  font-size: 16px;
  color: var(--text-muted);
}

.tiuli-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .tiuli-form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-group label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-title);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  background-color: #F8FAFC;
  color: var(--text-main);
  transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(13, 92, 58, 0.15);
}

/* Privacy Consent Checkbox */
.privacy-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 0 24px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.privacy-checkbox-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  margin-top: 3px;
  cursor: pointer;
}

.privacy-checkbox-wrap label {
  cursor: pointer;
}

.privacy-checkbox-wrap a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 700;
}

.contact-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #FFFFFF;
  border: none;
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-heading);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(13, 92, 58, 0.3);
  transition: all 0.25s ease;
}

.contact-submit-btn:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 92, 58, 0.4);
}

.form-status-alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  display: none;
  font-weight: 600;
  font-size: 14.5px;
}

.form-status-alert.success {
  display: block;
  background-color: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}

.form-status-alert.error {
  display: block;
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* =========================================================================
   SINGLE POST LAYOUT & MANDATORY RULES
   - NO PUBLISH DATES ANYWHERE!
   - BLUE UNDERLINED CONTENT LINKS
   - RECENT POSTS SIDEBAR (NO DATES)
   ========================================================================= */
.single-post-wrapper {
  padding: 50px 0 70px;
}

.single-grid {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: 36px;
  align-items: flex-start;
}

@media (max-width: 992px) {
  .single-grid {
    grid-template-columns: 1fr;
  }
}

.post-main-content {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

@media (max-width: 600px) {
  .post-main-content {
    padding: 24px;
  }
}

.single-header {
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 20px;
}

.single-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.single-post-title {
  font-size: 38px;
  font-weight: 900;
  color: var(--text-title);
  line-height: 1.25;
  margin-bottom: 18px;
}

.single-hero-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.single-hero-image img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}

/* MANDATORY RULE: ALL LINKS IN POST BODY MUST BE BLUE AND UNDERLINED */
.entry-content {
  font-size: 17px;
  line-height: 1.8;
  color: #334155;
}

.entry-content a {
  color: #0066cc !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
  transition: color 0.2s ease;
}

.entry-content a:hover {
  color: #004499 !important;
}

.entry-content p {
  margin-bottom: 22px;
}

.entry-content h2, .entry-content h3, .entry-content h4 {
  margin: 32px 0 16px;
  color: var(--primary);
}

.entry-content ul, .entry-content ol {
  margin: 0 24px 24px 0;
  line-height: 1.8;
}

.entry-content blockquote {
  background: var(--primary-light);
  border-right: 4px solid var(--primary);
  padding: 18px 24px;
  border-radius: var(--radius-sm);
  margin: 26px 0;
  font-style: italic;
  color: var(--primary-hover);
}

/* Sidebar for Single & Archives (NO DATES) */
.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sidebar-widget {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.widget-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-title);
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 12px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.recent-posts-list-sidebar {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recent-post-sidebar-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.recent-post-sidebar-thumb {
  width: 72px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: #E2E8F0;
}

.recent-post-sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-post-sidebar-info h4 {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.recent-post-sidebar-info h4 a:hover {
  color: var(--primary);
}

/* Categories List Widget */
.widget-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.widget-cat-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background-color: #F8FAFC;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.widget-cat-list li a:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}

/* =========================================================================
   FOOTER (EXACTLY 3 UPPER COLUMNS + MANDATORY UPDATED LINKS + POWER CREDIT)
   ========================================================================= */
.site-footer {
  background: #09261A;
  color: #E2E8F0;
  padding-top: 60px;
  border-top: 4px solid var(--accent-gold);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
}

.footer-col h3, .footer-col h4 {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col h3::after, .footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44px;
  height: 3px;
  background-color: var(--accent-gold);
  border-radius: 2px;
}

.footer-about-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #CBD5E1;
  margin-bottom: 20px;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list li a {
  color: #CBD5E1;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.footer-links-list li a::before {
  content: '←';
  color: var(--accent-gold);
  font-size: 13px;
  transition: transform 0.2s ease;
}

.footer-links-list li a:hover {
  color: #FFFFFF;
  padding-right: 6px;
}

.footer-links-list li a:hover::before {
  transform: translateX(-4px);
}

/* =========================================================================
   HIGH-POWER AGENCY CREDIT & CLIENT ACQUISITION SECTION
   ========================================================================= */
.footer-credit-seo-bar {
  background: #061B12;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0;
}

.credit-box-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.credit-seo-text {
  font-size: 14px;
  color: #94A3B8;
  line-height: 1.6;
}

.credit-seo-text a.credit-main-link {
  color: #38BDF8;
  font-weight: 800;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.credit-seo-text a.credit-main-link:hover {
  color: #7DD3FC;
}

.credit-cta-btn {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.credit-cta-btn:hover {
  background: linear-gradient(135deg, #0369A1 0%, #075985 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.45);
}

/* Bottom Bar with 3 Legal Links */
.footer-bottom-bar {
  background-color: #04120C;
  padding: 16px 0;
  font-size: 13.5px;
  color: #64748B;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-legal-links a {
  color: #94A3B8;
  font-size: 13px;
}

.footer-legal-links a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* =========================================================================
   WCAG ACCESSIBILITY TOOLBAR
   ========================================================================= */
.acc-floating-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
}

.acc-floating-btn:hover {
  transform: scale(1.08);
}

.acc-drawer {
  position: fixed;
  bottom: 86px;
  left: 24px;
  width: 320px;
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  padding: 22px;
  z-index: 10000;
  display: none;
}

.acc-drawer.is-open {
  display: block;
  animation: slideUpAcc 0.25s ease;
}

@keyframes slideUpAcc {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
}

.acc-header h3 {
  font-size: 17px;
  color: var(--primary);
}

.acc-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
}

.acc-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.acc-btn {
  background-color: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.acc-btn:hover, .acc-btn.active {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* Accessibility classes */
body.acc-font-lg { font-size: 18px !important; }
body.acc-font-xl { font-size: 20px !important; }
body.acc-high-contrast {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}
body.acc-high-contrast * {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  border-color: #FFFF00 !important;
}
body.acc-grayscale {
  filter: grayscale(100%) !important;
}
body.acc-invert {
  filter: invert(100%) hue-rotate(180deg) !important;
}
body.acc-readable-font * {
  font-family: Arial, sans-serif !important;
}
body.acc-highlight-links a {
  outline: 2px dashed #D97706 !important;
  background-color: #FEF3C7 !important;
  color: #92400E !important;
}