/* ============================================================
   SPANISH CONNECTION — Main Stylesheet
   Brand: Green #8DC63F · Gold #F5C800 · Dark #0A0A0A
   ============================================================ */

:root {
  --sc-green:  #8DC63F;
  --sc-gold:   #F5C800;
  --sc-dark:   #0A0A0A;
  --sc-dark2:  #111111;
  --sc-dark3:  #1A1A1A;
  --sc-dark4:  #222222;
  --sc-text:   #F0EDE6;
  --sc-muted:  #9A9488;
  --sc-border: rgba(255,255,255,0.08);
  --sc-green-glow: rgba(141,198,63,0.15);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--sc-dark) !important;
  color: var(--sc-text) !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── LANGUAGE TOGGLE ── */
.sc-lang-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 32px;
  background: var(--sc-dark2);
  border-bottom: 1px solid var(--sc-border);
  gap: 8px;
}
.sc-lang-btns { display: flex; align-items: center; gap: 8px; }
.sc-lang-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--sc-muted); }
.sc-lang-btn {
  background: none; border: 1px solid var(--sc-border);
  color: var(--sc-muted); padding: 4px 12px; border-radius: 20px;
  cursor: pointer; font-size: 11px; font-weight: 600;
  font-family: inherit; transition: all 0.2s;
}
.sc-lang-btn.active { background: var(--sc-green); color: var(--sc-dark); border-color: var(--sc-green); }

/* ── NAVIGATION ── */
.sc-nav {
  position: fixed; top: 32px; left: 0; right: 0; z-index: 999;
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sc-border);
}
.sc-nav-brand { display: flex; align-items: center; gap: 10px; }
.sc-logo-img img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.sc-nav-logo-text { line-height: 1.1; }
.sc-nav-logo-text .wp-block-site-title { font-family: 'DM Serif Display', serif !important; font-size: 16px !important; font-weight: 400 !important; color: var(--sc-text) !important; }
.sc-nav-logo-text .wp-block-site-title a { color: var(--sc-text) !important; text-decoration: none !important; }
.sc-tagline { display: block; font-size: 10px; font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: 0.15em; color: var(--sc-gold); text-transform: uppercase; }
.sc-nav-links .wp-block-navigation__container { display: flex; gap: 24px; list-style: none; }
.sc-nav-links .wp-block-navigation-item__content { color: var(--sc-muted) !important; text-decoration: none; font-size: 13px; font-weight: 500; transition: color 0.2s; }
.sc-nav-links .wp-block-navigation-item__content:hover,
.sc-nav-links .current-menu-item .wp-block-navigation-item__content { color: var(--sc-green) !important; }
.sc-nav-right { display: flex; align-items: center; gap: 16px; }
.sc-social-links { display: flex; align-items: center; gap: 14px; }
.sc-social-link { display: inline-flex; align-items: center; gap: 5px; color: var(--sc-muted); text-decoration: none; font-size: 12px; font-weight: 600; transition: color 0.2s; }
.sc-social-link:hover { color: var(--sc-green); }
.sc-nav-cta { background: var(--sc-green) !important; color: var(--sc-dark) !important; padding: 10px 20px !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 13px !important; text-decoration: none !important; transition: background 0.2s !important; }
.sc-nav-cta:hover { background: #9fd44a !important; }

/* ── MAIN CONTENT OFFSET ── */
.sc-main { padding-top: 96px !important; min-height: 80vh; }

/* ── WHATSAPP FLOAT ── */
.sc-wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 998;
  width: 56px; height: 56px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  animation: sc-wa-pulse 3s ease-in-out infinite;
}
.sc-wa-float:hover { transform: scale(1.1); }
@keyframes sc-wa-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.2); }
  50%      { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 0 0 12px rgba(37,211,102,0); }
}

/* ── FOOTER ── */
.sc-footer { background: var(--sc-dark2) !important; border-top: 1px solid var(--sc-border); }
.sc-footer-inner { max-width: 1100px; margin: 0 auto; }
.sc-footer-brand { }
.sc-footer-desc { font-size: 14px; color: var(--sc-muted); line-height: 1.7; margin: 12px 0; }
.sc-footer-social { display: flex; gap: 16px; margin-top: 12px; }
.sc-footer-social a { color: var(--sc-muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: color 0.2s; }
.sc-footer-social a:hover { color: var(--sc-green); }
.sc-footer-h { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-text); margin-bottom: 14px; }
.sc-footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-footer-links a { color: var(--sc-muted); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.sc-footer-links a:hover { color: var(--sc-green); }
.sc-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; margin-top: 32px; border-top: 1px solid var(--sc-border); font-size: 12px; color: var(--sc-muted); flex-wrap: wrap; gap: 10px; }
.sc-footer-bottom a { color: var(--sc-muted); text-decoration: none; }
.sc-footer-bottom a:hover { color: var(--sc-green); }

/* ── BILINGUAL ── */
.es { display: none !important; }
body.lang-es .en { display: none !important; }
body.lang-es .es { display: revert !important; }

