/*
Theme Name:   IndianBlogHelp GP Child
Theme URI:    https://indianbloghelp.com
Description:  Custom GeneratePress child theme for IndianBlogHelp.com. Extends the Hero & Footer visual language (deep blue gradient, glass badges, pill buttons, Open Sans) across every section of the site, including a sticky custom header (no topbar, no duplicate branding), a dedicated front page (paginated Latest Updates grid + Browse Categories), and Previous/Next post navigation. Hero & Footer SECTIONS themselves remain untouched external snippets.
Author:       Mr. Waghela
Author URI:   https://www.linkedin.com/in/mr-waghela
Template:     generatepress
Version:      1.4.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ibh-child
*/

/* ==========================================================================
   1. DESIGN TOKENS — extracted from the live Hero & Footer CSS.
   Every value below traces back to a real rule in those two sections.
   Do not hand-roll new colors/radii/shadows elsewhere — reuse these.
   ========================================================================== */
:root{

/* ---- Brand / background gradient (copied 1:1 from Hero & Footer wrapper) ---- */
--ibh-brand-1: #1e6fd9;          /* gradient start */
--ibh-brand-2: #0a4fa8;          /* gradient mid / "Primary" solid */
--ibh-brand-3: #083d8a;          /* gradient end, deepest navy */
--ibh-brand-gradient: linear-gradient(135deg, var(--ibh-brand-1) 0%, var(--ibh-brand-2) 60%, var(--ibh-brand-3) 100%);

/* ---- Action / CTA (hero newsletter button) ---- */
--ibh-action-1: #2563eb;
--ibh-action-2: #1d4ed8;
--ibh-action-gradient: linear-gradient(135deg, var(--ibh-action-1) 0%, var(--ibh-action-2) 100%);

/* ---- Accent (glow dividers, link hover, footer arrow bullets) ---- */
--ibh-accent: #3b82f6;
--ibh-accent-light: #93c5fd;

/* ---- Secondary decorative accents (hero orbs / profile ring) ---- */
--ibh-violet: #7c5cff;
--ibh-sky: #7dd3fc;
--ibh-green: #86efac;
--ibh-gold: #ffc107;

/* ---- Neutral text (used on white surfaces, e.g. inputs/cards) ---- */
--ibh-text-dark: #1e293b;
--ibh-text-body: #334155;
--ibh-text-muted: #64748b;
--ibh-text-placeholder: #94a3b8;
--ibh-white: #ffffff;

/* ---- Light-section backgrounds (extension — Hero/Footer are the only dark zones) ---- */
--ibh-bg-page: #f4f8fd;
--ibh-bg-card: #ffffff;
--ibh-bg-panel: #ebf4fc;
--ibh-border: rgba(10,79,168,.12);
--ibh-border-soft: rgba(10,79,168,.08);

/* ----- Border Radius Scale
SM → Small
MD → Medium
 LG → Large cards & sections
 Pill → Capsule buttons & badges
 Circle → Fully rounded elements
Change the values here to update the radius consistently across the entire theme.
---- */
--ibh-radius-pill: 50px;
--ibh-radius-lg: 16px;
--ibh-radius-md: 10px;
--ibh-radius-sm: 9px;
--ibh-radius-hairline: 999px;

/* ---- Shadow scale (blue-tinted, extends hero button / footer wrapper shadow language) ---- */
--ibh-shadow-sm: 0 2px 8px rgba(10,79,168,.08);
--ibh-shadow-md: 0 6px 20px rgba(10,79,168,.12);
--ibh-shadow-lg: 0 10px 30px rgba(10,79,168,.16);
--ibh-shadow-btn: 0 4px 16px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.15);
--ibh-shadow-btn-hover: 0 6px 24px rgba(37,99,235,.45);

