/* ============================================================
   HORSEPAGE.CSS — Master stylesheet for horse profile page
   
   Sections:
     1. Variables & Reset
     2. Master Layout
     3. Section A: Horse Info (public)
     4. Section B: Owner Defaults (owner-only)
     5. Section C: Past Performances (public)
     6. Section D: Race Finder / RAFI (logged-in only)
     7. Responsive Breakpoints
   
   Naming: All classes prefixed horsepage_ to avoid conflicts
   with existing site CSS (style.css, styleNEW.css, mike.css, 
   responsive.css).
   
   NOTE: This page loads inside a "loadanywhere" window which 
   may have a side menu stealing ~220px. Breakpoints account 
   for this.
   ============================================================ */

/* -------------------------------------------------------
   1. VARIABLES & RESET
   ------------------------------------------------------- */
:root {
  /* Core palette - matches existing site feel */
  --hp-bg:          #f5f5f5;
  --hp-card-bg:     #ffffff;
  --hp-border:      #ddd;
  --hp-border-dark: #bbb;
  --hp-text:        #333;
  --hp-text-muted:  #666;
  --hp-text-light:  #999;
  
  /* Accent colors */
  --hp-green:       #2e8b57;
  --hp-green-dark:  #246d45;
  --hp-blue:        #4a90e2;
  --hp-blue-dark:   #3a72b5;
  --hp-purple:      #6f42c1;
  --hp-red:         #dc3545;
  --hp-red-dark:    #c82333;
  --hp-yellow:      #ffc107;
  
  /* Surface colors (from original) */
  --hp-dirt:        #fff9c4;
  --hp-turf:        #c8e6c9;
  --hp-poly:        #ce93d8;
  --hp-sprint:      #e3f2fd;
  --hp-route:       #fce4ec;
  --hp-off:         #f3e5f5;
  
  /* PP row colors */
  --hp-pp-yellow:   #ffeb3b;
  --hp-pp-purple:   #e1bee7;
  
  /* Badge colors */
  --hp-badge-blue:  #90caf9;
  --hp-badge-green: #81c784;
  --hp-badge-olive: #9e9d24;
  --hp-badge-teal:  #26a69a;
  --hp-badge-brown: #8d6e63;
  --hp-badge-red:   #f44336;
  
  /* Spacing */
  --hp-gap:         16px;
  --hp-gap-sm:      10px;
  --hp-gap-xs:      6px;
  --hp-pad:         16px;
  --hp-pad-sm:      10px;
  --hp-radius:      6px;
  --hp-radius-sm:   4px;
  
  /* Typography */
  --hp-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --hp-font-mono:   'Courier New', monospace;
}

/* -------------------------------------------------------
   2. MASTER LAYOUT
   
   Page stacks vertically:
     [Horse Info + Stats + Dam/Owner Controls]  ← top grid
     [Past Performances]                        ← full width
     [Race Finder]                              ← full width
   ------------------------------------------------------- */
.horsepage_wrapper {
  font-family: var(--hp-font);
  color: var(--hp-text);
  line-height: 1.5;
  padding: 0;
  /* 🍞 BREADCRUMB: Force block layout so horsepage_top / owner / pps / rafi
     sections stack vertically. Without this, a parent flex container causes
     all 4 children to line up side-by-side. */
  display: block !important;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.horsepage_wrapper *,
.horsepage_wrapper *::before,
.horsepage_wrapper *::after {
  box-sizing: border-box;
}