/* ── BUTTONS ── */
.sc-btn-primary {
  background: var(--sc-green); color: var(--sc-dark);
  padding: 13px 26px; border-radius: 8px; font-weight: 700;
  font-size: 14px; text-decoration: none; display: inline-flex;
  align-items: center; gap: 8px; transition: all 0.25s;
  border: none; cursor: pointer; font-family: inherit;
}
.sc-btn-primary:hover { background: #9fd44a; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(141,198,63,0.3); color: var(--sc-dark); }
.sc-btn-secondary {
  background: transparent; color: var(--sc-text);
  padding: 13px 26px; border-radius: 8px; font-weight: 600;
  font-size: 14px; text-decoration: none; border: 1px solid var(--sc-border);
  display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s;
}
.sc-btn-secondary:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); color: var(--sc-text); }
.sc-btn-wa {
  background: #25D366; color: #fff; padding: 13px 26px; border-radius: 8px;
  font-weight: 700; font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s;
}
.sc-btn-wa:hover { background: #20bd5a; color: #fff; }

/* ── SECTION UTILITIES ── */
.sc-section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-green); margin-bottom: 14px; }
.sc-section-label::before { content: "—"; }
.sc-section-h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px,3.5vw,42px); font-weight: 800; line-height: 1.15; margin-bottom: 14px; color: var(--sc-text); }
.sc-section-h2 em { font-style: italic; color: var(--sc-gold); }
.sc-section-sub { font-size: 16px; color: var(--sc-muted); max-width: 600px; line-height: 1.7; margin-bottom: 48px; }
.sc-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(141,198,63,0.1); border: 1px solid rgba(141,198,63,0.3); color: var(--sc-green); padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }

/* ── CARDS ── */
.sc-card { background: var(--sc-dark3); border: 1px solid var(--sc-border); border-radius: 16px; padding: 28px 24px; transition: border-color 0.25s, transform 0.25s; }
.sc-card:hover { border-color: rgba(141,198,63,0.3); transform: translateY(-2px); }
.sc-highlight-box { background: linear-gradient(135deg, rgba(141,198,63,0.06), rgba(245,200,0,0.04)); border: 1px solid rgba(141,198,63,0.15); border-radius: 12px; padding: 24px 28px; }

/* ── FORMS ── */
.sc-form-input, .sc-form-select, .sc-form-textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--sc-border); background: var(--sc-dark4);
  color: var(--sc-text); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color 0.2s;
}
.sc-form-input:focus, .sc-form-select:focus, .sc-form-textarea:focus { border-color: rgba(141,198,63,0.5); }
.sc-form-input::placeholder, .sc-form-textarea::placeholder { color: var(--sc-muted); }
.sc-form-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-muted); margin-bottom: 7px; }
.sc-form-textarea { resize: vertical; min-height: 120px; }

/* ── BLOG ── */
.sc-blog-hero { background: var(--sc-dark2); border-bottom: 1px solid var(--sc-border); }
.sc-posts-grid .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 24px; }
.sc-post-card { background: var(--sc-dark3); border: 1px solid var(--sc-border); border-radius: 16px; overflow: hidden; transition: border-color 0.25s, transform 0.25s; }
.sc-post-card:hover { border-color: rgba(141,198,63,0.3); transform: translateY(-3px); }
.sc-post-thumb { height: 180px; overflow: hidden; }
.sc-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc-post-body { padding: 20px; }
.sc-post-cat a { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-green); text-decoration: none; }
.sc-post-title a { font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--sc-text); text-decoration: none; line-height: 1.35; display: block; margin: 8px 0; }
.sc-post-excerpt { font-size: 13px; color: var(--sc-muted); line-height: 1.65; }
.sc-post-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sc-border); }
.sc-post-date { font-size: 11px; color: var(--sc-muted); }
.sc-read-more a { font-size: 12px; font-weight: 700; color: var(--sc-green); text-decoration: none; }
.sc-pagination { margin-top: 48px; }
.sc-pagination .wp-block-query-pagination-numbers a,
.sc-pagination .wp-block-query-pagination-previous a,
.sc-pagination .wp-block-query-pagination-next a { color: var(--sc-muted); text-decoration: none; padding: 8px 14px; border: 1px solid var(--sc-border); border-radius: 6px; margin: 0 4px; transition: all 0.2s; }
.sc-pagination a:hover { color: var(--sc-green); border-color: var(--sc-green); }

/* ── CTA STRIP ── */
.sc-cta-strip { background: linear-gradient(135deg,#0f1f06,#0a0a0a,#1a1200); border-top: 1px solid var(--sc-border); padding: 80px 40px; text-align: center; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sc-nav { padding: 0 20px; }
  .sc-nav-links, .sc-social-links { display: none !important; }
  .sc-posts-grid .wp-block-post-template { grid-template-columns: 1fr 1fr !important; }
  .sc-main { padding-top: 96px !important; }
}
@media (max-width: 600px) {
  .sc-posts-grid .wp-block-post-template { grid-template-columns: 1fr !important; }
  .sc-footer-grid { flex-direction: column !important; }
}

/* ── GLOBAL MOBILE FIX FOR IMPORTED PAGE CONTENT ──
   The imported pages (Home, About, Contact, Portal) use inline
   style="display:grid;grid-template-columns:1fr 1fr" for two-column
   layouts. These need to stack on mobile or content gets cut off. */
@media (max-width: 880px) {
  .entry-content div[style*="grid-template-columns:1fr 1fr"],
  .wp-block-post-content div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  div[style*="border-radius:16px"] img[alt="Spanish Connection Team"] {
    max-width: 100%;
    height: auto;
  }
  div[style*="display:flex;gap:32px"] {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
}
@media (max-width: 480px) {
  h1 { font-size: 32px !important; }
  div[style*="padding:130px 40px"],
  div[style*="padding: 130px 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}