/*=======================================================
 Spacing Scale

 These are reusable spacing values.

   Use them wherever spacing is needed:
   - Padding
   - Margin
   - Gap
   - Row Gap
   - Column Gap

   Example:
   var(--ibh-space-5) = 20px

   Choose the variable based on the amount of space needed,
   not on the CSS property being used.
==========================================================*/
--ibh-space-1: 4px;
--ibh-space-2: 8px;
--ibh-space-3: 12px;
--ibh-space-4: 16px;
--ibh-space-5: 20px;
--ibh-space-6: 26px;
--ibh-space-7: 32px;

/* --- Global Gap (Website Wide)
   Controls the default spacing across the website.
   Default: 4px | X = Left/Right | Y = Top/Bottom
--- */
--ibh-gap: 4px;      /* Default global spacing */

--ibh-gap-x: 4px;    /* Global Left / Right gap */
--ibh-gap-y: 20px;   /* Global Top / Bottom gap */

/* ---- Typography ----
   All font-related variables (family, sizes) live here.
   Use with var(--variable-name) in any file.
   Example: h2{ font-size: var(--ibh-fs-h2); }
   Example (single post, 17px): .entry-content{ font-size: var(--ibh-fs-single-md); }
--- */
--ibh-font: 'Open Sans', sans-serif;
--ibh-fs-h2: 26px;
--ibh-fs-h3: 24px;
--ibh-fs-body: 16px;
--ibh-fs-meta: 12px;
--ibh-fs-label: 11px;
--ibh-fs-micro: 10.5px;

--ibh-fs-single-sm: 1.09375rem; /* 17.5px */
--ibh-fs-single-lg: 1.125rem;   /* 18px */
	
--ibh-lh-single-a: 1.80;
--ibh-lh-single-alt: 1.85;
--ibh-lh-single-b: 1.90;

/* ---- Layout ---- */
--ibh-max-width: 1200px;
--ibh-transition: .18s ease;
}

/* ------------------------------------------------------------------
   Global Link Color
   ------------------------------------------------------------------ */
a{
color: var(--ibh-brand-2);
}

a:hover{
color: var(--ibh-action-1);
}

/* ==========================================================================
   2. GLOBAL RESET / TYPOGRAPHY — Open Sans only, everywhere. No exceptions.
   ========================================================================== */

/* ---- Horizontal scroll bug fix ----
   box-sizing:border-box on every element prevents width:100% + padding/border
   combinations (very common cause of an element silently overflowing its
   parent) anywhere in this child theme. overflow-x:hidden on html/body is a
   hard safety net: even if something outside this theme's control (a
   decorative element in the existing Hero/Footer snippet, a wide image, a
   plugin output) ever pushes past the viewport edge, the page itself will
   never show a horizontal scrollbar. break-word/overflow-wrap stops long
   unbroken Hindi/English strings or URLs from being the thing that pushes
   width out in the first place. */
*, *::before, *::after{
box-sizing: border-box;
}
html, body{
max-width: 100%;
overflow-x: hidden;
}
body, h1, h2, h3, h4, h5, h6, p, a, li, .entry-content{
overflow-wrap: break-word;
word-wrap: break-word;
}
img, video, iframe, embed, object, table{
max-width: 100%;
}
/* A genuinely too-wide table (lots of columns) scrolls internally instead
   of forcing the whole page to scroll sideways. The actual scroll container
   is a wrapper div added by ibh_wrap_tables() in functions.php — see there. */
.ibh-table-scroll{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
margin: var(--ibh-space-5) 0;
}
.ibh-table-scroll table{ margin: 0; }

body,
button,
input,
select,
textarea,
.site-content,
.entry-content,
.widget,
h1, h2, h3, h4, h5, h6 {
font-family: var(--ibh-font) !important;
}

body{
background-color: var(--ibh-bg-page);
color: var(--ibh-text-body);
font-size: var(--ibh-fs-body);
line-height: 1.7;
}

/* Site title / tagline area (kept neutral — header logo image is untouched) */
.main-title, .site-description{
font-family: var(--ibh-font) !important;
}

