/*
Theme Name: GossipInfo Child
Template: mh-magazine-lite
Description: Child theme of MH Magazine Lite with a modern hero + card-grid homepage layout for GossipInfo.
Version: 1.0
Author: Ahmed Adesegun
*/

/* IMPORTANT: MH Magazine Lite's own functions.php enqueues its main
   stylesheet using get_stylesheet_uri(), which points to THIS file once
   this child theme is active - meaning the parent's own style.css would
   never load on its own. The @import below pulls it in first, then
   everything after it in this file overrides it. Do not remove this line. */
@import url("../mh-magazine-lite/style.css");

:root{
  --parrot-blue:#3B6EA8;
  --parrot-green:#3DAA5C;
  --parrot-coral:#F0603C;
  --ink:#171512;
  --paper:#FBF9F5;
  --line:#E6E1D8;
  --muted:#7A7468;
}

/* Only apply our fonts inside the homepage wrapper so we don't
   fight with Magazine Lite's styles elsewhere on the site */
.gi-home, .gi-home h1, .gi-home h2, .gi-home h3 {
  font-family:'Sora', sans-serif;
}
.gi-home {
  font-family:'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}
.gi-home *{ box-sizing:border-box; }

/* Ticker */
.gi-ticker{
  background: var(--ink); color: var(--paper);
  font-size:12px; font-weight:600; letter-spacing:0.05em;
  padding:8px 20px; display:flex; gap:10px; align-items:center;
  border-radius:6px; margin-bottom:24px;
}
.gi-ticker .tag{
  background: var(--parrot-coral); color:white; padding:2px 8px; border-radius:3px;
  font-size:10px; letter-spacing:0.08em;
}

/* Hero */
.gi-hero{
  display:grid; grid-template-columns:1.5fr 1fr; gap:24px; margin-bottom:56px;
}
.gi-hero-feature{
  position:relative; border-radius:14px; overflow:hidden; min-height:420px;
  display:flex; align-items:flex-end; padding:32px;
  background-size:cover; background-position:center;
  background-color: var(--parrot-blue);
}
.gi-hero-feature::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
}
.gi-hero-feature .gi-badge{
  position:absolute; top:20px; left:20px; z-index:2;
  background: var(--parrot-coral); color:white; font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:20px; letter-spacing:0.05em; text-transform:uppercase;
}
.gi-hero-feature .gi-content{ position:relative; z-index:2; color:white; }
.gi-hero-feature h1{ font-size:28px; line-height:1.15; margin:0 0 10px; }
.gi-hero-feature a{ color:inherit; text-decoration:none; }
.gi-hero-feature .gi-meta{ font-size:12px; opacity:0.85; font-weight:500; }

.gi-hero-side{ display:flex; flex-direction:column; gap:18px; }
.gi-side-card{
  display:flex; gap:14px; border-bottom:1px solid var(--line); padding-bottom:18px;
}
.gi-side-card:last-child{ border-bottom:none; }
.gi-side-thumb{
  width:96px; height:80px; border-radius:8px; flex-shrink:0;
  background-size:cover; background-position:center; background-color: var(--parrot-green);
}
.gi-side-card h3{ font-size:14.5px; line-height:1.3; margin:0 0 6px; }
.gi-side-card h3 a{ color: var(--ink); text-decoration:none; }
.gi-side-card .gi-meta{ font-size:11px; color: var(--muted); }

/* Section header */
.gi-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:20px; border-bottom:2px solid var(--ink); padding-bottom:10px;
}
.gi-section-head h2{
  font-size:20px; display:flex; align-items:center; gap:10px; margin:0;
}
.gi-section-head h2::before{
  content:''; width:10px; height:10px; border-radius:50%; background: var(--parrot-coral);
  display:inline-block;
}
.gi-section-head a{ font-size:12px; font-weight:600; color: var(--parrot-blue); text-decoration:none; }

