/*
Theme Name: Historias Casi Increíbles
Theme URI: https://historiascasiincreibles.com
Author: HCI Team
Author URI: https://historiascasiincreibles.com
Description: Tema independiente para Historias Casi Increíbles - Un sitio de historias reales de personas comunes que tomaron decisiones extraordinarias.
Version: 3.12.0
Text Domain: hci-stories
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready

HCi - Historias Casi Increíbles: No contamos cuentos. Rescatamos las historias reales que el tiempo estuvo a punto de olvidar.
*/

/* ═══════════ RESET ═══════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ═══════════ CSS VARIABLES ═══════════ */
:root {
  --hci-bg: #faf6f0;
  --hci-bg-white: #ffffff;
  --hci-bg-sidebar: #f5f0e8;
  --hci-gold: #c9a84c;
  --hci-gold-dim: #8b6914;
  --hci-gold-bright: #e0c068;
  --hci-brown-dark: #2d1810;
  --hci-brown-mid: #4a2c1a;
  --hci-brown-light: #6b5a4a;
  --hci-text: #2d1810;
  --hci-text-secondary: #6b5a4a;
  --hci-text-muted: #a08060;
  --hci-border: #e8ddd0;
  --hci-border-dark: #d4c4b0;
  --hci-radius: 8px;
  --hci-banner-image: url('assets/images/banner-es.png');
}

/* ═══════════ CUSTOM COLORS FOR WP BUTTONS ═══════════ */
.has-custom-gold-color {
  color: var(--hci-gold) !important;
}

/* ═══════════ BASE STYLES ═══════════ */
body {
  font-family: 'Source Sans 3', -apple-system, sans-serif !important;
  background: var(--hci-bg);
  color: var(--hci-text);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  color: var(--hci-text);
}

/* ═══════════ KILL WP BLOCK AUTO-PADDING ═══════════ */
.hci-layout,
.hci-hero,
.hci-single,
.hci-archive,
.hci-page,
.hci-index,
.hci-banner-section,
.hci-banner-profile,
.hci-nav {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.hci-hero-banner {
  padding: 40px !important;
}

.hci-sidebar-section,
.hci-guardian-card {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ═══════════ NAVIGATION ═══════════ */
.hci-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hci-border);
  transition: all 0.3s;
}

.hci-nav.scrolled {
  padding: 10px 40px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

.hci-nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hci-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.hci-nav-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}

.hci-nav-logo-text {
  color: var(--hci-text);
  font-size: 16px;
  font-weight: 600;
}

/* Search block overrides */
.hci-nav-search.wp-block-search {
  display: flex;
  align-items: center;
  background: var(--hci-bg);
  border: 1px solid var(--hci-border);
  border-radius: 20px !important;
  overflow: hidden;
  transition: border-color 0.2s;
}

.hci-nav-search.wp-block-search:hover {
  border-color: var(--hci-gold);
}

.hci-nav-search.wp-block-search .wp-block-search__label {
  display: none;
}

.hci-nav-search.wp-block-search .wp-block-search__inside-wrapper {
  border-radius: 0 !important;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
}

.hci-nav-search.wp-block-search .wp-block-search__input {
  border: none !important;
  background: transparent;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--hci-text);
  outline: none;
  box-shadow: none;
  min-width: 160px;
}

.hci-nav-search.wp-block-search .wp-block-search__input::placeholder {
  color: var(--hci-text-muted);
}

.hci-nav-search.wp-block-search .wp-block-search__button {
  background: transparent;
  border: none;
  border-radius: 0 !important;
  padding: 8px 12px;
  margin: 0;
  color: var(--hci-text-muted);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.hci-nav-search.wp-block-search .wp-block-search__button:hover {
  color: var(--hci-gold);
}

.hci-nav-search.wp-block-search .wp-block-search__button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.hci-nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.hci-nav-links a {
  color: var(--hci-text-secondary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}

.hci-nav-links a:hover,
.hci-nav-links a.active {
  color: var(--hci-text);
}

/* ═══════════ BANNER ═══════════ */
.hci-banner-outer {
  margin-top: 35px;
  width: 100%;
  background: linear-gradient(135deg, var(--hci-brown-dark) 0%, var(--hci-brown-mid) 100%);
  position: relative;
  overflow: hidden;
}

.hci-banner-outer::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(201,168,76,0.15), transparent);
  border-radius: 50%;
}

