/*
Theme Name: CompareCrest Child
Theme URI: https://comparecrest.com
Description: Child theme for CompareCrest, built on the Rehub parent theme. Light, clean editorial design system applied consistently across homepage, articles, and category archives.
Author: CompareCrest
Template: rehub-theme
Version: 6.0.0
Text Domain: comparecrest-child
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ===========================================================
   1. SHARED DESIGN TOKENS — light theme, built on your actual
   brand icon colors (sampled exactly from CompareCrest_Logo-icon.png:
   #201E1D and #EC3013). One confident brand red instead of the
   earlier invented green/coral pairing, plus the near-black your
   logo already uses for ink.
   =========================================================== */
:root{
  --bg:#FDFCFA; --panel:#F4F2ED; --panel-2:#ECE9E2;
  --ink:#201E1D; --ink-soft:#6B6A64;
  --pine:#EC3013; --pine-tint:#FDE9E6;
  --coral:#EC3013;
  --rule:rgba(32,30,29,.12); --rule-strong:rgba(32,30,29,.24);
}

/* ===========================================================
   2. SITEWIDE CLEANUP
   =========================================================== */
.rehub-wishlist-btn .wishlist-count-text,
.addtoany-wishlist-label{ display:none; }

.widget_loginwidget,
#loginform,
.login-widget-wrap,
aside.widget-login{ display:none !important; }

.post-thumb img,
.rh-post-thumb img,
.related-post-thumb img{
  aspect-ratio:336/220; object-fit:cover; background-color:#f2f2f2; width:100%; height:auto;
}
img[loading="lazy"]{ transition:opacity .25s ease-in-out; }
.rh-section-empty{ display:none; }

/* ===========================================================
   3. HEADER & FOOTER — light theme applied to Rehub's own chrome
   Real class/ID names confirmed from header.php, footer.php, and
   header_seven.php. Rehub also has native light/dark toggles for
   these (Theme Options → Header/Footer style) — this CSS applies
   regardless of that setting.

   CAVEAT: if your header/footer is Elementor Theme Builder content
   rather than Rehub's native header, this CSS may not reach it —
   same situation the old homepage was in. Check after activating.
   =========================================================== */
#main_header, .header_wrap, .header_top_wrap, .main-nav{
  background:var(--bg) !important; border-color:var(--rule) !important;
}
#main_header a, .main-nav a, .top-nav a{ color:var(--ink) !important; }
#main_header a:hover, .main-nav a:hover{ color:var(--pine) !important; }
.main-nav, .header_wrap{ border-bottom:1px solid var(--rule); }

/* Text-logo fallback (renders when no image logo is set, or it fails
   to load) was showing Rehub's default purple — switched to your
   actual brand red instead. If you have a real logo image uploaded
   in Theme Options, this won't be visible at all since the image
   takes priority. */
.textlogo, .rehub-main-color{ color:var(--pine) !important; }

#theme_footer, .footer-bottom, .footer-bottom.white_style, .footer-bottom.dark_style{
  background:var(--panel) !important; color:var(--ink-soft) !important; border-color:var(--rule) !important;
}
.footer_widget, .f_text{ color:var(--ink-soft) !important; }
.footer_widget a, .f_text a{ color:var(--ink) !important; }
.footer_widget a:hover{ color:var(--pine) !important; }
.footer_widget h2, .footer_widget h3, .footer_widget h4{ color:var(--ink) !important; font-family:'Space Grotesk',sans-serif; }

/* Dropdown submenus — activates automatically the moment you nest
   items under a parent in Appearance → Menus. No theme setting
   needed; confirmed by reading Rehub's own menu walker class, which
   uses WordPress's standard .sub-menu output. */
.main-nav .sub-menu{
  background:#fff !important; border:1px solid var(--rule-strong);
  box-shadow:0 4px 16px rgba(32,30,29,.08); padding:6px 0; min-width:200px;
}
.main-nav .sub-menu a{ padding:10px 16px !important; display:block; }
.main-nav .sub-menu a:hover{ background:var(--panel); color:var(--pine) !important; }