/*
Theme Name:        Safe Space Counselling – Child
Theme URI:         https://dev.safespacecounselling.ca
Description:       Clean Kadence child theme for Safe Space Counselling. Works alongside Core Framework — no overrides. Only handles font-face loading, base global resets, and Gutenberg/Stackable structural helpers.
Author:            Bijal Nagar
Template:          kadence
Version:           2.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       safespace-child
*/

/* ============================================================
   WHAT THIS FILE DOES
   ─────────────────────────────────────────────────────────────
   ✅  @font-face  — loads Aesthetet Nova (heading font)
   ✅  Base resets — body font, line-height, link defaults
   ✅  Heading tags — font-family only (no size/color overrides)
   ✅  Image defaults — max-width, display block
   ✅  Stackable structural — a few layout alignment fixes
   ✅  Focus ring — accessibility outline

   ❌  NO color definitions   → Core Framework handles --primary etc.
   ❌  NO font-size values    → Core Framework handles --text-h1 etc.
   ❌  NO spacing values      → Core Framework handles --space-* etc.
   ❌  NO button styles       → Core Framework Components handles it
   ❌  NO card styles         → Core Framework Components handles it
   ❌  NO section padding     → Core Framework Components handles it
   ─────────────────────────────────────────────────────────────
   All colors, sizes, spacing, components → use Core Framework
   CSS variables and utility classes.
   ============================================================ */


/* ============================================================
   1. FONT FACE — Aesthetet Nova (Heading Font)
      Place font files in: /assets/fonts/
      Required files:
        AesthetNova-Regular.woff2
        AesthetNova-Italic.woff2
        AesthetNova-Bold.woff2
   ============================================================ */

/* ============================================================
   2. BASE — Body & Global
      Uses CF variables. No hardcoded values.
   ============================================================ */
body {
	font-family: var(--font-body, 'Roboto', sans-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@font-face {
	font-family: 'Aesthetet Nova';
	src: url('assets/fonts/AesthetNova-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aesthetet Nova';
	src: url('assets/fonts/AesthetNova-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aesthetet Nova';
	src: url('assets/fonts/AesthetNova-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aesthetet Nova';
	src: url('assets/fonts/AesthetNova-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}


/* ============================================================
   3. HEADINGS — Font family only
      Font sizes come from Core Framework (--text-h1 etc.)
      Colors come from Core Framework (--primary, --text-* etc.)
   ============================================================ */
h1, h2, h3, h4,
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4,
.stk-block-heading h1,
.stk-block-heading h2,
.stk-block-heading h3,
.stk-block-heading h4 {
	font-family: var('Aesthet Nova', Georgia, serif);
}

h5, h6,
.wp-block-heading h5,
.wp-block-heading h6,
.stk-block-heading h5,
.stk-block-heading h6 {
	font-family: var(--font-body, 'Roboto', sans-serif);
}


/* ============================================================
   4. IMAGES — Sensible defaults
   ============================================================ */
img {
	max-width: 100%;
	height: auto;
	display: block;
}


/* ============================================================
   5. FOCUS — Accessibility outline
      Uses CF primary color variable
   ============================================================ */
:focus-visible {
	outline: 2px solid var(--primary, #A2A183);
	outline-offset: 3px;
	border-radius: 3px;
}


/* ============================================================
   6. LINKS — Inherit CF color variables
   ============================================================ */
a {
	color: var(--tertiary, #9E5538);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--secondary, #D98560);
}


/* ============================================================
   7. KADENCE — Minimal structural overrides only
      Only fixes layout breakages, no visual overrides
   ============================================================ */

/* Prevent Kadence from adding extra side padding on full-width blocks */
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
	padding-left: 0;
	padding-right: 0;
}

/* Ensure Kadence header uses CF background variable if set */
.site-header {
	background-color: var(--bg-body, #FAF7F0);
}

/* Kadence footer background */
.site-footer {
	background-color: var(--bg-dark, #1A1614);
}


/* ============================================================
   8. STACKABLE — Structural fixes only
      No color, size, or spacing overrides
   ============================================================ */

/* Fix Stackable column blocks on mobile stacking */
@media (max-width: 991px) {
	.stk-block-columns > .stk-inner-blocks {
		flex-direction: column;
	}
}

/* Ensure Stackable images inherit rounded corners from CF */
.stk-block-image img {
	border-radius: inherit;
}


/* ============================================================
   9. GUTENBERG EDITOR — Load child styles in editor
      (editor-styles-wrapper is added via functions.php)
   ============================================================ */
.editor-styles-wrapper {
	font-family: var(--font-body, 'Roboto', sans-serif);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	font-family: var(--font-heading, 'Aesthet Nova', Georgia, serif);
}