.gi-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px;
}
.gi-card{ cursor:pointer; }
.gi-card .gi-thumb{
  width:100%; aspect-ratio:4/3; border-radius:10px; margin-bottom:12px;
  background-size:cover; background-position:center; background-color:#999;
  transition:transform .25s ease;
}
.gi-card:hover .gi-thumb{ transform:scale(1.03); }
.gi-card h3{ font-size:15.5px; line-height:1.35; margin:0 0 6px; }
.gi-card h3 a{ color: var(--ink); text-decoration:none; }
.gi-card .gi-meta{ font-size:11.5px; color: var(--muted); }

/* Mobile responsiveness */
@media (max-width: 780px){
  .gi-hero{ grid-template-columns:1fr; }
  .gi-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){
  .gi-grid{ grid-template-columns:1fr; }
  .gi-hero-feature{ min-height:280px; }
}

/* ============================================================
   HEADER / LOGO / NAV - compact site-wide header to match the
   GossipInfo mockup (small round logo + inline wordmark, instead
   of MH Magazine Lite's default large stacked logo/title/tagline).
   Targets the parent theme's own header markup from
   content-header.php - do not rename these classes, they belong
   to the parent theme.
   ============================================================ */

.mh-custom-header{
  padding: 14px 0;
}
.mh-site-identity{
  display: flex;
  align-items: center;
}
.mh-site-logo{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Shrink the uploaded custom logo image down to a compact mark */
.mh-site-logo .custom-logo-link img,
.mh-site-logo img.custom-logo {
  max-height: 48px;
  width: auto;
  border-radius: 50%;
}

.mh-header-text-link{
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}

.mh-header-title{
  font-family: 'Sora', sans-serif;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
  color: var(--ink) !important;
}

/* Tagline moves inline, smaller and muted, instead of its own large line */
.mh-header-tagline{
  font-family: 'Inter', sans-serif;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  margin: 0 !important;
  text-transform: none !important;
}

@media (max-width: 600px){
  .mh-site-logo .custom-logo-link img,
  .mh-site-logo img.custom-logo {
    max-height: 36px;
  }
  .mh-header-title{ font-size: 18px !important; }
  /* Hide tagline on very small screens to keep the header tight */
  .mh-header-tagline{ display: none; }
}

/* ============================================================
   HEADER LAYOUT - place the nav/menu-icon beside the logo in one
   compact row (both desktop AND mobile now), and make the header
   sticky so it stays visible while scrolling.
   ============================================================ */
.mh-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 0 16px;
  border-bottom: 3px solid var(--parrot-coral);
}
body.admin-bar .mh-header{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar .mh-header{ top: 46px; }
}

/* The logo/site-identity wrapper: stop it stretching full width, but
   allow it to shrink on narrow screens instead of forcing the whole
   page wider than the viewport (which was pushing the page sideways) */
.mh-header > .mh-container.mh-row{
  width: auto;
  max-width: none;
  margin: 0;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}
.mh-site-logo{ min-width: 0; }
.mh-site-logo .custom-logo-link img,
.mh-site-logo img.custom-logo{
  max-width: 100%;
}
.mh-custom-header{ padding: 8px 0; }

/* The nav wrapper: shrink to fit its content and sit beside the logo.
   On mobile this now contains the SlickNav hamburger button instead
   of the full menu, so it stays compact automatically. Keep it from
   shrinking away - the logo gives up space first, not this. */
.mh-main-nav-wrap{
  width: auto;
  background: transparent;
  border-bottom: none !important;
  margin: 0;
  flex-shrink: 0;
}
.mh-main-nav-wrap .mh-navigation.mh-container{
  width: auto;
  max-width: none;
  margin: 0;
}

/* NOTE: overflow-x:hidden on html/body was tried here as a safety net,
   but it breaks position:sticky on the header in most browsers (setting
   overflow-x alone often makes the element a scroll container on the
   y-axis too, which sticky can't work inside). The real fix for the
   sideways-shift bug is the logo flex-shrink change above - removing
   this instead of layering a workaround that breaks something else. */

@media screen and (min-width: 768px){
  .mh-main-nav-wrap{
    background: var(--ink);
    border-radius: 30px;
  }
  .mh-main-nav li a{ padding: 12px 18px; }
}

/* SlickNav hamburger button (mobile) - restyle to match brand instead
   of the default red box */
