/*
Theme Name:   Daisy
Theme URI:    https://scheidlerweb.com
Description:  An ultra-clean hybrid portfolio theme. Handles the outer PHP framework while handing layout control entirely to Gutenberg and theme.json. Integrated with Good by Design visual identity tokens.
Version:      2026.06.03.04
Author:       Scheidler Web Solutions
Text Domain:  daisy
Requires PHP: 7.4
Requires WP:  7.0
*/

:root {
    --grid-spacing: 30px; /* Update this once, it updates everywhere */
}

/* ==========================================================================
   1. COLOR MIX DESIGN TOKENS & ALIASES
   ========================================================================== */
:root {
  /* --- Primary Brand --- */
  --color-red:          #f5141c;
  --color-aqua:         #1db7d7;
  --color-pink:         #feaed2;

  /* --- Neutrals --- */
  --color-black:        #000000;
  --color-white:        #faf7ed; /* Brand Off-White */
  --color-true-white:   #ffffff; /* True white canvas prevents image framing lines */

  /* --- Secondary Brand --- */
  --color-orange:       #f98413;
  --color-green:        #26a154;
  --color-yellow:       #ffed36;
  --color-bright-pink:  #f533f7;
  --color-blue:         #2b47e0;
  --color-brown:        #873c37;
  --color-purple:       #47099c;
  --color-teal:         #80c9c4;

  /* --- Tint Calculations --- */
  --color-red-80:            color-mix(in srgb, var(--color-red) 80%, white);
  --color-red-60:            color-mix(in srgb, var(--color-red) 60%, white);
  --color-red-40:            color-mix(in srgb, var(--color-red) 40%, white);
  --color-red-20:            color-mix(in srgb, var(--color-red) 20%, white);

  --color-aqua-80:           color-mix(in srgb, var(--color-aqua) 80%, white);
  --color-aqua-60:           color-mix(in srgb, var(--color-aqua) 60%, white);
  --color-aqua-40:           color-mix(in srgb, var(--color-aqua) 40%, white);
  --color-aqua-20:           color-mix(in srgb, var(--color-aqua) 20%, white);

  --color-pink-80:           color-mix(in srgb, var(--color-pink) 80%, white);
  --color-pink-60:           color-mix(in srgb, var(--color-pink) 60%, white);
  --color-pink-40:           color-mix(in srgb, var(--color-pink) 40%, white);
  --color-pink-20:           color-mix(in srgb, var(--color-pink) 20%, white);

  --color-black-80:          color-mix(in srgb, var(--color-black) 80%, white);
  --color-black-60:          color-mix(in srgb, var(--color-black) 60%, white);
  --color-black-40:          color-mix(in srgb, var(--color-black) 40%, white);
  --color-black-20:          color-mix(in srgb, var(--color-black) 20%, white);

  --color-orange-80:         color-mix(in srgb, var(--color-orange) 80%, white);
  --color-orange-60:         color-mix(in srgb, var(--color-orange) 60%, white);
  --color-orange-40:         color-mix(in srgb, var(--color-orange) 40%, white);
  --color-orange-20:         color-mix(in srgb, var(--color-orange) 20%, white);

  --color-green-80:          color-mix(in srgb, var(--color-green) 80%, white);
  --color-green-60:          color-mix(in srgb, var(--color-green) 60%, white);
  --color-green-40:          color-mix(in srgb, var(--color-green) 40%, white);
  --color-green-20:          color-mix(in srgb, var(--color-green) 20%, white);

  --color-yellow-80:         color-mix(in srgb, var(--color-yellow) 80%, white);
  --color-yellow-60:         color-mix(in srgb, var(--color-yellow) 60%, white);
  --color-yellow-40:         color-mix(in srgb, var(--color-yellow) 40%, white);
  --color-yellow-20:         color-mix(in srgb, var(--color-yellow) 20%, white);

  --color-bright-pink-80:    color-mix(in srgb, var(--color-bright-pink) 80%, white);
  --color-bright-pink-60:    color-mix(in srgb, var(--color-bright-pink) 60%, white);
  --color-bright-pink-40:    color-mix(in srgb, var(--color-bright-pink) 40%, white);
  --color-bright-pink-20:    color-mix(in srgb, var(--color-bright-pink) 20%, white);

  --color-blue-80:           color-mix(in srgb, var(--color-blue) 80%, white);
  --color-blue-60:           color-mix(in srgb, var(--color-blue) 60%, white);
  --color-blue-40:           color-mix(in srgb, var(--color-blue) 40%, white);
  --color-blue-20:           color-mix(in srgb, var(--color-blue) 20%, white);

  --color-brown-80:          color-mix(in srgb, var(--color-brown) 80%, white);
  --color-brown-60:          color-mix(in srgb, var(--color-brown) 60%, white);
  --color-brown-40:          color-mix(in srgb, var(--color-brown) 40%, white);
  --color-brown-20:          color-mix(in srgb, var(--color-brown) 20%, white);

  --color-purple-80:         color-mix(in srgb, var(--color-purple) 80%, white);
  --color-purple-60:         color-mix(in srgb, var(--color-purple) 60%, white);
  --color-purple-40:         color-mix(in srgb, var(--color-purple) 40%, white);
  --color-purple-20:         color-mix(in srgb, var(--color-purple) 20%, white);

  --color-teal-80:           color-mix(in srgb, var(--color-teal) 80%, white);
  --color-teal-60:           color-mix(in srgb, var(--color-teal) 60%, white);
  --color-teal-40:           color-mix(in srgb, var(--color-teal) 40%, white);
  --color-teal-20:           color-mix(in srgb, var(--color-teal) 20%, white);

  /* --- Functional Semantic Aliases --- */
  --color-page-bg:           var(--color-true-white); 
  --color-text:              var(--color-black);
  --color-text-muted:        var(--color-black-60);
  --color-text-subtle:       var(--color-black-40);
  --color-border-default:    var(--color-black-20);
  --color-border-strong:     var(--color-black-60);

  /* --- Global Content Layout System Constants --- */
  --layout-content-max-width: 1320px;

  /* --- Animation Tokens --- */
  --transition-all-color:    color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   2. GLOBAL SETUP & LAYOUT RESETS
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--color-page-bg);
    color: var(--color-text);
}

