/* ==========================================================================
   Prospero Child Theme - Custom Stylesheet
   ==========================================================================

   How this file is loaded
   -----------------------
   The parent theme automatically enqueues this file when the child theme is
   active and the file exists (see prospero_enqueue_scripts() in
   prospero-theme/functions.php). The handle is `prospero-child-custom` and
   it depends on `prospero-child-style`, so it loads AFTER:

       1. theme.json preset styles (generated by WordPress)
       2. prospero-main             (assets/css/main.css)
       3. prospero-dark-mode        (assets/css/dark-mode.css)
       4. prospero-shortcodes       (assets/css/shortcodes.css)
       5. prospero-blocks           (assets/css/blocks.css)
       6. prospero-child-style      (the child theme's style.css)
    -> 7. prospero-child-custom     (THIS FILE)

   …and BEFORE the inline customizer CSS (`prospero-dynamic-css`) that sets
   the :root variables from the Customizer. This means you can freely
   override parent styles here, and the Customizer colors will still win
   wherever the parent theme uses CSS variables.

   How to use it
   -------------
   Add any custom rules you don't want in style.css (page-specific tweaks,
   experimental styles, overrides you'd like to keep separate from the
   child theme's "theme header" file). You can reference the parent theme's
   CSS custom properties, e.g.:

       --color-primary, --color-secondary, --color-tertiary
       --color-text, --color-text-dark
       --color-background, --color-background-dark
       --color-highlight, --color-sticky-label-text
       --content-width
       --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg, --spacing-xl
       --prospero-btn-primary-bg,  --prospero-btn-primary-text,
       --prospero-btn-primary-border, --prospero-btn-primary-radius,
       --prospero-btn-primary-hover-bg, --prospero-btn-primary-hover-text
       (same for --prospero-btn-secondary-* and --prospero-btn-tertiary-*)

   Examples
   --------
   .my-section {
       background: var(--color-background);
       color: var(--color-text);
       padding: var(--spacing-lg);
   }

   body.dark-mode .my-section {
       background: var(--color-background-dark);
       color: var(--color-text-dark);
   }

   .featured-button {
       background: var(--prospero-btn-primary-bg);
       color: var(--prospero-btn-primary-text);
       border: 2px solid var(--prospero-btn-primary-border);
       border-radius: var(--prospero-btn-primary-radius);
   }

   Remove this comment block once you start adding your own styles, or keep
   it as a reference - it is ignored by the browser either way.
   ========================================================================== */