.slicknav_btn{
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 8px !important;
}
.slicknav_btn .slicknav_icon-bar{
  background-color: var(--ink) !important;
  box-shadow: none !important;
  width: 22px;
  height: 2.5px;
}
.slicknav_menu{
  background: transparent !important;
  padding: 0 !important;
  border-bottom: none !important;
}
.slicknav_menu .slicknav_menutxt{ display: none !important; }

/* SlickNav slide-out panel (opened state) */
.slicknav_nav{
  background: var(--ink);
  border-radius: 10px;
  margin-top: 8px !important;
  padding: 8px 4px !important;
}
.slicknav_nav a{
  color: white !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.slicknav_nav .slicknav_item:hover,
.slicknav_nav a:hover{
  background: var(--parrot-coral) !important;
  color: white !important;
}

@media screen and (max-width: 767px){
  .mh-site-logo{ text-align: left !important; }
}


/* ============================================================
   SINGLE POST PAGE - modern layout (content-single.php override)
   ============================================================ */
.gi-breadcrumb{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.gi-breadcrumb a{ color: var(--parrot-blue); text-decoration: none; }

.gi-cat-badge{
  display: inline-block;
  background: var(--parrot-coral);
  color: white !important;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  margin-bottom: 14px;
}

.gi-single .entry-title{
  font-family: 'Sora', sans-serif;
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 14px;
}

.gi-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.gi-meta-row span{ position: relative; padding-left: 14px; }
.gi-meta-row span::before{
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--parrot-coral);
}
.gi-meta-row span:first-child{ padding-left: 0; }
.gi-meta-row span:first-child::before{ display: none; }

/* Featured image */
.gi-entry-content .entry-thumbnail img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin-bottom: 22px;
}

/* Body text + drop cap on the first paragraph */
.gi-entry-content p{
  font-size: 16px;
  line-height: 1.75;
  color: #2b2822;
  margin-bottom: 18px;
}
.gi-entry-content > p:first-of-type::first-letter{
  font-family: 'Sora', sans-serif;
  font-size: 52px;
  font-weight: 800;
  float: left;
  line-height: 0.85;
  margin: 6px 10px 0 0;
  color: var(--parrot-blue);
}

/* Fan reaction / quote styling - use a Quote block in the editor for any
   line you want styled this way (e.g. fan comments, notable statements) */
.gi-entry-content blockquote{
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--parrot-coral);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0;
  font-style: italic;
  color: #4a453d;
  font-size: 14.5px;
}