*, ::before, ::after {
    box-sizing: inherit;
}

/* ==========================================================================
   3. HEADER ARCHITECTURE
   ========================================================================== */
.site-header {
    background-color: var(--color-page-bg);
    border-bottom: 1px solid var(--color-border-default);
    padding: 1.5rem 2rem;
}

.header-container {
    max-width: var(--layout-content-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-branding .site-title {
    color: var(--color-text);
    font-size: var(--wp--preset--typography--font-size--medium, 1.25rem);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: opacity 0.2s ease;
}

.site-branding .custom-logo-link {
    display: inline-block;
    line-height: 0;
}

.site-branding .custom-logo {
    display: block;
    max-width: 400px;
    width: 100%;
    height: auto;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}

.nav-menu a {
    color: var(--color-text-muted);
    font-size: var(--wp--preset--typography--font-size--normal, 1rem);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-all-color);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a {
    color: var(--color-red);
}

.site-branding a:hover {
    opacity: 0.8;
}

/* ==========================================================================
   4. CONTENT CANVAS & FOOTER Boundaries
   ========================================================================== */
.site-main {
    padding: 4rem 2rem;
}

/* * Safely constrain native blocks (paragraphs, lists, plain headers) 
 * inside the content container to follow our center horizontal alignment rule.
 */
.site-main > p,
.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > ul,
.site-main > ol {
    max-width: var(--layout-content-max-width);
    margin-left: auto;
    margin-right: auto;
}

h1.page-title.page-title--handwritten {
	margin: 0 auto;
}

.site-footer {
    background-color: var(--color-black-20);
    padding: 3rem 2rem;
    margin-top: auto;
    border-top: 1px solid var(--color-border-default);
}

.footer-container {
    max-width: var(--layout-content-max-width);
    margin: 0 auto;
    text-align: center;
}

.footer-container .copyright {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--wp--preset--typography--font-size--small, 0.875rem);
}

/* ==========================================================================
   5. SPECIFIC COMPONENT/UTILITY COLOR SCHEMES
   ========================================================================== */
.color-scheme-red         { background-color: var(--color-red-40); color: var(--color-black-80); border: 1px solid var(--color-red-80); }
.color-scheme-aqua        { background-color: var(--color-aqua-40); color: var(--color-black-80); border: 1px solid var(--color-aqua-80); }
.color-scheme-pink        { background-color: var(--color-pink-40); color: var(--color-black-80); border: 1px solid var(--color-pink-80); }
.color-scheme-black       { background-color: var(--color-black-40); color: var(--color-white); border: 1px solid var(--color-black-80); }
.color-scheme-orange      { background-color: var(--color-orange-40); color: var(--color-black-80); border: 1px solid var(--color-orange-80); }
.color-scheme-green       { background-color: var(--color-green-40); color: var(--color-black-80); border: 1px solid var(--color-green-80); }
.color-scheme-yellow      { background-color: var(--color-yellow-40); color: var(--color-black-80); border: 1px solid var(--color-yellow-80); }
.color-scheme-brightpink  { background-color: var(--color-bright-pink-40); color: var(--color-black-80); border: 1px solid var(--color-bright-pink-80); }
.color-scheme-blue        { background-color: var(--color-blue-40); color: var(--color-white); border: 1px solid var(--color-blue-80); }
.color-scheme-brown       { background-color: var(--color-brown-40); color: var(--color-black-80); border: 1px solid var(--color-brown-80); }
.color-scheme-purple      { background-color: var(--color-purple-40); color: var(--color-white); border: 1px solid var(--color-purple-80); }
.color-scheme-teal        { background-color: var(--color-teal-40); color: var(--color-black-80); border: 1px solid var(--color-teal-80); }


/* ==========================================================================
   6. PAGE TEMPLATES
   ========================================================================== */




/* Custom Overrides from Legacy Elements */
.page-id-146 h1.wp-block-post-title { 
    display: none; 
}