/*
Theme Name: WhatsApp Group Links
Theme URI: https://justgrouplink.com/
Description: Child theme for Hello Elementor. Upgraded build with working navigation, dynamic category handling, proper pagination, and graceful 404 handling for expired invite links.
Author: ADi
Author URI: https://justgrouplink.com/
Template: hello-elementor
Version: 1.8.1
*/

/* Import parent theme styles */
@import url("../hello-elementor/style.css");

/* ---------------------------------------------------
   1.8.1 — Premium color palette + Elementor layout fixes
   These rules use !important sparingly and only where needed
   to override inline Elementor styles, since Elementor writes
   a lot of its styling directly into the page markup.
--------------------------------------------------- */
:root {
	--jgl-bg: #F7F5F0;          /* warm off-white replaces the flat tan/khaki background */
	--jgl-surface: #FFFFFF;      /* card/box background */
	--jgl-ink: #14171C;          /* near-black text, replaces pure black for a softer premium feel */
	--jgl-muted: #6B7280;        /* secondary text */
	--jgl-accent: #0E7C4A;       /* deep emerald green — keeps your existing brand green but richer */
	--jgl-accent-dark: #0A5C37;
	--jgl-gold: #B8912F;         /* small gold accents for a premium touch (borders, hover states) */
	--jgl-header: #0F1115;       /* near-black header/footer, slightly softened from pure #000 */
	--jgl-border: #E7E2D6;
}

body,
.elementor-section,
.elementor-widget-wrap {
	background-color: var(--jgl-bg) !important;
}

/* Header + footer bars */
.elementor-location-header,
header,
.site-header,
footer,
.elementor-location-footer {
	background-color: var(--jgl-header) !important;
}
.elementor-location-header a,
.elementor-location-header .elementor-heading-title,
footer a,
footer p {
	color: #E9E7E0 !important;
}
.elementor-location-header a:hover {
	color: var(--jgl-gold) !important;
}

/* Buttons — unify on the emerald/gold premium palette */
.elementor-button,
.elementor-button-link,
button,
input[type="submit"] {
	background-color: var(--jgl-accent) !important;
	border-color: var(--jgl-accent) !important;
	color: #fff !important;
	border-radius: 8px !important;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.elementor-button:hover,
button:hover {
	background-color: var(--jgl-accent-dark) !important;
	transform: translateY(-1px);
}

/* "Sponsored Groups & Channel" pill and similar call-out chips */
.elementor-widget-container a[href*="#elementor-action"],
.jgl-pill {
	background: var(--jgl-surface) !important;
	border: 1px solid var(--jgl-gold) !important;
	color: var(--jgl-ink) !important;
	border-radius: 999px !important;
	font-weight: 600;
}

/* Card / column fix — the sponsored-channel boxes were rendering with a
   lot of empty vertical space when an image is missing or still loading.
   Give every Elementor column a real background, border, and min-height
   so the grid reads as intentional cards instead of blank gaps. */
.elementor-column .elementor-widget-wrap {
	background-color: var(--jgl-surface);
	border: 1px solid var(--jgl-border);
	border-radius: 12px;
	padding: 16px;
}
.elementor-column img {
	border-radius: 8px;
	object-fit: cover;
}
.elementor-widget-image-box .elementor-image-box-img,
.elementor-widget-image .elementor-widget-container {
	min-height: 40px; /* prevents total collapse if an image fails to load */
}

/* Headings */
h1, h2, h3, h4,
.elementor-heading-title {
	color: var(--jgl-ink) !important;
}

/* Links inside body copy */
.elementor-widget-text-editor a {
	color: var(--jgl-accent) !important;
	text-decoration: underline;
}

/* ---------------------------------------------------
   1.8.0 additions
--------------------------------------------------- */

/* Breadcrumb bar (helps users and search engines understand nav depth,
   reduces bounce back to a 404 when a category page moves) */
.jgl-breadcrumbs {
	font-size: 0.85rem;
	padding: 10px 0;
	color: var(--jgl-muted);
}
.jgl-breadcrumbs a {
	color: var(--jgl-accent);
	text-decoration: none;
}
.jgl-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Category grid on archive pages */
.jgl-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 24px 0;
}
.jgl-category-card {
	border: 1px solid var(--jgl-border);
	background-color: var(--jgl-surface);
	border-radius: 10px;
	padding: 16px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.jgl-category-card:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.jgl-category-card h3 {
	margin: 0 0 6px;
	font-size: 1rem;
}
.jgl-category-card span {
	font-size: 0.8rem;
	color: #6b7280;
}

/* Pagination */
.jgl-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 32px 0;
}
.jgl-pagination a,
.jgl-pagination span {
	padding: 8px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}
.jgl-pagination .current {
	background: #111827;
	color: #fff;
	border-color: #111827;
}

/* 404 page */
.jgl-404 {
	max-width: 640px;
	margin: 60px auto;
	text-align: center;
	padding: 0 20px;
}
.jgl-404 h1 {
	font-size: 2.2rem;
	margin-bottom: 8px;
}
.jgl-404 p {
	color: #6b7280;
	margin-bottom: 24px;
}
.jgl-404 .jgl-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.jgl-404 .jgl-404-links a {
	padding: 10px 16px;
	border-radius: 8px;
	background: #111827;
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
}