/*
Theme Name:   KPSN Astra Child
Theme URI:    https://example.com/
Description:  Astra child theme with custom Blog Listing and Single Post templates matching the KPSN business-consultant design (orange/navy palette, card layout, mobile responsive).
Author:       Your Studio
Author URI:   https://example.com/
Template:     astra
Version:      1.0.0
Text Domain:  kpsn-astra-child
*/

/* ==========================================================================
   0. ROOT VARIABLES — pulled from the reference design
   ========================================================================== */
:root{
	--kpsn-orange:        #F2914A;
	--kpsn-orange-dark:   #E27B2E;
	--kpsn-navy:          #0B1B3B;
	--kpsn-navy-soft:     #14264B;
	--kpsn-text:          #1E2A45;
	--kpsn-muted:         #6B7280;
	--kpsn-bg:            #F7F8FA;
	--kpsn-white:         #FFFFFF;
	--kpsn-border:        #E7E9EE;
	--kpsn-radius:        14px;
	--kpsn-radius-sm:     8px;
	--kpsn-shadow:        0 10px 30px rgba(11,27,59,0.08);
	--kpsn-shadow-hover:  0 16px 40px rgba(11,27,59,0.14);
	--kpsn-font:          'Poppins', 'Inter', sans-serif;
}

/* Note: blog.css and single.css are enqueued directly in functions.php
   (not via @import here) — see kpsn_child_enqueue_assets(). Some
   caching/minification plugins strip @import when combining CSS, which
   was silently dropping all of this theme's styling in production. */

body{
	font-family: var(--kpsn-font);
	color: var(--kpsn-text);
	background: var(--kpsn-bg);
}

a{ transition: all .2s ease; }

/* ==========================================================================
   Safety net: our blog/single templates build their own hero, breadcrumb
   and layout and render full-width. If Astra's own "Advanced Header"
   banner, breadcrumb block, or sidebar column still render on top of ours
   (e.g. a caching plugin serving a stale page before functions.php filters
   took effect), force them out of the way rather than showing an empty
   duplicate strip next to our content.
   ========================================================================== */
body.single-post .ast-page-banner-area,
body.single-post .ast-breadcrumbs-wrap,
body.single-post .ast-header-breadcrumb,
body.single-post [class*="advanced-header"],
body.single-post [class*="page-header"],
body.single-post [class*="banner-area"],
body.blog .ast-page-banner-area,
body.blog .ast-breadcrumbs-wrap,
body.blog .ast-header-breadcrumb,
body.blog [class*="advanced-header"],
body.blog [class*="page-header"],
body.blog [class*="banner-area"],
body.archive .ast-page-banner-area,
body.archive .ast-breadcrumbs-wrap,
body.archive .ast-header-breadcrumb,
body.archive [class*="advanced-header"],
body.archive [class*="page-header"],
body.archive [class*="banner-area"],
body.category .ast-page-banner-area,
body.category .ast-breadcrumbs-wrap,
body.category .ast-header-breadcrumb,
body.category [class*="advanced-header"],
body.category [class*="page-header"],
body.category [class*="banner-area"]{
	display: none !important;
}
body.single-post .ast-container > .ast-row,
body.blog .ast-container > .ast-row,
body.archive .ast-container > .ast-row,
body.category .ast-container > .ast-row{
	display: block !important;
}
body.single-post #secondary,
body.blog #secondary,
body.archive #secondary,
body.category #secondary{
	display: none !important;
}
body.single-post #primary,
body.blog #primary,
body.archive #primary,
body.category #primary{
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Shared button style, reused on both templates */
.kpsn-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--kpsn-orange);
	color: #fff !important;
	padding: 13px 28px;
	border-radius: 40px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
}
.kpsn-btn:hover{
	background: var(--kpsn-orange-dark);
	transform: translateY(-2px);
}
.kpsn-btn.kpsn-btn-outline{
	background: transparent;
	color: var(--kpsn-navy) !important;
	border: 2px solid var(--kpsn-navy);
	padding: 11px 26px;
}
.kpsn-btn.kpsn-btn-outline:hover{
	background: var(--kpsn-navy);
	color: #fff !important;
}

.kpsn-eyebrow{
	display: inline-block;
	color: var(--kpsn-orange);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
}