/*
Theme Name: HS Helix Child
Theme URI: https://healthcaresuccess.com
Description: A clean child theme for HS Helix with organized customization structure. Easily customize colors, typography, and styles with comprehensive inline documentation. Perfect starting point for client customizations.
Author: Healthcare Success
Author URI: https://healthcaresuccess.com
Template: hshelix
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hs-helix-child
Tags: block-theme, full-site-editing, custom-colors, custom-fonts
*/

/**
 * ========================================
 * HS HELIX CHILD THEME
 * ========================================
 *
 * >>> See AI-STYLE-GUIDE.md for the current brand design tokens (colors,
 * typography, gradients) and example prompts before making styling
 * changes. That file supersedes any brand color/font values mentioned in
 * the older docs below. <<<
 * 
 * This child theme provides an organized structure for customizing
 * the HS Helix parent theme. All customization files are documented
 * with inline comments to guide you through the process.
 * 
 * FILE STRUCTURE:
 * ---------------
 * style.css (this file)    - Main child theme styles
 * functions.php            - PHP functionality and asset loading
 * theme.json              - Design token overrides (colors, fonts, spacing)
 * css/colors.css          - Color variable overrides
 * css/typography.css      - Typography styles
 * css/overrides.css       - Strong selector overrides
 * css/custom-styles.css   - Component customizations
 * 
 * DOCUMENTATION:
 * --------------
 * AI-STYLE-GUIDE.md       - Brand design tokens + AI prompt reference (READ THIS FIRST)
 * README.md               - Quick start and overview
 * CHILD-THEME-SETUP.md   - Comprehensive setup guide
 * THEME-JSON-GUIDE.md    - theme.json customization guide
 * COLOR-SYSTEM.md        - Color system documentation (legacy - see AI-STYLE-GUIDE.md)
 * TYPOGRAPHY-SYSTEM.md   - Typography documentation (legacy - see AI-STYLE-GUIDE.md)
 * 
 * CUSTOMIZATION WORKFLOW:
 * -----------------------
 * 1. Read CHILD-THEME-SETUP.md for complete guide
 * 2. Change colors in css/colors.css
 * 3. Change fonts in css/typography.css and functions.php
 * 4. Add component styles in css/custom-styles.css
 * 5. Override design tokens in theme.json (optional)
 * 
 * CASCADE PRIORITY:
 * -----------------
 * Parent theme → Child theme.json → Child style.css → Child custom CSS
 * 
 * Your customizations in CSS files (priority 30) will ALWAYS override
 * parent theme styles (priority 10). If you remove a customization,
 * the parent default will automatically be used.
 */

/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

/**
 * This section is for global styles that apply across your entire site.
 * For specific component customizations, use the organized CSS files:
 * - css/colors.css for color variables
 * - css/typography.css for typography
 * - css/custom-styles.css for components (buttons, headers, etc.)
 */

/* ==========================================================================
   EXAMPLE CUSTOMIZATIONS
   ========================================================================== */

/**
 * EXAMPLE: Override Primary Color
 * 
 * Uncomment to change the primary brand color used for links,
 * primary buttons, and accent elements.
 */
/*
:root {
  --wp--preset--color--primary: #2F8DDF;
}
*/

/**
 * EXAMPLE: Custom Container Max-Width
 * 
 * Uncomment to change the maximum width of content containers.
 */
/*
.wp-block-group__inner-container,
.wp-block-group.has-global-padding {
  max-width: 1440px;
}
*/

/**
 * EXAMPLE: Custom Link Styles
 * 
 * Uncomment to customize link appearance.
 */
/*
a {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--wp--preset--color--secondary);
  text-decoration: none;
}
*/

/**
 * EXAMPLE: Custom Focus Styles (Accessibility)
 * 
 * Uncomment to add custom focus outline for keyboard navigation.
 */
/*
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}
*/

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/**
 * Add utility classes here for quick styling in the block editor.
 * These classes can be added to blocks via "Additional CSS class(es)" field.
 */

/**
 * EXAMPLE: Text Alignment Utilities
 */
/*
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
*/

/**
 * EXAMPLE: Margin/Padding Utilities
 */
/*
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.pt-small { padding-top: 16px; }
.pb-small { padding-bottom: 16px; }
*/

/**
 * EXAMPLE: Display Utilities
 */
/*
.hide-mobile { 
  @media (max-width: 768px) { 
    display: none; 
  } 
}

.hide-desktop { 
  @media (min-width: 769px) { 
    display: none; 
  } 
}
*/

/* ==========================================================================
   END OF STYLE.CSS
   ========================================================================== */

/**
 * For more complex customizations, use the organized CSS files:
 * 
 * css/colors.css         - All color variable overrides in one place
 * css/typography.css     - Typography styles and font overrides
 * css/overrides.css      - Strong selector overrides for parent theme
 * css/custom-styles.css  - Component customizations (buttons, headers, etc.)
 * 
 * These files load AFTER this style.css (at priority 30), ensuring they
 * override everything. They also have extensive inline documentation to
 * guide you through customization.
 */