/*
Theme Name: Kadence Child - GleamGiveaways
Template: kadence
Description: GleamGiveaways visual redesign child theme
Version: 1.0
*/

/* =========================================================
   BRAND PALETTE
   ========================================================= */
:root {
	--gg-blue:          #2AABE2;
	--gg-blue-dark:     #1a8fc4;
	--gg-blue-light:    #e0f4fc;
	--gg-navy:          #1C2D50;
	--gg-orange:        #F4703A;
	--gg-orange-dark:   #d95c2a;
	--gg-green:         #92D247;
	--gg-yellow:        #FFD000;
	--gg-bg:            #F5F8FC;
	--gg-card-bg:       #FFFFFF;
	--gg-text:          #1C2D50;
	--gg-text-muted:    #6B7B99;
	--gg-border:        #E2EAF4;
}

/* =========================================================
   PAGE BACKGROUND — tinted (comp: body background var(--gg-bg))
   so white cards/sections visibly lift off the page.
   ========================================================= */
body { background: var(--gg-bg) !important; }

/* Homepage: unbox the page article — transparent background, no box shadow,
   and no inner padding on the content wrap — so sections sit directly on the
   tinted body and use the full content-container width. Scoped to .home so
   inner pages keep their normal boxed white card. */
.home .entry.content-bg.single-entry {
	background: transparent !important;
	box-shadow: none !important;
}
.home .entry-content-wrap {
	padding: 0 !important;
}

/* =========================================================
   HERO SECTION
   Full-bleed: the gradient band spans the whole viewport width
   (breaks out of the boxed content container) while the text
   stays centered. `overflow-x: clip` on the page wrapper below
   swallows the sub-pixel/scrollbar overflow the 100vw breakout
   would otherwise introduce — clip (unlike hidden/auto) does NOT
   create a scroll container, so the sticky header still works.
   ========================================================= */
.gg-hero {
	padding: 5.5rem 2.5rem 4rem !important;
	background: linear-gradient(180deg, var(--gg-blue-light) 0%, var(--gg-bg) 100%) !important;
	color: var(--gg-text) !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	border-radius: 0 !important;
}
.wp-site-blocks { overflow-x: clip; }
.gg-hero__title {
	color: var(--gg-text) !important;
	margin-top: 0 !important;
}
.gg-hero__subtitle {
	color: var(--gg-text-muted) !important;
}
.gg-hero__stat {
	color: var(--gg-text-muted) !important;
}
.gg-hero__stat .gg-stat-num {
	color: var(--gg-blue-dark) !important;
}
.gg-hero__kicker {
	color: var(--gg-green) !important;
}

/* =========================================================
   NEWSLETTER SECTION
   ========================================================= */
.gg-newsletter {
	background: var(--gg-blue) !important;
}
.gg-newsletter p {
	color: #d4f0fc !important;
}
.gg-sub-btn {
	background-image: linear-gradient(100deg, var(--gg-orange) 0%, var(--gg-orange) 33%, var(--gg-yellow) 67%, var(--gg-yellow) 100%) !important;
	background-size: 300% 100% !important;
	background-position: left bottom !important;
	color: #fff !important;
}
.gg-sub-btn:hover {
	background-position: right bottom !important;
}

/* =========================================================
   PROMOTE CTA BANNER
   Slim single-row banner; fully styled inline in gleam-setup.php
   (blue-light surface, hairline border, navy heading, sky-blue
   button). No color override needed here — leaving this empty so
   the inline token-based styling is the single source of truth.
   ========================================================= */

/* =========================================================
   SUBMIT A GIVEAWAY CTA
   ========================================================= */
.gg-submit-btn {
	background-image: linear-gradient(100deg, var(--gg-orange) 0%, var(--gg-orange) 33%, var(--gg-yellow) 67%, var(--gg-yellow) 100%) !important;
	background-size: 300% 100% !important;
	background-position: left bottom !important;
	color: #fff !important;
}
.gg-submit-btn:hover {
	background-position: right bottom !important;
	color: #fff !important;
}

/* =========================================================
   PRIMARY NAV — comp styling + reveal-on-scroll
   Styles the native Kadence header menu (no custom markup).
   ========================================================= */
/* muted slate top-level links (comp) instead of black, at a smaller size */
.header-navigation .header-menu-container > ul > li.menu-item > a {
	color: var(--gg-text-muted) !important;
	font-weight: 600 !important;
	font-size: .9rem !important;
	transition: color .15s ease !important;
}
.header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--gg-blue) !important;
}

/* "Submit a Giveaway" menu item → orange gradient button, white text (comp).
   Selector mirrors the muted-link rule's depth (+ [href]) so its white color
   out-specifies it — otherwise the muted-slate rule wins and the label greys. */
.header-navigation .header-menu-container > ul > li.menu-item > a[href*="submit-a-giveaway"],
.header-navigation .header-menu-container > ul > li.menu-item > a[href*="submit-a-giveaway"]:hover,
.header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a[href*="submit-a-giveaway"] {
	color: #fff !important;
	background-image: linear-gradient(100deg, var(--gg-orange) 0%, var(--gg-orange) 33%, var(--gg-yellow) 67%, var(--gg-yellow) 100%) !important;
	background-size: 300% 100% !important;
	background-position: left bottom !important;
	padding: .5rem 1.15rem !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	transition: background-position .55s ease !important;
}
.header-navigation .header-menu-container > ul > li.menu-item > a[href*="submit-a-giveaway"]:hover {
	background-position: right bottom !important;
}

