/*
 Theme Name:   Hello Elementor Child – Baseball in the Attic
 Theme URI:    https://baseballinattic.com
 Description:  Child theme for Baseball in the Attic, built on Hello Elementor.
               All layout and design is handled by Elementor Pro.
               This file contains only global overrides and custom utility styles.
 Author:       Baseball in the Attic
 Author URI:   https://baseballinattic.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
 Tags:         custom, elementor, child-theme
*/

/* ============================================================
   GLOBAL CSS VARIABLES
   These mirror your Elementor Global Colors for use in
   any custom CSS snippets throughout the site.
   ============================================================ */
:root {
    --color-black:       #1a1a18;
    --color-charcoal:    #232320;
    --color-dark:        #2c2c28;
    --color-cream:       #f0e8d8;
    --color-cream-dim:   #c8bca8;
    --color-steel-blue:  #86A9BA;
    --color-steel-dim:   #5f8499;
    --color-red:         #8b2020;
    --color-white:       #ffffff;

    --font-display:      'Playfair Display', Georgia, serif;
    --font-heading:      'Oswald', 'Arial Narrow', sans-serif;
    --font-body:         'Source Serif 4', Georgia, serif;

    --transition-base:   0.25s ease;
    --max-width:         1280px;
}

/* ============================================================
   BASE RESETS & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    color: var(--color-cream);
    background-color: var(--color-black);
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

/* ============================================================
   TYPOGRAPHY OVERRIDES
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-cream);
}

p {
    font-family: var(--font-body);
    line-height: 1.75;
    color: var(--color-cream-dim);
}

a {
    color: var(--color-steel-blue);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-cream);
}

/* ============================================================
   ELEMENTOR OVERRIDES
   Fine-tuning Elementor's default output
   ============================================================ */

/* Remove default padding on main content area */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--max-width);
}

/* Ensure full-width sections bleed correctly */
.elementor-section.elementor-section-full_width .elementor-container {
    max-width: 100%;
}

/* Fix for Hello Elementor page title showing on some pages */
.page-title-hidden .entry-title,
.page-title-hidden h1.entry-title {
    display: none;
}

/* ============================================================
   GLOBAL BUTTON STYLES
   These apply to Elementor buttons that use "default" style
   ============================================================ */
.elementor-button {
    font-family: var(--font-heading) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    transition: all var(--transition-base) !important;
}

/* Primary button */
.elementor-button.elementor-button-primary,
.elementor-button[data-button-type="primary"] {
    background-color: var(--color-steel-blue) !important;
    color: var(--color-black) !important;
    border: 2px solid var(--color-steel-blue) !important;
}

.elementor-button.elementor-button-primary:hover {
    background-color: transparent !important;
    color: var(--color-steel-blue) !important;
}

/* Outline / ghost button */
.elementor-button.elementor-button-outline {
    background-color: transparent !important;
    color: var(--color-cream) !important;
    border: 2px solid var(--color-cream) !important;
}

.elementor-button.elementor-button-outline:hover {
    background-color: var(--color-cream) !important;
    color: var(--color-black) !important;
}

/* ============================================================
   UTILITY CLASSES
   Available for use in Elementor custom CSS class fields
   ============================================================ */

/* Text colors */
.text-cream       { color: var(--color-cream) !important; }
.text-cream-dim   { color: var(--color-cream-dim) !important; }
.text-steel-blue  { color: var(--color-steel-blue) !important; }
.text-red         { color: var(--color-red) !important; }

/* Background colors */
.bg-black         { background-color: var(--color-black) !important; }
.bg-charcoal      { background-color: var(--color-charcoal) !important; }
.bg-dark          { background-color: var(--color-dark) !important; }
.bg-cream         { background-color: var(--color-cream) !important; }
.bg-steel-blue    { background-color: var(--color-steel-blue) !important; }

/* Border utilities */
.border-steel     { border: 1px solid var(--color-steel-blue) !important; }
.border-cream     { border: 1px solid rgba(240,232,216,0.2) !important; }

/* Spacing helpers */
.no-margin        { margin: 0 !important; }
.no-padding       { padding: 0 !important; }

/* Font family helpers */
.font-display     { font-family: var(--font-display) !important; }
.font-heading     { font-family: var(--font-heading) !important; }
.font-body        { font-family: var(--font-body) !important; }

/* Letter spacing */
.ls-wide          { letter-spacing: 3px !important; }
.ls-wider         { letter-spacing: 5px !important; }

/* Text transform */
.text-upper       { text-transform: uppercase !important; }
.text-italic      { font-style: italic !important; }

/* Divider line utility */
.divider-steel {
    border: none;
    border-top: 1px solid var(--color-steel-blue);
    opacity: 0.3;
    margin: 0;
}

/* ============================================================
   GRAIN / TEXTURE OVERLAY
   Add class "grain-overlay" to any Elementor section
   to apply a subtle vintage grain texture on top
   ============================================================ */
.grain-overlay {
    position: relative;
}

.grain-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
}

/* Make sure content inside grain sections stays above overlay */
.grain-overlay > * {
    position: relative;
    z-index: 2;
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --max-width: 960px;
    }
}

@media (max-width: 768px) {
    h1 { font-size: clamp(28px, 8vw, 52px); }
    h2 { font-size: clamp(22px, 6vw, 38px); }
    h3 { font-size: clamp(18px, 5vw, 28px); }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--color-steel-blue);
    outline-offset: 3px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    z-index: 9999;
    padding: 10px 20px;
    background: var(--color-steel-blue);
    color: var(--color-black);
    font-family: var(--font-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px;
}

.skip-link:focus {
    top: 0;
}