/*
Theme Name: iHikeFar
Theme URI: https://ihikefar.com
Author: iHikeFar Team
Author URI: https://ihikefar.com
Description: A professional hiking blog theme styled like top outdoor media sites. Features article grid, gear review tables, trail guides, buyer's guides sidebar, and full SEO optimization. Perfect for hiking blogs, outdoor gear review sites, and trail guide portals.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ihikefar
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, translation-ready, outdoor, hiking, gear-reviews
*/

/* ─── CSS CUSTOM PROPERTIES ─────────────────────────────────────────────────── */
:root {
  --page-bg:      #4AB3CE;
  --header-bg:    #253040;
  --white:        #FFFFFF;
  --sidebar-header: #2B3A4C;
  --accent:       #3FAFC8;
  --accent-hover: #2B8CA8;
  --text:         #2C2C2C;
  --text-muted:   #666;
  --text-light:   #888;
  --border:       #E5E5E5;
  --footer-bg:    #253040;
  --light-bg:     #F7F7F7;
}

/* ─── RESET & BASE ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--page-bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-size: 16px; line-height: 1.7; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; }

/* ─── LAYOUT ─────────────────────────────────────────────────────────────────── */
.site-wrapper { max-width: 1180px; margin: auto; background: white; min-height: 100vh; }
.content-area { display: flex; flex-direction: row; gap: 30px; padding: 0 30px; }
.main-content { flex: 1; min-width: 0; }
.sidebar { width: 300px; flex-shrink: 0; }
.container { max-width: 1180px; margin: auto; padding: 0 30px; }

