/*
Theme Name: Child Care 14
Theme URI: https://example.com
Description: Generated by the TFS Theme Factory. The design surface (token values, enqueues, behaviour) is written by the build phase.
Author: TFS Systems
Author URI: https://aptecsol.com
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.4
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: child-care-14
Tags: custom-header, custom-menu, featured-images, flexible-header, full-width-template
*/

/*
 * ============================================================================
 *  TOKENS — the ONLY styling surface (LOCKED model, see .claude/rules/factory-theming.md).
 *  Two layers: WordPress emits the primitive/semantic presets from theme.json as
 *  --wp--preset--* ; the --tfs-* aliases below are the ROLE-NAMED delivery layer that
 *  the theme CSS + Tailwind reference. A per-site design overrides ONLY these ~semantic
 *  vars (inline, no rebuild). Each --tfs-* falls back to the approved page's own value if
 *  the preset is absent. Names are by ROLE, never by value. Values lifted verbatim from
 *  the approved <run>/index.html.
 * ============================================================================
 */
:root {
    /* — colour · semantic (CMS + design-flow editable) — */
    --tfs-color-surface-page:      var(--wp--preset--color--surface-page, hsl(45, 60%, 98%));
    --tfs-color-surface-muted:     var(--wp--preset--color--surface-muted, hsl(45, 70%, 94%));
    --tfs-color-text-body:         var(--wp--preset--color--text-body, hsl(28, 32%, 17%));
    --tfs-color-action-primary:    var(--wp--preset--color--action-primary, hsl(45, 95%, 51%));
    --tfs-color-action-secondary:  var(--wp--preset--color--action-secondary, hsl(20, 75%, 40%));
    --tfs-color-accent:            var(--wp--preset--color--accent, hsl(35, 85%, 28%));

    /* — colour · structural (fixed; not exposed to the CMS; lifted from the approved page) — */
    --tfs-color-text-on-primary:        hsl(28, 45%, 14%);
    --tfs-color-text-body-tint-strong:  rgba(56, 40, 25, 0.7);
    --tfs-color-text-body-tint-soft:    rgba(56, 40, 25, 0.1);
    --tfs-color-surface-page-tint:      rgba(255, 251, 240, 0.95);
    --tfs-color-accent-tint-strong:     rgba(56, 34, 4, 0.55);

    /* — typography · families (the approved page's webfonts) — */
    --tfs-font-heading: var(--wp--preset--font-family--heading, "Baloo 2", sans-serif);
    --tfs-font-body:    var(--wp--preset--font-family--body, "Mulish", sans-serif);

    /* — typography · fluid size scale (aliases to theme.json presets) — */
    --tfs-text-xs:  var(--wp--preset--font-size--x-small, .875rem);
    --tfs-text-sm:  var(--wp--preset--font-size--small, 1rem);
    --tfs-text-md:  var(--wp--preset--font-size--medium, 1.25rem);
    --tfs-text-lg:  var(--wp--preset--font-size--large, 1.75rem);
    --tfs-text-xl:  var(--wp--preset--font-size--x-large, 2.5rem);
    --tfs-text-2xl: var(--wp--preset--font-size--xx-large, 3.75rem);

    /* — spacing · 8px grid, slug 50 = base (aliases to theme.json presets) — */
    --tfs-space-2xs: var(--wp--preset--spacing--20, .25rem);
    --tfs-space-xs:  var(--wp--preset--spacing--30, .5rem);
    --tfs-space-sm:  var(--wp--preset--spacing--40, 1rem);
    --tfs-space-md:  var(--wp--preset--spacing--50, 1.5rem);
    --tfs-space-lg:  var(--wp--preset--spacing--60, clamp(2rem, 4vw, 3rem));
    --tfs-space-xl:  var(--wp--preset--spacing--70, clamp(3rem, 6vw, 5rem));
    --tfs-space-2xl: var(--wp--preset--spacing--80, clamp(4rem, 8vw, 8rem));

    /* — shape · radius + shadow (fixed structural, lifted from the approved page) — */
    --tfs-radius-lg: 2rem;
    --tfs-radius-md: 1.25rem;
    --tfs-radius-sm: 0.75rem;
    --tfs-shadow-soft: 0 14px 34px -12px rgba(60, 40, 10, 0.28);
}

/*
 * Structural base — ported verbatim from the approved page's one <style> block.
 * No design opinion beyond what the page itself declares; Tailwind utilities carry the look.
 */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--tfs-font-body);
    color: var(--tfs-color-text-body);
    background: var(--tfs-color-surface-page);
    margin: 0;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-family: var(--tfs-font-heading);
}

section {
    scroll-margin-top: 5.5rem;
}

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: var(--tfs-color-action-primary);
    color: var(--tfs-color-text-on-primary);
}

.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;
}

.fade-up.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

body.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}