.hci-banner-outer::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 40%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(201,168,76,0.08), transparent);
  border-radius: 50%;
}

.hci-banner-section {
  padding: 0 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  height: 350px;
  background-image: var(--hci-banner-image);
  background-position: center -30px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 1;
}

.hci-banner-profile {
  max-width: 1200px;
  margin: -65px auto 0;
  padding: 0 40px;
  display: flex;
  gap: 24px;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.hci-banner-avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid var(--hci-brown-dark);
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  background: var(--hci-brown-mid);
}

.wp-block-group.hci-banner-story-glass {
  margin: 45px 0 0 0 !important;
  flex: 1;
  align-self: center;
  padding: 0;
  position: relative;
}

.hci-banner-story-badge {
  color: var(--hci-gold);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px 0 !important;
  position: relative;
  z-index: 1;
}

.hci-banner-story-text {
  color: #d4c4b0;
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

/* ═══════════ HERO SECTION ═══════════ */
.hci-hero {
  margin-top: 60px;
  padding: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.hci-hero-banner {
  background: #f0e6d4;
  border: 1px solid var(--hci-border-dark);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hci-hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.08), transparent);
  pointer-events: none;
}

.hci-hero-banner::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: var(--hci-gold);
  border-radius: 50%;
  opacity: 0.15;
}

.hci-hero-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.hci-hero-badge {
  color: var(--hci-gold);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hci-hero-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hci-text);
  margin-bottom: 12px;
}