/* Share buttons */
.gi-share-row{
  display: flex;
  gap: 10px;
  margin: 28px 0;
  flex-wrap: wrap;
}
.gi-share-btn{
  font-size: 12px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 20px;
  color: white !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.gi-share-btn.fb{ background: var(--parrot-blue); }
.gi-share-btn.wa{ background: var(--parrot-green); }
.gi-share-btn.tw{ background: #222; }

/* Prev / next post navigation - styling the theme's OWN built-in
   navigation (mh_magazine_lite_postnav). IMPORTANT: this theme uses a
   float-based column system (.mh-col-1-2), not flexbox/grid - we only
   add colors, spacing and rounded corners here, without changing how
   the boxes are laid out, or it breaks into single-letter-wide columns. */
.mh-post-nav{
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 32px;
}
.mh-post-nav-item{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
}
.mh-post-nav-item:hover{ border-color: var(--parrot-coral); }
.mh-post-nav-item img{
  border-radius: 8px;
  width: 52px;
  height: 52px;
  object-fit: cover;
}
.mh-post-nav span{
  color: var(--parrot-coral);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.mh-post-nav p{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}

@media (max-width: 600px){
  .mh-post-nav-item{ width: 100% !important; float: none !important; margin-left: 0 !important; margin-bottom: 14px; }
}


/* ============================================================
   SIDEBAR WIDGETS - card style so any widget you add under
   "Celebrities News" (Appearance > Widgets > Sidebar) matches
   automatically. Applies to image+text list widgets and general
   widget titles/spacing.
   ============================================================ */
#sidebar .widget,
.mh-sidebar .mh-widget{
  margin-bottom: 34px;
  border: none;
  background: transparent;
}
#sidebar .widget-title,
.mh-sidebar .mh-widget-title{
  font-family: 'Sora', sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  border-bottom: 2px solid var(--ink) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
#sidebar .widget-title::before,
.mh-sidebar .mh-widget-title::before{
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--parrot-coral);
  flex-shrink: 0;
}

/* Generic spacing for image+text list widgets (e.g. Celebrities News) */
.mh-sidebar .mh-widget img{
  border-radius: 8px;
}
.mh-sidebar .mh-widget ul li,
.mh-sidebar .mh-widget .textwidget p{
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.mh-sidebar .mh-widget ul li:last-child,
.mh-sidebar .mh-widget .textwidget p:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Gutenberg BLOCK widgets (e.g. "Latest Posts" block, "Heading" block)
   added via the block-based Widgets screen don't use the theme's
   before_title/mh-widget-title wrapper at all - they render their own
   core WordPress block markup. Targeting that directly here. */
.mh-sidebar .wp-block-heading{
  font-family: 'Sora', sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  border-bottom: 2px solid var(--ink) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mh-sidebar .wp-block-heading::before{
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--parrot-coral);
  flex-shrink: 0;
}

.mh-sidebar .wp-block-latest-posts{
  list-style: none;
  margin: 0;
  padding: 0;
}
.mh-sidebar .wp-block-latest-posts li,
.mh-sidebar .wp-block-latest-posts__post{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.mh-sidebar .wp-block-latest-posts li:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mh-sidebar .wp-block-latest-posts__featured-image{
  flex-shrink: 0;
  margin: 0;
}
.mh-sidebar .wp-block-latest-posts__featured-image img{
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.mh-sidebar .wp-block-latest-posts__post-title{
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  display: block;
}

/* ============================================================
   FOOTER WIDGETS - professional multi-column footer using the
   theme's existing footer-1 to footer-4 widget areas (set up via
   Appearance > Widgets in the dashboard, not hardcoded here).
   ============================================================ */
.mh-footer{
  background: var(--ink) !important;
  padding: 40px 25px 0 !important;
}
.mh-footer-widget-title{
  font-family: 'Sora', sans-serif;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--parrot-coral);
  padding-bottom: 10px;
  margin-bottom: 16px;
  display: inline-block;
}
.mh-footer-widget ul{ list-style: none; }
.mh-footer-widget ul li{ margin-bottom: 10px; }
.mh-footer-widget a{ font-size: 13.5px; opacity: 0.85; }
.mh-footer-widget a:hover{ opacity: 1; color: var(--parrot-coral) !important; }

/* Brand column content (paste the provided HTML into a Custom HTML
   widget in Footer 1) */
.gi-footer-brand{ display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 800; color: white; margin-bottom: 12px; }
.gi-footer-brand .dot{ color: var(--parrot-coral); }
.gi-footer-parrot{ width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--parrot-green) 0deg 200deg, var(--parrot-coral) 200deg 360deg); flex-shrink: 0; }
.gi-footer-tagline{ font-size: 13px; color: #a39c8e; line-height: 1.6; max-width: 260px; margin-bottom: 16px; }
.gi-footer-social{ display: flex; gap: 8px; }
.gi-footer-social a{ width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: white !important; text-decoration: none; font-size: 12px; font-weight: 700; opacity: 1 !important; }
.gi-footer-social a:hover{ background: var(--parrot-coral) !important; }

/* Newsletter column content (paste the provided HTML into a Custom
   HTML widget in Footer 4) */
.gi-newsletter-text{ font-size: 13px; color: #a39c8e; margin-bottom: 12px; line-height: 1.6; }
.gi-newsletter-form{ display: flex; border-radius: 8px; overflow: hidden; max-width: 280px; }
.gi-newsletter-form input{ flex: 1; border: none; padding: 10px 12px; font-size: 13px; font-family: 'Inter', sans-serif; outline: none; }
.gi-newsletter-form button{ background: var(--parrot-coral); color: white; border: none; padding: 0 16px; font-weight: 700; font-size: 12px; cursor: pointer; }