a{
color: var(--ibh-brand-2);
transition: color var(--ibh-transition);
}
a:hover{ color: var(--ibh-accent); }

h2{ font-size: var(--ibh-fs-h2); font-weight: 800; color: var(--ibh-text-dark); line-height: 1.3; letter-spacing: -0.01em; }
h3{ font-size: var(--ibh-fs-h3); font-weight: 700; color: var(--ibh-text-dark); line-height: 1.35; }

/* ==========================================================================
   2b. MOBILE CONTENT-WIDTH FIX (GP core gap, not this child theme's fault).
   GeneratePress's own mobile reset for #primary/.content-area width is
   scoped to ".container" (the "Same Container" layout option) — but this
   site uses GP's actual DEFAULT layout, "Separate Containers", which never
   gets that reset. The unconditional inline CSS GP outputs in <head>
   (.content-area{width:70%}) therefore stays in effect on mobile too,
   leaving #primary at 70% width with ~30% empty space to its right once
   .site-content switches to flex-direction:column below 768px.
   This rule forces both the content column and the sidebar to full width
   on mobile, regardless of which container layout is active. Desktop is
   untouched — this is wrapped in a mobile-only media query.
   ========================================================================== */
@media (max-width: 768px) {
#primary,
.content-area,
#right-sidebar,
.is-right-sidebar,
.sidebar {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}

/* ==========================================================================
   3. THE 6px GLOBAL SPACING RULE (most important rule of this project)
   - Content area side padding: max 6px, everywhere outside Hero/Footer.
   - Outer gap/margin between sibling cards, widgets, boxes, images: max 6px.
   - Internal padding *inside* a single card stays on the normal spacing
     scale above (16–20px) so text never touches an edge.
   ========================================================================== */
.site-content,
.site-main,
.grid-container,
#primary,
#right-sidebar,
.inside-article,
.entry-content,
.comments-area,
.search-results-wrap,
.ibh-archive-wrap{
padding-left: var(--ibh-gap) !important;
padding-right: var(--ibh-gap) !important;
box-sizing: border-box;
}

.grid-container{
max-width: var(--ibh-max-width) !important;
}

/* Generic outer-gap helper applied to every grid/flex collection of cards */
.ibh-card-grid,
.ibh-widget-stack,
.ibh-related-grid,
.ibh-search-grid{
gap: var(--ibh-gap) !important;
}

.ibh-card-grid > *,
.ibh-widget-stack > *,
.ibh-related-grid > *,
.ibh-search-grid > *{
margin: 0 0 var(--ibh-gap) 0 !important;
}
.ibh-card-grid > *:last-child,
.ibh-widget-stack > *:last-child,
.ibh-related-grid > *:last-child,
.ibh-search-grid > *:last-child{
margin-bottom: 0 !important;
}

/* Images inside content never get more than the 6px outer breathing room.
   NOTE: .ibh-author-box img is deliberately excluded — the author avatar
   has its own dedicated circular styling in components.css, and this
   generic rule's border-radius:16px + margins was overriding it, causing
   the avatar to look like it had a square frame/padding around it. */
.entry-content img,
.ibh-card img{
margin-top: var(--ibh-gap);
margin-bottom: var(--ibh-gap);
border-radius: var(--ibh-radius-lg);
max-width: 100%;
height: auto;
}

/* ------------------------------------------------------------------
   Emoji Fix
   Keeps WordPress emojis inline with text and removes image styling
   (border, shadow, radius) from emojis only.
   ------------------------------------------------------------------ */
.entry-content img.emoji,
.entry-content .emoji{
display:inline !important;
float:none !important;
margin:0 4px !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
position:relative;
top:0;
}

/* Focus states kept visible for accessibility, styled with brand accent */
a:focus-visible,
button:focus-visible,
input:focus-visible{
outline: 2px solid var(--ibh-accent);
outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
	*{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}