/*
Theme Name: Child Care 18
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-18
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).
 *  Lifted verbatim from this run's approved index.html so the built theme reproduces it
 *  exactly. Two layers: WordPress emits the 6 editable semantic colours from theme.json as
 *  --wp--preset--* ; the --tfs-* aliases below are the ROLE-NAMED delivery layer the theme
 *  CSS + Tailwind reference. The structural colours below the first block are fixed (not
 *  exposed to the CMS) because the approved page has no preset for them.
 *
 *  Label exception (factory-theming.md § Tokens / contrast.mjs label_rule, run child-care-draft-19):
 *  --tfs-color-on-primary / on-secondary / on-accent hold the DARK label (#000404, "text_ink")
 *  the measured contrast rule requires for every one of these fills — not the page's own
 *  --tfs-color-on-secondary (#eef4f4, white), which label_rule's contrast.mjs reports as
 *  2.35:1 and FAILING. --tfs-color-on-accent is added (the page has none) because label_rule
 *  also names the accent fill.
 * ============================================================================
 */
:root {
    /* — colour · semantic (CMS + design-flow editable, theme.json preset-backed) — */
    --tfs-color-surface-page:      var(--wp--preset--color--surface-page, #0D1215);
    --tfs-color-surface-muted:     var(--wp--preset--color--surface-muted, #1C262C);
    --tfs-color-text-body:         var(--wp--preset--color--text-body, #B9C5C7);
    --tfs-color-action-primary:    var(--wp--preset--color--action-primary, #CF9A4F);
    --tfs-color-action-secondary:  var(--wp--preset--color--action-secondary, #7FB3AC);
    --tfs-color-accent:            var(--wp--preset--color--accent, #7FB3AC);

    /* — colour · structural (fixed; the approved page's own values, not exposed to the CMS) — */
    --tfs-color-surface-card:            #26323A;
    --tfs-color-surface-card-tint:       #203027;
    --tfs-color-surface-teal-band:       #163A35;
    --tfs-color-text-heading:            #EEF4F4;
    --tfs-color-text-muted:              #8FA0A3;
    --tfs-color-border-hairline:         #32404A;
    --tfs-color-border-hairline-strong:  #46565F;
    --tfs-color-scrim-navy:               rgba(10, 16, 19, .72);
    --tfs-color-scrim-navy-soft:          rgba(10, 16, 19, .4);

    /* — colour · labels (label_rule-governed — see note above; never the page's own on-secondary) — */
    --tfs-color-on-primary:   #000404;
    --tfs-color-on-secondary: #000404;
    --tfs-color-on-accent:    #000404;

    /* — typography · families (theme.json preset-backed) — */
    --tfs-font-heading: var(--wp--preset--font-family--heading, 'Geist Sans', sans-serif);
    --tfs-font-body:    var(--wp--preset--font-family--body, 'IBM Plex Sans', sans-serif);

    /* — typography · fluid size scale (aliases to theme.json presets, page's own clamp() values) — */
    --tfs-font-size-xs:  var(--wp--preset--font-size--x-small, clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem));
    --tfs-font-size-sm:  var(--wp--preset--font-size--small, clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem));
    --tfs-font-size-base: var(--wp--preset--font-size--medium, clamp(1rem, 0.98rem + 0.15vw, 1.05rem));
    --tfs-font-size-lg:  var(--wp--preset--font-size--large, clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem));
    --tfs-font-size-xl:  var(--wp--preset--font-size--x-large, clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem));
    --tfs-font-size-2xl: var(--wp--preset--font-size--xx-large, clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem));

    /* — radius (fixed; the approved page's own values) — */
    --tfs-radius-sm: 2px;
    --tfs-radius-md: 4px;

    /* — 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, .75rem);
    --tfs-space-md:  var(--wp--preset--spacing--50, 1rem);
    --tfs-space-lg:  var(--wp--preset--spacing--60, 1.5rem);
    --tfs-space-xl:  var(--wp--preset--spacing--70, clamp(2rem, 3vw, 2.5rem));
    --tfs-space-2xl: var(--wp--preset--spacing--80, clamp(2.5rem, 5vw, 4rem));
}

/*
 * Structural base — lifted verbatim from the approved page's own <style> block. No design
 * opinion added; Tailwind utilities (mirrored onto these tokens, see functions.php) carry the look.
 */
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
* { scroll-margin-top: 92px; }

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

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

.container-tfs { max-width: 1200px; margin-left: auto; margin-right: auto; }
.container-tfs-wide { max-width: 1440px; margin-left: auto; margin-right: auto; }
.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;
}

@media (prefers-reduced-motion: no-preference) {
    .submenu, .after\:transition-transform::after { transition-duration: .18s; }
}

/* WP admin-bar offset for the sticky header (factory-theme-generation.md §2) */
body.admin-bar header.sticky {
    top: 32px;
}

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