/*
Theme Name: Hello Elementor Child
Theme URI: https://oshaoutreachinstitute.com
Description: Child theme for Hello Elementor
Author: OSHA Outreach Institute
Author URI: https://oshaoutreachinstitute.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* =============================================
   GLOBAL VARIABLES
   ============================================= */
:root {
  --color-navy: #0D2B4E;
  --color-royal-blue: #1565C0;
  --color-amber: #E8911E;
  --color-amber-hover: #C97A10;
  --color-white: #FFFFFF;
  --color-off-white: #F5F7FA;
  --color-charcoal: #1B2B3B;
  --color-steel: #6B7A8D;
  --font-primary: 'Plus Jakarta Sans', sans-serif;
}

/* =============================================
   BASE TYPOGRAPHY
   ============================================= */
body {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-charcoal);
  line-height: 1.75;
  background-color: var(--color-off-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-navy);
  line-height: 1.2;
}

h1 { font-size: 44px; font-weight: 700; }
h2 { font-size: 30px; font-weight: 600; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

p { margin-bottom: 1.2em; }

a {
  color: var(--color-royal-blue);
  text-decoration: none;
}
a:hover { color: var(--color-navy); }

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
  background-color: var(--color-amber);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--color-amber-hover);
  color: var(--color-white);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-royal-blue);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  padding: 11px 28px;
  border-radius: 6px;
  border: 2px solid var(--color-royal-blue);
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  background-color: var(--color-royal-blue);
  color: var(--color-white);
}

/* =============================================
   MOBILE TYPOGRAPHY
   ============================================= */
@media (max-width: 768px) {
  h1 { font-size: 30px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  body { font-size: 16px; }
}