/* ─── HEADER ─────────────────────────────────────────────────────────────────── */
#masthead {
  position: sticky; top: 0; z-index: 9999;
  background: var(--header-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.header-inner { max-width: 1180px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; height: 58px; gap: 20px; }
.site-branding { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-icon { width: 36px; height: 36px; background: var(--accent); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.site-title { color: #fff; font-size: 22px; font-weight: 900; letter-spacing: 3px; }
.site-title span { color: var(--accent); }
.site-tagline { color: var(--accent); font-size: 9px; letter-spacing: 2px; display: block; margin-top: -4px; }
.primary-nav { flex: 1; }
.nav-menu { display: flex; list-style: none; gap: 2px; }
.nav-menu > li > a { color: rgba(255,255,255,.88); font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 4px; display: flex; align-items: center; gap: 3px; transition: color .2s, background .2s; }
.nav-menu > li > a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-menu > li > a .arrow { font-size: 9px; opacity: .7; }
/* Dropdown */
.nav-menu > li { position: relative; }
.nav-menu > li:hover > .sub-menu { display: block; }
.sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--header-bg); border-top: 2px solid var(--accent); list-style: none; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.sub-menu li a { display: block; padding: 10px 16px; color: rgba(255,255,255,.8); font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sub-menu li a:hover { color: var(--accent); }
.header-search button { background: transparent; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 16px; padding: 8px; }
.header-search button:hover { color: var(--accent); }
/* Hamburger */
.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* ─── HERO SLIDER ────────────────────────────────────────────────────────────── */
.hero-slider { position: relative; height: 460px; overflow: hidden; }
.hero-slide { position: relative; height: 100%; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg-mountain {
  width: 100%; height: 100%;
  background: linear-gradient(180deg,
    #B8D4E8 0%, #87B8D4 28%,
    #5A8F6A 28%, #3D6B4A 50%,
    #7A6248 50%, #5C4832 72%,
    #4A3C28 72%, #3A2E1E 100%);
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(0,0,0,.75) 100%); }
.hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px; }
.hero-category { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; margin-bottom: 12px; }
.hero-title { color: #fff; font-size: clamp(22px, 3vw, 34px); font-weight: 800; line-height: 1.25; margin-bottom: 10px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hero-title a { color: #fff; }
.hero-meta { color: rgba(255,255,255,.8); font-size: 14px; }
.hero-meta strong { color: #fff; }
.hero-dots { display: flex; gap: 8px; margin-top: 16px; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; border: none; transition: background .2s; }
.hero-dot.active { background: var(--accent); }
.hero-arrows { position: absolute; bottom: 40px; right: 40px; display: flex; gap: 8px; }
.hero-arrow { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.hero-arrow:hover { background: rgba(255,255,255,.35); }

/* ─── ARTICLES BAR ───────────────────────────────────────────────────────────── */
.articles-bar { background: var(--header-bg); display: flex; align-items: center; justify-content: space-between; padding: 14px 30px; }
.articles-bar-title { color: #fff; font-size: 17px; font-weight: 700; }
.btn-more-articles { background: var(--accent); color: #fff; padding: 8px 18px; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; }
.btn-more-articles:hover { background: var(--accent-hover); color: #fff; }

/* ─── ARTICLE GRID ───────────────────────────────────────────────────────────── */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 0; }
.article-card { border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.card-img { height: 185px; overflow: hidden; margin-bottom: 12px; }
.card-img-inner { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card-img-inner img { width: 100%; height: 100%; object-fit: cover; }
.card-img a { display: block; height: 100%; }
.card-img a:hover .card-img-inner { transform: scale(1.03); }
/* CSS gradient image fallbacks */
.img-trail-snow { background: linear-gradient(180deg,#B0C8D8 0%,#D8E8F0 30%,#A0B4BF 30%,#788E96 60%,#5A6E7A 60%,#8B7355 100%); }
.img-forest     { background: linear-gradient(180deg,#87CEEB 0%,#5BA3C9 25%,#3D7A4A 25%,#2D5A34 55%,#4A7C3A 55%,#3A6228 100%); }
.img-peak       { background: linear-gradient(180deg,#7BA7C4 0%,#A8C8DC 20%,#C8D8E8 35%,#8FA8B8 35%,#6B8898 60%,#4A6070 60%,#3A4A58 100%); }
.img-canyon     { background: linear-gradient(180deg,#D4936A 0%,#E8A878 20%,#C87840 20%,#A85E28 50%,#8B4A18 50%,#6B3408 100%); }
.img-trail      { background: linear-gradient(180deg,#87B8D4 0%,#5A9CBF 25%,#4A7840 25%,#3A6030 50%,#7A6248 50%,#5C4832 100%); }
.img-meadow     { background: linear-gradient(180deg,#A8D4E8 0%,#78B4D0 25%,#8AC86A 25%,#5A9A40 50%,#3A7A28 50%,#2A5A18 100%); }
.img-sunrise    { background: linear-gradient(180deg,#F0B878 0%,#E88830 25%,#C86820 40%,#6B9B6A 40%,#4A7A48 65%,#2A4A28 100%); }
.img-lake       { background: linear-gradient(180deg,#7898C4 0%,#5878A8 25%,#4868A8 35%,#78A8C8 35%,#5898C0 60%,#3870A0 100%); }
.img-desert     { background: linear-gradient(180deg,#E8D090 0%,#C8A850 25%,#A87828 25%,#D4A040 50%,#B07828 50%,#8A5818 100%); }
.card-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.card-meta .author { font-weight: 700; color: var(--text); }
.card-divider { border: none; border-top: 3px solid var(--accent); width: 42px; margin: 8px 0; }
.card-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; color: var(--text); }
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--accent); }
.card-excerpt { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* ─── SIDEBAR ────────────────────────────────────────────────────────────────── */
.sidebar { padding-top: 24px; }
.widget { margin-bottom: 28px; }
.widget-follow { padding: 16px; border: 1px solid var(--border); }
.widget-follow h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.social-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.social-icon { width: 38px; height: 38px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; }
.social-icon:hover { background: var(--accent-hover); color: #fff; }
.widget-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.widget-box { border: 1px solid var(--border); overflow: hidden; }
.widget-box-header { background: var(--sidebar-header); color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.widget-box-header h3 { font-size: 15px; font-weight: 700; }
.widget-box-header .chevron { color: rgba(255,255,255,.7); font-size: 13px; }
.widget-box-list { list-style: none; }
.widget-box-list li { border-bottom: 1px solid var(--border); }
.widget-box-list li:last-child { border-bottom: none; }
.widget-box-list li a { display: block; padding: 10px 16px; font-size: 14px; color: var(--text); transition: color .15s, background .15s; }
.widget-box-list li a:hover { color: var(--accent); background: var(--light-bg); }
.widget-patron { padding: 16px; text-align: center; border: 1px solid var(--border); }
.widget-patron h3 { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.btn-patron { display: inline-flex; align-items: center; gap: 8px; background: #E85D3F; color: #fff; padding: 12px 20px; border-radius: 4px; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.btn-patron:hover { background: #c94a2e; color: #fff; }

/* ─── SEO PILLAR CONTENT SECTION ─────────────────────────────────────────────── */
.seo-section { background: var(--light-bg); padding: 60px 30px; border-top: 3px solid var(--accent); }
.seo-inner { max-width: 1120px; margin: 0 auto; }
.date-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(63,175,200,.1); border: 1px solid rgba(63,175,200,.3); color: var(--text-muted); font-size: 12px; padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; }
.seo-section h1 { font-size: clamp(26px, 4vw, 42px); font-weight: 900; color: var(--text); margin-bottom: 12px; line-height: 1.2; }
.seo-intro { font-size: 17px; color: var(--text-muted); margin-bottom: 36px; line-height: 1.8; max-width: 800px; }
.seo-section h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 800; color: var(--text); margin: 40px 0 16px; padding-left: 16px; border-left: 5px solid var(--accent); line-height: 1.3; }
.seo-section h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 28px 0 12px; }
.seo-section p { margin-bottom: 18px; color: var(--text-muted); line-height: 1.85; }

/* ─── CSS LANDSCAPE (image mock) ─────────────────────────────────────────────── */
.img-mock-wrap { margin: 36px 0; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.trail-scene { height: 340px; position: relative; overflow: hidden; background: linear-gradient(180deg, #B8D4E8 0%, #8BC0D8 28%, #5A8F6A 28%, #3D6B4A 50%, #7A6248 50%, #5C4832 70%, #4A3C28 70%, #3A2E1E 100%); }
.trail-scene::before { content: ''; position: absolute; left: 5%; top: 10%; width: 0; height: 0; border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 180px solid #8FA8B8; }
.trail-scene::after { content: ''; position: absolute; right: 8%; top: 5%; width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 220px solid #A8BFCC; }
.mountain-snow-l { position: absolute; left: 5%; top: 10%; width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid rgba(255,255,255,.7); }
.mountain-snow-r { position: absolute; right: 8%; top: 5%; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,.7); }
.mountain-center { position: absolute; left: 50%; transform: translateX(-50%); top: 2%; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 280px solid #7A9AB0; }
.mountain-center-snow { position: absolute; left: 50%; transform: translateX(-50%); top: 2%; width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 70px solid rgba(255,255,255,.75); }
.trail-path { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); width: 30px; height: 180px; background: #8B7355; clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%); opacity: .8; }
.hiker { position: absolute; bottom: 30%; left: 52%; }
.hiker-body { width: 8px; height: 18px; background: #1a1a1a; border-radius: 2px; }
.hiker-head { width: 10px; height: 10px; background: #2C2C2C; border-radius: 50%; margin: -5px 0 0 -1px; }
.img-caption { background: rgba(0,0,0,.55); color: rgba(255,255,255,.9); padding: 12px 20px; font-size: 14px; font-style: italic; }

/* ─── RATING TABLE ───────────────────────────────────────────────────────────── */
.rating-section { margin: 40px 0; }
.rating-section h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; color: var(--text); }
.rating-table-wrap { overflow-x: auto; }
.rating-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rating-table thead tr { background: var(--header-bg); color: #fff; }
.rating-table thead th { padding: 13px 14px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.rating-table tbody tr:nth-child(even) { background: var(--light-bg); }
.rating-table tbody tr:hover { background: rgba(63,175,200,.06); }
.rating-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rating-table tbody td:first-child { font-weight: 700; width: 30px; color: var(--text-muted); }
.boot-name { font-weight: 700; color: var(--text); }
.badge-best  { background: #2D7D46; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.badge-great { background: var(--accent); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.badge-good  { background: #888;        color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.stars-5 { color: #2D7D46; font-weight: 700; }
.stars-4 { color: var(--accent); font-weight: 700; }
.stars-3 { color: #888; font-weight: 700; }
.wp-yes { color: #2D7D46; font-weight: 700; }
.wp-no  { color: #CC3333; }

/* ─── FAQ ────────────────────────────────────────────────────────────────────── */
.faq-section { margin: 40px 0; }
.faq-section h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
.faq-item { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.faq-item summary { padding: 16px 20px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #fff; color: var(--text); font-size: 15px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--accent); transition: transform .2s; font-weight: 300; flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { color: var(--accent); border-bottom: 1px solid var(--border); }
.faq-body { padding: 16px 20px; font-size: 15px; color: var(--text-muted); line-height: 1.8; }

/* ─── GEO BLOCK ──────────────────────────────────────────────────────────────── */
.geo-block { background: rgba(63,175,200,.07); border-left: 5px solid var(--accent); border-radius: 0 8px 8px 0; padding: 24px 28px; margin: 36px 0; }
.geo-block h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--text); }
.geo-block p { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.8; }
.geo-block p:last-child { margin-bottom: 0; }

/* ─── SPEED GRID ─────────────────────────────────────────────────────────────── */
.speed-section { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 28px; margin: 36px 0; }
.speed-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.speed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.speed-box { text-align: center; padding: 20px 12px; border: 1px solid var(--border); border-radius: 8px; }
.speed-score { font-size: 36px; font-weight: 900; line-height: 1; margin-bottom: 8px; }
.speed-score.green { color: #2D7D46; }
.speed-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.speed-checks { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.speed-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); }
.speed-checks li::before { content: '\2713'; color: #2D7D46; font-weight: 700; flex-shrink: 0; }

/* ─── SINGLE POST ────────────────────────────────────────────────────────────── */
.single-post-header { padding: 48px 30px 32px; border-bottom: 1px solid var(--border); }
.post-category { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; margin-bottom: 16px; }
.post-title { font-size: clamp(24px, 4vw, 42px); font-weight: 900; line-height: 1.2; margin-bottom: 16px; }
.post-meta { color: var(--text-muted); font-size: 14px; }
.post-meta a { color: var(--accent); }
.post-divider { width: 50px; height: 3px; background: var(--accent); margin: 20px 0; }
.post-featured-img { margin-bottom: 32px; }
.post-featured-img img { width: 100%; border-radius: 6px; }
.post-content { font-size: 17px; line-height: 1.85; color: var(--text); }
.post-content h2 { font-size: 26px; font-weight: 800; margin: 36px 0 16px; padding-left: 16px; border-left: 5px solid var(--accent); }
.post-content h3 { font-size: 21px; font-weight: 700; margin: 28px 0 12px; color: var(--text); }
.post-content p { margin-bottom: 20px; }
.post-content ul, .post-content ol { margin: 0 0 20px 24px; }
.post-content li { margin-bottom: 8px; }
.post-content blockquote { border-left: 4px solid var(--accent); padding: 16px 24px; margin: 28px 0; background: var(--light-bg); font-style: italic; font-size: 18px; }
.post-content img { border-radius: 6px; margin: 20px 0; }
.post-tags { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.post-tags a { display: inline-block; background: var(--light-bg); color: var(--text-muted); font-size: 12px; padding: 4px 12px; border-radius: 20px; margin: 4px 4px 4px 0; border: 1px solid var(--border); }
.post-tags a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─── COMMENTS ───────────────────────────────────────────────────────────────── */
.comments-area { padding: 40px 30px; border-top: 1px solid var(--border); }
.comments-title { font-size: 22px; font-weight: 800; margin-bottom: 24px; }
.comment-list { list-style: none; }
.comment { padding: 20px 0; border-bottom: 1px solid var(--border); }
.comment-author { font-weight: 700; margin-bottom: 6px; }
.comment-date { font-size: 12px; color: var(--text-light); }
.comment-content { margin-top: 10px; font-size: 15px; color: var(--text-muted); }
.comment-form-wrap { margin-top: 36px; }
.comment-form-wrap h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; font-family: inherit; color: var(--text); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); }
.btn-submit { background: var(--accent); color: #fff; border: none; padding: 12px 28px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-submit:hover { background: var(--accent-hover); }

/* ─── FOOTER ─────────────────────────────────────────────────────────────────── */
#colophon { background: var(--footer-bg); color: rgba(255,255,255,.7); padding: 48px 30px 28px; }
.footer-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.footer-logo { display: inline-flex; flex-direction: column; align-items: center; margin-bottom: 24px; text-decoration: none; }
.footer-logo-icon { width: 32px; height: 32px; background: var(--accent); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); margin-bottom: 8px; }
.footer-logo-text { color: #fff; font-size: 20px; font-weight: 900; letter-spacing: 3px; }
.footer-logo-text span { color: var(--accent); }
.footer-tagline { color: var(--accent); font-size: 9px; letter-spacing: 2px; display: block; margin-top: -4px; }
.footer-social { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
.footer-social a { color: rgba(255,255,255,.6); font-size: 18px; transition: color .2s; }
.footer-social a:hover { color: var(--accent); }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 16px 0; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-bottom: 16px; }
.footer-nav a { color: rgba(255,255,255,.6); font-size: 13px; padding: 4px 10px; }
.footer-nav a:hover { color: var(--accent); }
.footer-nav .sep { color: rgba(255,255,255,.25); align-self: center; }
.footer-credit { font-size: 13px; color: rgba(255,255,255,.45); }
.footer-credit a { color: var(--accent); }

/* ─── ARCHIVE / CATEGORY ─────────────────────────────────────────────────────── */
.archive-header { padding: 40px 30px 28px; border-bottom: 3px solid var(--accent); background: var(--light-bg); }
.archive-title { font-size: 32px; font-weight: 900; }
.archive-desc { color: var(--text-muted); margin-top: 8px; }
.pagination { display: flex; gap: 8px; justify-content: center; padding: 32px 0; }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; color: var(--text); }
.pagination a:hover, .pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── 404 / SEARCH ───────────────────────────────────────────────────────────── */
.error-page, .no-results { padding: 80px 30px; text-align: center; }
.error-page h1 { font-size: 96px; font-weight: 900; color: var(--accent); line-height: 1; }
.error-page h2, .no-results h2 { font-size: 28px; font-weight: 700; margin: 16px 0; }
.error-page p, .no-results p { color: var(--text-muted); max-width: 500px; margin: 0 auto 24px; }
.search-form-large { max-width: 500px; margin: 0 auto; display: flex; gap: 10px; }
.search-form-large input { flex: 1; padding: 12px 16px; border: 2px solid var(--border); border-radius: 6px; font-size: 16px; }
.search-form-large input:focus { outline: none; border-color: var(--accent); }
.search-form-large button { background: var(--accent); color: #fff; border: none; padding: 12px 20px; border-radius: 6px; font-size: 16px; cursor: pointer; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { width: 260px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .primary-nav, .header-search { display: none; }
  .menu-toggle { display: flex; }
  .primary-nav.open { display: block; position: absolute; top: 58px; left: 0; right: 0; background: var(--header-bg); padding: 12px 0; }
  .primary-nav.open .nav-menu { flex-direction: column; }
  .primary-nav.open .nav-menu > li > a { padding: 12px 20px; border-radius: 0; }
  .content-area { flex-direction: column; }
  .sidebar { width: 100%; }
  .article-grid { grid-template-columns: 1fr; }
  .speed-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-slider { height: 320px; }
  .hero-content { padding: 20px; }
  .hero-arrows { display: none; }
  .seo-section, .content-area, .articles-bar { padding-left: 16px; padding-right: 16px; }
  .footer-nav { gap: 0; }
}
@media (max-width: 480px) {
  .speed-grid { grid-template-columns: repeat(2, 1fr); }
  .article-grid { grid-template-columns: 1fr; }
  .header-inner { padding: 0 16px; }
}

/* ─── WORDPRESS CORE ELEMENT OVERRIDES ──────────────────────────────────────── */
/* Alignments */
.alignleft  { float: left;  margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }
/* Captions */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--text-muted); font-style: italic; text-align: center; margin-top: 6px; }
/* Galleries */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; }
/* Screen reader */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* ─── iHIKEFAR ARTICLE COMPONENTS (added 2026-08-01) ───────────────────────── */
.post-content .ihf-standfirst{font-size:1.15rem;line-height:1.6;color:#2C2C2C;border-left:4px solid var(--accent,#3FAFC8);padding:.2rem 0 .2rem 1rem;margin:0 0 1.4rem}
.post-content .ihf-meta-line{font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:#888;border-bottom:1px solid #E5E5E5;padding-bottom:.9rem;margin-bottom:1.6rem}
.post-content .ihf-figure{margin:0 0 1.8rem}
.post-content .ihf-img-ph{position:relative;display:flex;align-items:flex-end;width:100%;aspect-ratio:16/9;border-radius:6px;background:linear-gradient(180deg,#9ED8E6 0%,#5FB8CE 42%,#3E7F5E 43%,#2E5F46 100%);overflow:hidden}
.post-content .ihf-img-ph:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.35),transparent 55%)}
.post-content .ihf-img-ph span{position:relative;z-index:2;display:block;width:100%;padding:.7rem 1rem;font-size:.8rem;color:#fff;background:rgba(20,32,45,.55)}
.post-content .ihf-figure figcaption{font-size:.85rem;color:#777;padding-top:.5rem;font-style:italic}
.post-content .ihf-toc{background:#F5F8FA;border:1px solid #E1E8ED;border-radius:6px;padding:1.1rem 1.4rem;margin:0 0 1.8rem}
.post-content .ihf-toc-title{font-size:.85rem!important;text-transform:uppercase;letter-spacing:.06em;color:#2B3A4C;margin:0 0 .6rem!important;border:0!important;padding:0!important}
.post-content .ihf-toc ol{margin:0;padding-left:1.2rem}
.post-content .ihf-toc li{margin:.25rem 0;color:#39505F;font-size:.95rem}
.post-content .ihf-table-wrap{margin:2rem 0;overflow-x:auto}
.post-content table.ihf-rating-table{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff;border:1px solid #E1E8ED}
.post-content table.ihf-rating-table thead th{background:var(--sidebar-header,#2B3A4C);color:#fff;text-align:left;padding:.7rem .8rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.post-content table.ihf-rating-table td{padding:.7rem .8rem;border-top:1px solid #EDF1F4;vertical-align:top}
.post-content table.ihf-rating-table tbody tr:nth-child(even){background:#F7FAFB}
.post-content .ihf-stars{color:#F0A202;letter-spacing:1px}
.post-content .ihf-score{font-weight:700;color:#2B3A4C;white-space:nowrap}
.post-content .ihf-table-note{font-size:.85rem;color:#777;margin-top:.6rem;font-style:italic}
.post-content .ihf-geo{background:#F2F8F4;border:1px solid #D8E8DE;border-left:5px solid #3E7F5E;border-radius:6px;padding:1.3rem 1.5rem;margin:2rem 0}
.post-content .ihf-geo h2{margin-top:0!important}
.post-content .ihf-geo-list{list-style:none;margin:1rem 0 0;padding:0}
.post-content .ihf-geo-list li{padding:.55rem 0 .55rem 1.5rem;border-top:1px solid #DCEADF;position:relative}
.post-content .ihf-geo-list li:before{content:"\25B2";position:absolute;left:0;top:.6rem;color:#3E7F5E;font-size:.7rem}
.post-content .ihf-geo-note{font-size:.88rem;color:#4A6155;margin-top:.9rem}
.post-content .ihf-faq{margin:2.2rem 0 1rem;border-top:3px solid var(--sidebar-header,#2B3A4C);padding-top:1.2rem}
.post-content .ihf-faq-item{border-bottom:1px solid #E9EEF1;padding:.9rem 0}
.post-content .ihf-faq-item h3{margin:0 0 .45rem!important;font-size:1.05rem!important;color:#20303F}
.post-content .ihf-faq-item p{margin:0;color:#40505C}
.post-content .ihf-box{background:#FFF8E8;border:1px solid #F0DFB4;border-radius:6px;padding:1rem 1.2rem;margin:1.5rem 0}
.post-content .ihf-quote{border-left:4px solid var(--accent,#3FAFC8);background:#F5FAFC;margin:1.6rem 0;padding:1rem 1.3rem;font-size:1.08rem;color:#2B3A4C}
@media(max-width:640px){
.post-content table.ihf-rating-table thead{display:none}
.post-content table.ihf-rating-table,.post-content table.ihf-rating-table tbody,.post-content table.ihf-rating-table tr,.post-content table.ihf-rating-table td{display:block;width:100%}
.post-content table.ihf-rating-table tr{border-bottom:2px solid #E1E8ED;padding:.4rem 0}
.post-content table.ihf-rating-table td{border:0;padding:.3rem .6rem}
.post-content table.ihf-rating-table td:before{content:attr(data-label) ": ";font-weight:700;color:#2B3A4C;font-size:.78rem;text-transform:uppercase}
}

/* === IHF LAYOUT FIX === */
/* --- Article grid: square thumbnails, always-visible titles --- */
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px;padding:26px 0;align-items:stretch}
.article-card{display:flex;flex-direction:column;border-bottom:1px solid var(--border);padding:0 0 22px;min-width:0;overflow:hidden}
.article-card > *{min-width:0}
a.card-img,.card-img{display:block;position:relative;width:100%;aspect-ratio:1/1;height:auto;overflow:hidden;border-radius:6px;background:#E9EDF0;margin:0 0 14px}
.card-img-inner{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card-img-inner img{width:100%;height:100%;object-fit:cover;display:block}
a.card-img:hover .card-img-inner{transform:scale(1.04)}
.card-category{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 9px;border-radius:3px;margin:0 0 9px;line-height:1.4}
.card-category:hover{background:var(--accent-hover);color:#fff}
.card-title{font-size:18px;line-height:1.32;font-weight:800;margin:0 0 9px;display:block;overflow-wrap:break-word;hyphens:none}
.card-title a{color:var(--text);display:block}
.card-title a:hover{color:var(--accent)}
.card-excerpt{font-size:14px;line-height:1.6;color:var(--text-muted);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:12.5px;color:var(--text-light);margin:auto 0 0;padding-top:10px;border-top:1px solid #F0F0F0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.card-meta .author{color:var(--text);font-weight:700}
.card-meta-sep{color:#CCC}
.card-divider{display:none}

/* --- Articles bar --- */
.articles-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--sidebar-header);padding:16px 22px;border-radius:6px;margin-top:26px}
.articles-bar-title{color:#fff;font-size:20px;font-weight:800;letter-spacing:.4px}
.btn-more-articles{flex-shrink:0}

/* --- Hero --- */
.hero-slider{height:auto;min-height:0;aspect-ratio:16/7;max-height:460px}
.hero-content{padding:26px 30px 34px}
.hero-title{font-size:clamp(22px,2.6vw,34px);line-height:1.22;margin:0 0 10px;overflow-wrap:break-word}

/* --- Sidebar --- */
.sidebar{width:300px;flex-shrink:0;min-width:0}
.sidebar .widget{margin-bottom:26px}
.sidebar img{height:auto}

/* --- Single post content --- */
.post-content{overflow-wrap:break-word}
.post-content table{width:100%;border-collapse:collapse;table-layout:auto}
.post-content th,.post-content td{word-break:normal;overflow-wrap:normal;hyphens:none}
.ihf-rating-table,.rating-table{font-size:13.5px}
.ihf-rating-table th,.ihf-rating-table td,.rating-table th,.rating-table td{padding:8px 7px;vertical-align:top;line-height:1.38}
.ihf-rating-table th,.rating-table th{font-size:11px;letter-spacing:.5px}
.ihf-rating-table td:first-child,.rating-table td:first-child{width:16%}
.ihf-rating-table td:nth-child(2),.rating-table td:nth-child(2){width:22%}
.ihf-rating-table td:nth-child(3),.rating-table td:nth-child(3){width:22%}
.ihf-rating-table td:nth-child(4),.rating-table td:nth-child(4),.ihf-rating-table td:nth-child(5),.rating-table td:nth-child(5){white-space:nowrap;width:11%}
.ihf-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8rem 0}
.post-featured-img{aspect-ratio:16/9;overflow:hidden;border-radius:6px}
.post-featured-img img{width:100%;height:100%;object-fit:cover}
.ihf-img-ph{aspect-ratio:16/9;height:auto!important;min-height:0!important;border-radius:6px}
.ihf-figure{margin:1.6rem 0}

/* --- Archive header --- */
.archive-header{padding:26px 0 6px}
.archive-title{font-size:30px;font-weight:900;line-height:1.2}

/* --- Responsive --- */
@media (max-width:1080px){
  .content-area{gap:24px;padding:0 22px}
  .sidebar{width:270px}
  .article-grid{gap:28px 20px}
}
@media (max-width:900px){
  .content-area{flex-direction:column;padding:0 20px}
  .sidebar{width:100%}
  .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-slider{aspect-ratio:16/9}
}
@media (max-width:560px){
  .article-grid{grid-template-columns:1fr;gap:26px}
  .articles-bar{padding:14px 16px}
  .articles-bar-title{font-size:17px}
  .hero-slider{aspect-ratio:4/3;max-height:340px}
  .hero-content{padding:18px 18px 26px}
  .card-title{font-size:17px}
}

/* --- Header responsive --- */
@media (max-width:768px){
  .header-inner{padding:0 14px;gap:10px}
  .site-branding{min-width:0;flex:1 1 auto;overflow:hidden}
  .logo-icon{width:28px;height:28px;flex-shrink:0}
  .site-title{font-size:17px;letter-spacing:1.6px;white-space:nowrap}
  .site-tagline{font-size:7.5px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .menu-toggle{margin-left:auto;flex-shrink:0}
  .seo-section,.content-area,.articles-bar{padding-left:16px;padding-right:16px}
}
@media (max-width:420px){
  .site-tagline{display:none}
  .site-title{font-size:16px;letter-spacing:1.2px}
}

/* --- Nav fit --- */
.nav-menu{flex-wrap:nowrap}
.nav-menu > li > a{white-space:nowrap}
@media (max-width:1100px) and (min-width:769px){
  .header-inner{gap:12px;padding:0 16px}
  .site-title{font-size:19px;letter-spacing:2px}
  .site-tagline{font-size:8px;letter-spacing:1.4px}
  .nav-menu{gap:2px}
  .nav-menu > li > a{padding:8px 9px;font-size:13.5px}
}