.hci-hero-excerpt {
  color: var(--hci-text-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.hci-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.hci-hero-actions .btn-primary {
  background: var(--hci-brown-dark);
  color: #f5e6d3;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.hci-hero-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(45,24,16,0.3);
}

.hci-hero-actions .meta {
  color: var(--hci-text-muted);
  font-size: 13px;
}

.hci-hero-image {
  width: 140px;
  height: 140px;
  background: var(--hci-bg-sidebar);
  border: 1px solid var(--hci-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ═══════════ MAIN LAYOUT ═══════════ */
.hci-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.hci-feed {
  /* width handled by wp:column flex-basis:66.66% */
}

.hci-sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

/* ═══════════ FEED ═══════════ */
.hci-feed-header {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px 0 !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hci-border);
}

/* ═══════════ STORY CARDS — MEDIUM STYLE ═══════════ */

/* ═══════════ STORY CARD ═══════════ */
.hci-story-card {
  background: var(--hci-bg-white);
  border: 1px solid var(--hci-border);
  border-radius: 12px;
  padding: 24px;
  margin: 0 0 20px 0 !important;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s;
  position: relative;
}

.hci-story-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.hci-story-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Row layout: thumbnail left + content right */
.hci-story-card-row {
  display: flex !important;
  gap: 20px;
  align-items: flex-start;
}

/* Thumbnail wrapper */
.hci-story-card-thumb-wrap {
  width: 120px;
  min-width: 120px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hci-bg-sidebar);
}

.hci-story-card-thumb-wrap img,
.hci-story-card-thumb-wrap .wp-block-post-featured-image,
.hci-story-card-thumb-wrap .wp-block-post-featured-image img {
  width: 120px !important;
  height: 90px !important;
  min-width: 120px !important;
  min-height: 90px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Content area */
.hci-story-card-content {
  flex: 1;
  min-width: 0;
}

/* Tag badge */
.hci-story-card-tag {
  display: inline-block !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--hci-gold) !important;
  margin-bottom: 6px !important;
  padding-bottom: 3px !important;
  border-bottom: 2px solid var(--hci-gold) !important;
  line-height: 1.4 !important;
}

/* When tag is not rendered (no terms), hide it gracefully */
.hci-story-card-tag:empty,
.hci-story-card-tag:empty + .hci-story-card-title {
  /* tag hidden, title takes its place */
}

/* Title */
.hci-story-card-title {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 8px 0 !important;
  color: var(--hci-text);
  transition: color 0.2s;
}

.hci-story-card:hover .hci-story-card-title {
  color: var(--hci-gold-dim);
}

.hci-story-card-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.hci-story-card-title a:hover {
  color: inherit !important;
}

/* Excerpt */
.hci-story-card-excerpt {
  color: var(--hci-text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.hci-story-card-excerpt p {
  margin: 0 !important;
}

/* Author row */
.wp-block-post-author__avatar {
  margin-right: 0;
}

.hci-story-card-author-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  font-size: 13px;
  color: var(--hci-text-muted);
}

.hci-story-card-author-avatar {
  flex-shrink: 0;
}
.hci-story-card-author-avatar img {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  object-fit: cover;
  vertical-align: text-top;
}
.hci-story-card-author-avatar .wp-block-post-author__content {
  display: none;
}

.hci-story-card-author-name {
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
  color: var(--hci-text) !important;
  font-size: 13px !important;
}

.hci-story-card-dot {
  color: var(--hci-border-dark);
  font-size: 13px;
  line-height: 1;
}

.hci-story-card-author-row p {
  margin: 0 !important;
}

.hci-story-card-author-row .wp-block-post-date {
  font-size: 13px !important;
}

/* ═══════════ EXPANDED STATE ═══════════ */

/* Full content — hidden by default */
.hci-story-card-full {
  display: none !important;
  color: var(--hci-text-secondary);
  font-size: 16px;
  line-height: 1.85;
}

.hci-story-card-full p {
  margin-bottom: 16px !important;
}

.hci-story-card.expanded .hci-story-card-full {
  display: block !important;
}

.hci-story-card.expanded .hci-story-card-excerpt {
  display: none !important;
}

.hci-story-card.expanded .hci-story-card-thumb-wrap {
  display: none !important;
}

/* Expanded image at end of post */
.hci-story-card-expanded-image {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  transition: max-height 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease 0.1s, margin 0.4s ease;
  margin-top: 0 !important;
  border-radius: 8px;
}

.hci-story-card-expanded-image img,
.hci-story-card-expanded-image .wp-block-post-featured-image,
.hci-story-card-expanded-image .wp-block-post-featured-image img {
  width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
  background: var(--hci-bg-sidebar);
}

.hci-story-card.expanded .hci-story-card-expanded-image {
  max-height: 400px !important;
  opacity: 1;
  margin-top: 20px !important;
}

/* Toggle button */
.hci-story-card-toggle-wrap {
  margin-top: 8px !important;
}

.hci-story-card.expanded .hci-story-card-toggle-wrap {
  margin-top: 20px !important;
}

.hci-story-card-toggle {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.hci-story-card-toggle a {
  color: var(--hci-gold) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.2s;
  line-height: 1.4;
  min-height: auto !important;
}

.hci-story-card-toggle a:hover {
  color: var(--hci-gold-dim) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ═══════════ SIDEBAR ═══════════ */
.hci-sidebar-section {
  background: var(--hci-bg-white);
  border: 1px solid var(--hci-border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.hci-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hci-border);
}

.hci-emotion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hci-emotion-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--hci-bg-sidebar);
  cursor: pointer;
  transition: color 0.2s;
  font-size: 14px;
}

.hci-emotion-list li:last-child {
  border-bottom: none;
}

.hci-emotion-list li:hover {
  color: var(--hci-gold);
}

.hci-emotion-list li a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.hci-emotion-list li a:hover {
  color: var(--hci-gold);
}

.hci-guardian-card {
  background: var(--hci-brown-dark);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.hci-guardian-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.hci-guardian-name {
  color: var(--hci-gold);
  font-size: 16px;
  font-weight: 700;
  font-family: 'Libre Baskerville', Georgia, serif !important;
  margin-bottom: 8px;
}

.hci-guardian-quote {
  color: #8a7a6a;
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
}

.hci-guardian-btn {
  background: var(--hci-gold);
  color: var(--hci-brown-dark);
  border: none;
  padding: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.hci-guardian-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201,168,76,0.3);
  color: var(--hci-brown-dark);
}

/* ═══════════ MANTRA ═══════════ */
.hci-mantra {
  text-align: center;
  padding: 60px 40px;
  background: var(--hci-bg-sidebar);
  border-top: 1px solid var(--hci-border);
}

.hci-mantra-text {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-size: 18px;
  font-style: italic;
  color: var(--hci-text-muted);
  max-width: 500px;
  margin: 0 auto;
}

/* ═══════════ NEWSLETTER SECTION ═══════════ */
.hci-newsletter-section {
  max-width: 1100px;
  margin: 0 auto;
}

.hci-newsletter-card {
  background: var(--hci-bg-white);
  border: 1px solid var(--hci-border);
  border-radius: 12px;
  text-align: center;
}

.hci-newsletter-icon {
  margin-bottom: 8px;
}

.hci-newsletter-title {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-size: 20px;
  font-weight: 700;
  color: var(--hci-text);
  margin-bottom: 8px;
}

.hci-newsletter-desc {
  font-size: 15px;
  color: var(--hci-text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.hci-newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}

.hci-newsletter-input {
  flex: 1;
  padding: 13px 18px;
  background: var(--hci-bg);
  border: 1px solid var(--hci-border);
  border-radius: 8px;
  font-size: 15px;
  color: var(--hci-text);
  font-family: 'Source Sans 3', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}

.hci-newsletter-input::placeholder {
  color: var(--hci-text-muted);
}

.hci-newsletter-input:focus {
  border-color: var(--hci-gold);
}

.hci-newsletter-btn {
  background: var(--hci-brown-dark);
  color: #fff;
  border: none;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}

.hci-newsletter-btn:hover {
  background: var(--hci-brown-mid);
  transform: translateY(-1px);
}

/* ═══════════ FOOTER ═══════════ */

/*
 * WordPress wraps the template part in <footer class="wp-block-template-part">.
 * Background + padding live on THAT element (full viewport width = prototype .ftA).
 * Content is centered inside .hci-footer (max-width: 1100px = prototype .ftA-inner).
 */

/* WordPress wrapper: full-width background + padding (prototype .ftA) */
footer.wp-block-template-part {
  background-color: #f5f0e8;
  padding: 60px 40px 40px;
}

/* Content container: max-width + centering (prototype .ftA-inner) */
.wp-block-template-part > .hci-footer {
  max-width: 1100px;
  margin-inline: auto;
}

/*
 * WordPress generates runtime CSS for dynamic container classes
 * (e.g. .wp-container-core-columns-is-layout-*) AFTER our theme CSS.
 * These use flex-wrap: wrap and gap: 2em by default.
 * We override with matching specificity — our selectors are more specific.
 */
.hci-footer .wp-block-columns {
  flex-wrap: nowrap;
  gap: 40px;
  margin-bottom: 40px;
}

/* Column widths: first child wider (matches prototype .ftA-col--brand) */
.hci-footer .wp-block-column {
  flex: 1;
  min-width: 0;
}
.hci-footer .wp-block-column:first-child {
  flex: 1.3;
}

/* Kill is-layout-flow auto margins on column children */
.hci-footer .wp-block-column > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Section titles */
.hci-footer .hci-footer-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--hci-text);
  margin-bottom: 16px;
}

/* Brand description paragraph */
.hci-footer .wp-block-paragraph[style*="font-size:14px"] {
  margin-bottom: 16px;
}

/* Links list */
.hci-footer .hci-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hci-footer .hci-footer-links li {
  margin-bottom: 10px;
}
.hci-footer .hci-footer-links a {
  font-size: 14px;
  color: var(--hci-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.hci-footer .hci-footer-links a:hover {
  color: var(--hci-gold);
}

/* Social icons */
.hci-footer .hci-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.hci-footer .hci-footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hci-bg-white);
  border: 1px solid var(--hci-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
}
.hci-footer .hci-footer-social-icon:hover {
  background: var(--hci-gold);
  border-color: var(--hci-gold);
}
.hci-footer .hci-footer-social-icon img {
  width: 18px;
  height: 18px;
}

/* Separator */
.hci-footer .wp-block-separator {
  margin: 0 0 24px;
}

/* Bottom row */
.hci-footer .hci-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
}
.hci-footer .hci-footer-bottom > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Mantra */
.hci-footer .hci-footer-mantra {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: var(--hci-text-muted);
  max-width: 500px;
  flex: 1;
}

/* Copyright */
.hci-footer .hci-footer-copy {
  font-size: 12px;
  color: var(--hci-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════ MODAL ═══════════ */
.hci-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.hci-modal-overlay.active {
  display: flex;
}

.hci-modal {
  background: var(--hci-bg-white);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
}

.hci-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: var(--hci-bg);
  border: 1px solid var(--hci-border);
  border-radius: 50%;
  color: var(--hci-text-muted);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.hci-modal-close:hover {
  background: var(--hci-gold);
  color: white;
}

.hci-modal-category {
  color: var(--hci-gold);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hci-modal-title {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
  color: var(--hci-text);
}

.hci-modal-body {
  color: var(--hci-text-secondary);
  font-size: 16px;
  line-height: 1.8;
}

.hci-modal-body p {
  margin-bottom: 16px;
}

.hci-modal-tags {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.hci-modal-tags .tag {
  background: var(--hci-bg);
  border: 1px solid var(--hci-border);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--hci-text-secondary);
}

/* ═══════════ SINGLE STORY PAGE ═══════════ */
/* Single page reuses .hci-story-card classes — card is always expanded */

/* Override: single page card is always visible, no animation */
.hci-main .hci-story-card.expanded {
  opacity: 1 !important;
  transform: none !important;
}

/* Single page card — no hover shadow */
.hci-main .hci-story-card.expanded:hover {
  box-shadow: none;
}

/* Title override for single — slightly larger than card default */
.hci-main .hci-story-card.expanded .hci-story-card-title {
  font-size: 32px !important;
}

/* Content text sizing for single */
.hci-main .hci-story-card.expanded .hci-story-card-full {
  font-size: 17px;
  line-height: 1.8;
}

.hci-main .hci-story-card.expanded .hci-story-card-full h2,
.hci-main .hci-story-card.expanded .hci-story-card-full h3,
.hci-main .hci-story-card.expanded .hci-story-card-full h4 {
  color: var(--hci-text);
  margin-top: 32px;
  margin-bottom: 16px;
}

.hci-main .hci-story-card.expanded .hci-story-card-full blockquote {
  border-left: 3px solid var(--hci-gold);
  padding-left: 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--hci-text-secondary);
}

.hci-main .hci-story-card.expanded .hci-story-card-full a {
  color: var(--hci-gold-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hci-main .hci-story-card.expanded .hci-story-card-full a:hover {
  color: var(--hci-gold);
}

/* Characters row under the post */
.hci-single-characters-row {
  margin-top: 24px;
}

.hci-single-characters {
  color: var(--hci-text-secondary);
  font-size: 13px;
}

/* Breadcrumb / back button */
.hci-single-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.hci-single-back a {
  color: var(--hci-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.hci-single-back a:hover {
  color: var(--hci-gold);
}

/* ═══════════ ARCHIVE / INDEX / PAGE ═══════════ */
.hci-archive,
.hci-page,
.hci-index {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 40px 80px;
}

.hci-archive-header,
.hci-page-header,
.hci-index-header {
  margin-bottom: 40px;
}

.hci-archive-title,
.hci-page-title,
.hci-index-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hci-text);
}

.hci-archive-description {
  color: var(--hci-text-secondary);
  font-size: 16px;
  margin-top: 8px;
}

.hci-page-content {
  font-size: 17px;
  line-height: 1.8;
  color: var(--hci-text-secondary);
}

.hci-page-content p {
  margin-bottom: 20px;
}

/* ═══════════ PAGINATION ═══════════ */
.hci-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.hci-pagination a,
.hci-pagination span {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  color: var(--hci-text-secondary);
  transition: all 0.2s;
}

.hci-pagination a:hover {
  background: var(--hci-bg-sidebar);
  color: var(--hci-text);
}

.hci-pagination .current {
  background: var(--hci-brown-dark);
  color: var(--hci-bg);
}

/* ═══════════ ACCESSIBILITY ═══════════ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus,
.screen-reader-text:focus-within {
  background-color: var(--hci-brown-dark);
  color: var(--hci-bg);
  clip: auto !important;
  clip-path: none;
  display: block;
  font-size: 16px;
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 12px 24px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 10000;
  border-radius: 0 0 8px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Breadcrumb styles */
.hci-breadcrumb {
  max-width: 720px;
  margin: 0 auto;
  padding: 100px 40px 0;
}

.hci-breadcrumb .nav-breadcrumbs {
  font-size: 13px;
  color: var(--hci-text-muted);
}

.hci-breadcrumb .nav-breadcrumbs a {
  color: var(--hci-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.hci-breadcrumb .nav-breadcrumbs a:hover {
  color: var(--hci-gold);
}

.hci-breadcrumb .nav-breadcrumbs .separator {
  margin: 0 8px;
  color: var(--hci-border-dark);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--hci-gold);
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode */
@media (forced-colors: active) {
  .hci-nav,
  .hci-story-card,
  .hci-sidebar-section {
    border: 1px solid ButtonText;
  }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 768px) {
  .hci-nav {
    padding: 10px 16px !important;
  }

  .hci-nav-search {
    display: none;
  }

  .hci-nav-links {
    gap: 12px;
  }

  .hci-nav-links a {
    font-size: 14px;
  }

  .hci-banner-section {
    padding: 0 16px !important;
    height: 120px;
    background-position: center 40px;
  }

  .hci-banner-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px !important;
  }

  .hci-banner-avatar {
    width: 120px;
    height: 120px;
  }

  .wp-block-group.hci-banner-story-glass {
    margin: 20px 0 0 0 !important;
  }

  .hci-banner-story-badge {
    font-size: 20px;
  }

  .hci-banner-story-text {
    font-size: 16px;
  }

  .hci-hero {
    padding: 20px 16px !important;
  }

  .hci-hero-banner {
    flex-direction: column;
    text-align: center;
    padding: 24px !important;
  }

  .hci-hero-image {
    width: 100px;
    height: 100px;
  }

  .hci-hero-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hci-layout {
    padding: 0 16px 60px !important;
  }

  .hci-sidebar {
    position: static;
  }

  /* Mobile card adjustments */
  .hci-story-card {
    padding: 18px;
  }

  .hci-story-card-row {
    flex-direction: column !important;
  }

  .hci-story-card-thumb-wrap {
    width: 100% !important;
    min-width: 100% !important;
    height: 120px;
  }

  .hci-story-card-thumb-wrap img,
  .hci-story-card-thumb-wrap .wp-block-post-featured-image,
  .hci-story-card-thumb-wrap .wp-block-post-featured-image img {
    width: 100% !important;
    height: 120px !important;
  }

  .hci-story-card-title {
    font-size: 18px;
  }

  .hci-story-card-expanded-image img,
  .hci-story-card-expanded-image .wp-block-post-featured-image,
  .hci-story-card-expanded-image .wp-block-post-featured-image img {
    height: 220px !important;
  }

  .hci-modal {
    padding: 24px;
  }

  .hci-modal-title {
    font-size: 22px;
  }

  /* Single page responsive — padding handled by .hci-main */

  .hci-archive,
  .hci-page,
  .hci-index {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Newsletter responsive */
  .hci-newsletter-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hci-newsletter-card {
    padding: 32px 24px !important;
  }

  .hci-newsletter-form {
    flex-direction: column;
  }

  .hci-newsletter-btn {
    width: 100%;
  }

  /* Footer responsive */
  .wp-block-template-part {
    padding: 40px 16px 32px;
  }
  .hci-footer .wp-block-columns {
    flex-direction: column;
    gap: 32px;
  }
  .hci-footer .hci-footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NUCLEAR OVERRIDE — WordPress global layout margins
   :root :where(.is-layout-flow) > * adds margin-block-start: 24px
   We MUST override this for card internals to have zero spacing
   ═══════════════════════════════════════════════════════════════ */

/* Force flex layouts inside cards */
:root .hci-story-card .hci-story-card-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  align-items: flex-start !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Force thumbnail sizing */
:root .hci-story-card .hci-story-card-thumb-wrap {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: 90px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--hci-bg-sidebar) !important;
  margin: 0 !important;
}

:root .hci-story-card .hci-story-card-thumb-wrap img,
:root .hci-story-card .hci-story-card-thumb-wrap figure img,
:root .hci-story-card .wp-block-post-featured-image img {
  width: 120px !important;
  height: 90px !important;
  min-width: 120px !important;
  min-height: 90px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* Remove figure wrapper default styling */
:root .hci-story-card .wp-block-post-featured-image {
  width: 120px !important;
  height: 90px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card content — no auto margins */
:root .hci-story-card .hci-story-card-content {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Title — zero margin base */
:root .hci-story-card .hci-story-card-title,
:root .hci-story-card .wp-block-post-title {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

:root .hci-story-card .wp-block-post-title a {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--hci-text) !important;
  text-decoration: none !important;
}

:root .hci-story-card .wp-block-post-title a:hover {
  color: var(--hci-gold-dim) !important;
}

/* Excerpt — zero margin */
:root .hci-story-card .hci-story-card-excerpt,
:root .hci-story-card .wp-block-post-excerpt {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

:root .hci-story-card .wp-block-post-excerpt__excerpt {
  margin: 0 !important;
  color: var(--hci-text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Author row */
:root .hci-story-card .hci-story-card-author-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

:root .hci-story-card .wp-block-post-author-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hci-text) !important;
  margin: 0 !important;
}

:root .hci-story-card .wp-block-post-date {
  font-size: 13px !important;
  color: var(--hci-text-muted) !important;
  margin: 0 !important;
}

:root .hci-story-card .wp-block-post-date time {
  font-size: 13px !important;
}

:root .hci-story-card .hci-story-card-dot {
  margin: 0 !important;
}

/* Full content (expanded) */
:root .hci-story-card .hci-story-card-full {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:root .hci-story-card.expanded .hci-story-card-full {
  display: block !important;
}

:root .hci-story-card .wp-block-post-content {
  margin: 0 !important;
  padding: 0 !important;
}

:root .hci-story-card .wp-block-post-content p {
  color: var(--hci-text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  margin-bottom: 16px !important;
}

:root .hci-story-card .wp-block-post-content > p:first-child {
  margin-top: 16px !important;
}

/* Expanded image */
:root .hci-story-card .hci-story-card-expanded-image {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: max-height 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease 0.1s;
}

:root .hci-story-card.expanded .hci-story-card-expanded-image {
  max-height: 400px !important;
  opacity: 1 !important;
  margin-top: 20px !important;
}

:root .hci-story-card .hci-story-card-expanded-image img,
:root .hci-story-card .hci-story-card-expanded-image figure img,
:root .hci-story-card .hci-story-card-expanded-image .wp-block-post-featured-image,
:root .hci-story-card .hci-story-card-expanded-image .wp-block-post-featured-image img {
  width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

/* Toggle button — override WP button defaults */
:root .hci-story-card .wp-block-buttons {
  margin: 0 !important;
  padding: 0 !important;
}

:root .hci-story-card .wp-block-buttons > * {
  margin: 0 !important;
}

:root .hci-story-card .wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
}

:root .hci-story-card .wp-block-button__link {
  background: transparent !important;
  color: var(--hci-gold) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  text-decoration: none !important;
  min-height: auto !important;
  line-height: 1.4 !important;
}

:root .hci-story-card .wp-block-button__link:hover {
  background: transparent !important;
  color: var(--hci-gold-dim) !important;
  box-shadow: none !important;
}

:root .hci-story-card .wp-block-button__link::before,
:root .hci-story-card .wp-block-button__link::after {
  display: none !important;
}

/* Excerpt hidden when expanded */
:root .hci-story-card.expanded .wp-block-post-excerpt {
  display: none !important;
}

/* Thumbnail hidden when expanded */
:root .hci-story-card.expanded .hci-story-card-thumb-wrap {
  display: none !important;
}

/* ═══════════ RESPONSIVE — NUCLEAR OVERRIDES ═══════════ */
@media (max-width: 768px) {
  :root .hci-story-card .hci-story-card-row {
    flex-direction: column !important;
  }

  :root .hci-story-card .hci-story-card-thumb-wrap,
  :root .hci-story-card .wp-block-post-featured-image {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 120px !important;
  }

  :root .hci-story-card .hci-story-card-thumb-wrap img,
  :root .hci-story-card .wp-block-post-featured-image img {
    width: 100% !important;
    height: 120px !important;
  }

  :root .hci-story-card .wp-block-post-title a {
    font-size: 18px !important;
  }

  :root .hci-story-card .hci-story-card-expanded-image img,
  :root .hci-story-card .hci-story-card-expanded-image .wp-block-post-featured-image,
  :root .hci-story-card .hci-story-card-expanded-image .wp-block-post-featured-image img {
    height: 220px !important;
  }

  /* Newsletter responsive */
  .hci-newsletter-card {
    padding: 28px 20px;
  }
}