/*
Theme Name: Child Care 15
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-15
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 the approved page's :root (<run>/index.html). Two layers: WordPress
 *  emits the primitive/semantic presets from theme.json as --wp--preset--* ; the --tfs-*
 *  aliases below are the ROLE-NAMED delivery layer the theme CSS + Tailwind reference. A
 *  per-site design overrides ONLY these semantic vars (inline, no rebuild).
 * ============================================================================
 */
:root {
    /* — colour · semantic (CMS + design-flow editable) — */
    --tfs-color-surface-page:      var(--wp--preset--color--surface-page, #f5f7fa);
    --tfs-color-surface-muted:     var(--wp--preset--color--surface-muted, #e7ebf2);
    --tfs-color-text-body:         var(--wp--preset--color--text-body, #1f2534);
    --tfs-color-action-primary:    var(--wp--preset--color--action-primary, #37456b);
    --tfs-color-action-secondary:  var(--wp--preset--color--action-secondary, #4a5470);
    --tfs-color-accent:            var(--wp--preset--color--accent, #5e7ca6);

    /* — colour · structural (fixed; the page's own tint/hairline/scrim tokens) — */
    --tfs-color-hairline:      rgba(29, 35, 52, 0.08);
    --tfs-color-border:        rgba(29, 35, 52, 0.12);
    --tfs-color-border-strong: rgba(29, 35, 52, 0.15);
    --tfs-color-scrim:         rgba(20, 24, 36, 0.72);

    /* — colour · label-on-fill (measured: agentic/tooling/design/contrast.mjs) — */
    --tfs-color-on-primary:    #ffffff;
    --tfs-color-on-primary-90: rgba(255, 255, 255, 0.9);
    --tfs-color-on-primary-80: rgba(255, 255, 255, 0.8);
    --tfs-color-on-primary-70: rgba(255, 255, 255, 0.7);
    --tfs-color-on-primary-60: rgba(255, 255, 255, 0.6);
    --tfs-color-on-accent:     #010407;

    /* — colour · tints/washes on the primary fill (fixed; the page's own on-primary set) — */
    --tfs-color-hairline-on-primary-25: rgba(255, 255, 255, 0.25);
    --tfs-color-hairline-on-primary-20: rgba(255, 255, 255, 0.2);
    --tfs-color-hairline-on-primary-15: rgba(255, 255, 255, 0.15);
    --tfs-color-hover-wash-on-primary:  rgba(255, 255, 255, 0.1);
    --tfs-color-surface-on-primary:     #ffffff;

    /* — typography · families — */
    --tfs-font-heading: var(--wp--preset--font-family--heading, "Inter Tight", sans-serif);
    --tfs-font-body:    var(--wp--preset--font-family--body, "Public Sans", sans-serif);

    /* — typography · fluid size scale (aliases to theme.json presets) — */
    --tfs-font-size-sm:  var(--wp--preset--font-size--sm, clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem));
    --tfs-font-size-base: var(--wp--preset--font-size--base, clamp(1rem, 0.97rem + 0.15vw, 1.125rem));
    --tfs-font-size-md:  var(--wp--preset--font-size--md, clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem));
    --tfs-font-size-lg:  var(--wp--preset--font-size--lg, clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem));
    --tfs-font-size-xl:  var(--wp--preset--font-size--xl, clamp(2.25rem, 1.9rem + 1.2vw, 3rem));
    --tfs-font-size-2xl: var(--wp--preset--font-size--2xl, clamp(2.75rem, 2.2rem + 1.8vw, 3.75rem));

    /* — shape — */
    --tfs-radius-sm: 2px;
    --tfs-radius-md: 4px;
    --tfs-radius-lg: 6px;
    --tfs-shadow-soft: 0 8px 24px -12px rgba(29, 35, 52, 0.18);
    --tfs-border-hairline: 1px solid rgba(29, 35, 52, 0.12);

    /* — spacing · 8px grid, WP slugs 20→80, 50 = base (aliases to theme.json presets) — */
    --tfs-space-20: var(--wp--preset--spacing--20, 0.5rem);
    --tfs-space-30: var(--wp--preset--spacing--30, 0.75rem);
    --tfs-space-40: var(--wp--preset--spacing--40, 1rem);
    --tfs-space-50: var(--wp--preset--spacing--50, 1.5rem);
    --tfs-space-60: var(--wp--preset--spacing--60, clamp(2rem, 1.6rem + 1.5vw, 2.75rem));
    --tfs-space-70: var(--wp--preset--spacing--70, clamp(3rem, 2.2rem + 3vw, 4.5rem));
    --tfs-space-80: var(--wp--preset--spacing--80, clamp(4rem, 2.8rem + 4.5vw, 6.5rem));
}

/*
 * Structural base — a straight port of the approved page's one <style> block. No design
 * opinion beyond what the page itself declares; Tailwind utilities carry everything else.
 */
body {
    font-family: var(--tfs-font-body);
    color: var(--tfs-color-text-body);
    background-color: var(--tfs-color-surface-page);
    overflow-x: hidden;
}

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

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

[id] {
    scroll-margin-top: 6rem;
}

.container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.container-wide {
    max-width: 1360px;
    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) {
    html {
        scroll-behavior: smooth;
    }
    .fade-up {
        animation: tfs-fade-up 0.6s ease-out both;
    }
}
@keyframes tfs-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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