/*
 Theme Name:   GeneratePress Child - WhatsApp
 Theme URI:    https://generatepress.com
 Description:  Clean, fast GeneratePress child theme with WhatsApp-green UI, styled headings and a responsive post grid. CSS auto-loaded by GeneratePress; floating WhatsApp button added via functions.php.
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      2.3
*/

/* ================= Palette ================= */
:root{
  --wa-dark:#075E54;   /* header / footer */
  --wa-teal:#128C7E;   /* nav / links */
  --wa-green:#25D366;  /* accent / buttons */
  --page:#eef1f3;      /* clean page background */
  --card:#ffffff;
  --text:#1f2a30;
  --sub:#5b6b73;
  --line:#e6eaed;
}

/* ================= Base ================= */
body{
  background-color:var(--page);
  color:var(--text);
  font-family:-apple-system,"Segoe UI","Helvetica Neue",Roboto,Helvetica,Arial,"Noto Sans Devanagari",sans-serif;
  line-height:1.65;
}
a{ color:var(--wa-teal); text-decoration:none; }
a:hover,a:focus{ color:var(--wa-green); }
img{ max-width:100%; height:auto; }

/* ================= Header (WhatsApp bar) ================= */
.site-header{ background-color:var(--wa-dark) !important; }
.inside-header{ padding-top:16px; padding-bottom:16px; }
.main-title a,.site-title a{ color:#fff !important; font-weight:700; }
.site-description{ color:rgba(255,255,255,.82) !important; }

/* ================= Navigation (scoped to #site-navigation so the toggle
   wrapper — which ALSO has class .main-navigation — doesn't get the bg) ============ */
#site-navigation{ background-color:var(--wa-dark) !important; }
#site-navigation ul ul{ background-color:#064a42 !important; }  /* desktop submenu dropdown */
#site-navigation .main-nav ul li a{ color:#fff !important; font-weight:500; }
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-item > a{ color:#fff !important; }
#site-navigation .main-nav ul li:hover > a,
#site-navigation .main-nav ul li.sfHover > a,
#site-navigation .main-nav ul li:focus-within > a{
  background-color:rgba(255,255,255,.14) !important; color:#fff !important;
}
/* Active / current page — accessible green accent (filled green failed contrast) */
#site-navigation .main-nav ul li[class*="current-menu"] > a,
#site-navigation .main-nav ul li[class*="current_page"] > a{
  background-color:transparent !important;
  box-shadow:inset 0 -3px 0 var(--wa-green) !important;
  color:#fff !important;
}
/* Keyboard focus visibility (toggle/link) */
.menu-toggle:focus-visible{ outline:2px solid #fff !important; outline-offset:2px; }
#site-navigation .main-nav ul li a:focus-visible{ outline:2px solid #fff !important; outline-offset:-2px; }

/* ================= Content cards ================= */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.sidebar .widget,
.one-container .inside-article{
  background-color:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(16,24,32,.05);
}

/* ================= Headings & typography ================= */
.entry-header .entry-title,
.page-header h1{ font-size:2rem; line-height:1.25; font-weight:800; letter-spacing:-.01em; color:var(--text); }
.entry-content{ font-size:1.02rem; }
.entry-content h2{
  font-size:1.5rem; line-height:1.3; font-weight:700; color:var(--wa-dark);
  margin:1.7em 0 .55em; padding-bottom:.3em; border-bottom:2px solid var(--line);
}
.entry-content h3{ font-size:1.2rem; font-weight:700; color:var(--wa-teal); margin:1.35em 0 .45em; }
.entry-content h4{ font-size:1.05rem; font-weight:700; color:var(--text); margin:1.2em 0 .4em; }
.entry-content p{ margin-bottom:1.1em; }
.entry-content ul,.entry-content ol{ margin:0 0 1.15em 1.3em; }
.entry-content li{ margin-bottom:.4em; }
.entry-meta{ color:var(--sub); font-size:.88rem; }

/* ================= Content buttons (green pill) =================
   NOTE: no bare `button` selector here — that was matching GeneratePress
   native controls (.menu-toggle hamburger, .dropdown-menu-toggle caret,
   .wp-block-search__button) and turning them into green blobs. Scoped to
   genuine content CTAs only. Targets .wp-block-button__link, NOT
   .wp-element-button (GP puts that on the search submit). */
.entry-content button,
.entry-content input[type="button"],
.entry-content input[type="reset"],
.entry-content input[type="submit"],
.comment-form input[type="submit"],
.comment-form button[type="submit"],
.wpforms-submit,
.wp-block-button__link,
.button,
.read-more,
.more-link{
  background-color:var(--wa-green) !important; color:#fff !important;
  border:none; border-radius:22px; padding:.55em 1.3em; font-weight:600;
  display:inline-block; text-decoration:none;
}
.entry-content button:hover,
.entry-content input[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
.comment-form button[type="submit"]:hover,
.wpforms-submit:hover,
.wp-block-button__link:hover,
.button:hover,
.read-more:hover,
.more-link:hover{
  background-color:var(--wa-dark) !important; color:#fff !important;
}

/* ================= Mobile nav toggle (hamburger) — stylish, never a pill ================= */
.menu-toggle,
.main-navigation .menu-toggle{
  background-color:transparent !important;
  color:#fff !important;
  border:0 !important;
  border-radius:10px !important;
  box-shadow:none !important;
  font-weight:500 !important;
  padding:9px 13px !important;
  transition:background-color .2s ease;
}
.dropdown-menu-toggle,
.main-navigation .dropdown-menu-toggle{
  background-color:transparent !important; color:#fff !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.menu-toggle .gp-icon,.menu-toggle .gp-icon svg{
  width:26px; height:26px; color:#fff !important; fill:#fff !important;
}
.dropdown-menu-toggle .gp-icon,.dropdown-menu-toggle .gp-icon svg{ color:#fff !important; fill:#fff !important; }
.menu-toggle:hover,.menu-toggle:focus,.menu-toggle[aria-expanded="true"],
.dropdown-menu-toggle:hover,.dropdown-menu-toggle:focus{
  background-color:rgba(255,255,255,.16) !important; color:#fff !important;
}
/* GP nav-search toggle (rendered as a button in some builds) */
.main-navigation .search-item button,
.navigation-search button{
  background:transparent !important; color:#fff !important;
  border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important;
}

/* ================= Stylish mobile menu drawer (open state) =================
   Scoped to #site-navigation (the nav GP actually toggles) and styled on the
   .main-nav container so panel/shadow/animation apply to the drawer, not just
   the inner <ul>. */
@media (max-width:768px){
  #site-navigation.toggled .main-nav{
    background:var(--wa-dark) !important;
    box-shadow:0 12px 26px rgba(0,0,0,.22);
    border-top:1px solid rgba(255,255,255,.08);
    animation:gpwa-slidedown .25s ease;
  }
  #site-navigation.toggled .main-nav > ul{ padding:6px 0 10px; }
  #site-navigation .main-nav ul li a{
    padding:15px 22px !important;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-size:15.5px; font-weight:500;
  }
  #site-navigation.toggled .main-nav ul li:last-child > a{ border-bottom:0; }
  #site-navigation.toggled .main-nav ul li a:hover,
  #site-navigation.toggled .main-nav ul li:focus-within > a{
    background:rgba(255,255,255,.12) !important; padding-left:28px !important;
  }
  #site-navigation.toggled .main-nav ul li[class*="current-menu"] > a,
  #site-navigation.toggled .main-nav ul li[class*="current_page"] > a{
    background:transparent !important; box-shadow:inset 4px 0 0 var(--wa-green) !important;
  }
  #site-navigation.toggled .main-nav ul ul{ background:rgba(0,0,0,.16) !important; }
  #site-navigation.toggled .main-nav ul ul li a{ padding-left:40px !important; font-size:14.5px; }
  #site-navigation .dropdown-menu-toggle{ color:#fff !important; }
}
@keyframes gpwa-slidedown{ from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }
@media (prefers-reduced-motion:reduce){ #site-navigation.toggled .main-nav{ animation:none !important; } }

/* ================= Search submit (modest green button) ================= */
.wp-block-search__button,
.wp-block-search__button.wp-element-button,
.search-submit{
  background-color:var(--wa-green) !important; color:#fff !important;
  border:0 !important; border-radius:4px !important;
  padding:0 .9em !important; min-height:40px; line-height:1; font-weight:600;
  width:auto !important; display:inline-flex; align-items:center; justify-content:center;
}
.wp-block-search__button:hover,
.wp-block-search__button.wp-element-button:hover,
.search-submit:hover{ background-color:var(--wa-dark) !important; color:#fff !important; }
.wp-block-search.wp-block-search__icon-button .wp-block-search__button{
  padding:0 !important; width:40px !important; min-width:40px; border-radius:4px !important;
}

/* ================= POST GRID (home / archive / search) ================= */
.blog .site-main,
.archive .site-main,
.search-results .site-main{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:22px;
  align-items:start;
}
.blog .site-main > *,
.archive .site-main > *,
.search-results .site-main > *{ margin-bottom:0 !important; }
/* pagination spans full width */
.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation,
.search-results .site-main > .paging-navigation,
.site-main > nav.paging-navigation,
.site-main > .generate-pagination{ grid-column:1 / -1; }

.blog .inside-article,
.archive .inside-article,
.search-results .inside-article{
  display:flex; flex-direction:column; height:100%;
  padding:20px 22px; border-top:4px solid var(--wa-green);
  transition:transform .15s ease, box-shadow .15s ease;
}
.blog article:hover .inside-article,
.archive article:hover .inside-article{
  transform:translateY(-3px); box-shadow:0 10px 24px rgba(16,24,32,.12);
}
.blog .entry-title,
.archive .entry-title{ font-size:1.22rem; line-height:1.35; margin-bottom:.4em; }
.blog .entry-title a,
.archive .entry-title a{ color:var(--text); }
.blog .entry-title a:hover,
.archive .entry-title a:hover{ color:var(--wa-teal); }
.blog .entry-summary,
.archive .entry-summary{ color:var(--sub); flex:1; }
.blog .post-image,
.archive .post-image{ margin-bottom:14px; }
.blog .post-image img,
.archive .post-image img{ border-radius:10px; width:100%; object-fit:cover; }
.blog .read-more,
.archive .read-more{ align-self:flex-start; margin-top:14px; }

/* ================= Widgets ================= */
.widget-title{
  color:var(--wa-dark); border-bottom:2px solid var(--wa-green);
  padding-bottom:6px; margin-bottom:12px; font-size:1.05rem;
}

/* ================= Article tables ================= */
.entry-content table{ border-collapse:collapse; width:100%; margin:1.3em 0; font-size:.95rem; }
.entry-content table th{ background:var(--wa-teal); color:#fff; text-align:left; }
.entry-content table th,.entry-content table td{ border:1px solid var(--line); padding:10px 12px; }
.entry-content table tr:nth-child(even) td{ background:#f6faf9; }

/* ================= Blockquote ================= */
.entry-content blockquote{
  background:#f0f9f4; border-left:4px solid var(--wa-green);
  border-radius:8px; padding:12px 18px; margin:1.3em 0;
}

/* ================= Footer ================= */
.footer-widgets{ background-color:#0c4b43 !important; }
.footer-widgets .widget-title{ color:#fff; border-bottom-color:var(--wa-green); }
.footer-widgets,.footer-widgets a{ color:rgba(255,255,255,.88); }
.site-info{ background-color:var(--wa-dark) !important; color:rgba(255,255,255,.85); }
.site-info a{ color:var(--wa-green) !important; }

/* ================= Floating WhatsApp button ================= */
.wa-float{
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; align-items:center; gap:9px;
  background:var(--wa-green); color:#fff; font-weight:700; font-size:15px;
  padding:12px 20px; border-radius:30px; text-decoration:none;
  box-shadow:0 6px 18px rgba(37,211,102,.45);
}
.wa-float:hover{ color:#fff; background:#1eb457; }
.wa-float svg{ width:22px; height:22px; fill:#fff; }

/* ================= Responsive ================= */
@media (max-width:768px){
  .blog .site-main,.archive .site-main,.search-results .site-main{ grid-template-columns:1fr; gap:16px; }
  .entry-header .entry-title,.page-header h1{ font-size:1.6rem; }
  .entry-content h2{ font-size:1.3rem; }
  .wa-float{ font-size:13px; padding:10px 16px; bottom:14px; right:14px; }
}