/* Sticky header that hides on scroll-down and reveals on scroll-up.
   Kadence free has no reveal-on-scroll; JS toggles .gg-header-hidden
   (see child functions.php). `position: sticky` needs no spacer. */
#masthead {
	position: sticky;
	top: 0;
	transition: transform .35s ease;
	will-change: transform;
}
#masthead.gg-header-hidden {
	transform: translateY(-100%);
}

/* =========================================================
   SEARCH BAR
   ========================================================= */
.gg-search-form:focus-within {
	border-color: var(--gg-blue) !important;
	box-shadow: 0 0 0 3px rgba(42, 171, 226, .15) !important;
}
.gg-search-btn {
	background: var(--gg-blue) !important;
}
.gg-search-btn:hover {
	background: var(--gg-blue-dark) !important;
}
.gg-nav-search-btn:hover {
	color: var(--gg-blue) !important;
}

/* =========================================================
   SEARCH MODAL
   ========================================================= */
.gg-search-modal__inner {
	border-top: 3px solid var(--gg-blue);
}

/* =========================================================
   CATEGORY NAV PILLS
   ========================================================= */
.gg-cat-nav__item--active {
	background: var(--gg-blue) !important;
	border-color: var(--gg-blue) !important;
}
.gg-cat-nav__item--active:hover {
	background: var(--gg-blue-dark) !important;
	border-color: var(--gg-blue-dark) !important;
}

/* =========================================================
   GIVEAWAY CARDS
   ========================================================= */
.gg-card-img-ph {
	background: linear-gradient(135deg, var(--gg-blue), var(--gg-navy)) !important;
}
.gg-card-title a:hover {
	color: var(--gg-blue) !important;
}

/* =========================================================
   BADGES — uniform pills (comp): every card tag pill shares the
   neutral look (white bg, muted text, hairline border) rather than
   color-coding by type. Icons inside the pills are unaffected.
   ========================================================= */
.gg-badge-platform,
.gg-badge-category,
.gg-badge-country {
	background: #fff !important;
	color: var(--gg-text-muted) !important;
	border-color: var(--gg-border) !important;
}

/* =========================================================
   ENTER GIVEAWAY BUTTON — green (positive action), with the
   same gradient-slide hover as the orange CTAs. Kept in the
   green family so it stays clearly the "positive" action.
   ========================================================= */
.gg-enter-btn:not(.gg-enter-btn--ended) {
	background-image: linear-gradient(100deg, var(--gg-green) 0%, var(--gg-green) 33%, var(--gg-blue) 67%, var(--gg-blue) 100%) !important;
	background-size: 300% 100% !important;
	background-position: left bottom !important;
	transition: background-position .55s ease !important;
}
.gg-enter-btn:not(.gg-enter-btn--ended):hover {
	background-position: right bottom !important;
}

/* =========================================================
   SINGLE GIVEAWAY — image placeholder
   ========================================================= */
.gg-img-placeholder {
	background: linear-gradient(135deg, var(--gg-blue), var(--gg-navy)) !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.gg-pagination span.current,
.gg-pagination a.page-numbers:hover {
	background: var(--gg-blue) !important;
	color: #fff !important;
	border-color: var(--gg-blue) !important;
}

/* =========================================================
   NO RESULTS
   ========================================================= */
.gg-no-results__btn {
	background: var(--gg-blue) !important;
}
.gg-no-results__btn:hover {
	background: var(--gg-blue-dark) !important;
}

/* =========================================================
   EMAIL PREFS MODAL
   ========================================================= */
.gg-freq-btn:hover,
.gg-freq-btn.gg-active,
.gg-prize-btn:hover,
.gg-prize-btn.gg-active {
	border-color: var(--gg-blue) !important;
	background: var(--gg-blue-light) !important;
	color: var(--gg-navy) !important;
}
.gg-cat-label input[type=checkbox],
.gg-toggle input:checked + .gg-toggle-slider {
	accent-color: var(--gg-blue);
}
.gg-toggle input:checked + .gg-toggle-slider {
	background: var(--gg-blue) !important;
}
.gg-pref-save-btn {
	background: var(--gg-orange) !important;
}
.gg-pref-save-btn:hover {
	background: var(--gg-orange-dark) !important;
}

/* =========================================================
   SUBMIT-A-GIVEAWAY PAGE FORM
   (overrides inline <style> block in page content)
   ========================================================= */
.gg-submit-wrapper {
	background: #fff !important;
	border-color: var(--gg-border) !important;
}
.gg-submit-wrapper p.gg-note {
	color: var(--gg-navy) !important;
	background: var(--gg-blue-light) !important;
	border-left-color: var(--gg-blue) !important;
}
.gg-field input[type="url"],
.gg-field input[type="email"],
.gg-field input[type="text"] {
	border-color: var(--gg-border) !important;
}
.gg-field input:focus {
	border-color: var(--gg-blue) !important;
	box-shadow: 0 0 0 3px rgba(42, 171, 226, .15) !important;
}
.gg-check-label input[type="checkbox"] {
	accent-color: var(--gg-blue) !important;
}
.gg-submit-btn {
	background-image: linear-gradient(100deg, var(--gg-orange) 0%, var(--gg-orange) 33%, var(--gg-yellow) 67%, var(--gg-yellow) 100%) !important;
	background-size: 300% 100% !important;
	background-position: left bottom !important;
}
.gg-submit-btn:hover:not(:disabled) {
	background-position: right bottom !important;
}