/*
Theme Name: Vanguard Oasis Child
Theme URI: https://vanguardoasis.com
Description: Child theme for Divi, styled to match the Vanguard Oasis IT Services brand direction (navy / blue / teal, Montserrat + DM Sans).
Author: Vanguard Oasis IT Services
Template: Divi
Version: 1.0.0
Text Domain: vo-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Central place for the brand's colors, fonts, and shape language.
   Reuse these variables in any custom CSS you add per-module in Divi
   (Divi's "Custom CSS" fields accept var(--vo-color-blue) etc. directly).
   ========================================================================== */

:root {
  /* Brand colors */
  --vo-color-bg-light: #F7FAFD;   /* page background / light sections */
  --vo-color-navy:     #0B1833;   /* primary dark — footer, headings on light bg, dark sections */
  --vo-color-blue:     #1578CC;   /* primary accent — links, buttons, icons */
  --vo-color-teal:     #00E6D3;   /* secondary accent — gradient endpoint, highlights */
  --vo-color-white:    #FFFFFF;
  --vo-color-grey:     #8B919B;   /* muted text / secondary copy */
  --vo-color-border:   #DADCE0;   /* form borders, dividers */

  /* Gradient (hero sections, buttons, section dividers) */
  --vo-gradient-primary: linear-gradient(135deg, #1578CC 0%, #1579CE 33%, #00E6D3 66%, #0B1833 100%);

  /* Typography */
  --vo-font-heading: 'Montserrat', sans-serif;
  --vo-font-body: 'DM Sans', sans-serif;

  /* Shape language */
  --vo-radius-button: 28px;   /* pill-style buttons */
  --vo-radius-pill: 9999px;   /* fully rounded (tags, badges) */
  --vo-radius-card: 20px;     /* images, cards, thumbnails */
  --vo-radius-input: 8px;     /* form fields */

  /* Shadows */
  --vo-shadow-card: 0 4px 20px rgba(11, 24, 51, 0.08);
  --vo-shadow-header: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY
   ========================================================================== */

body,
.et_pb_module,
input,
textarea,
select {
  font-family: var(--vo-font-body);
  color: var(--vo-color-navy);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
  font-family: var(--vo-font-heading);
  font-weight: 700;
  color: var(--vo-color-navy);
}

a {
  color: var(--vo-color-blue);
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

body {
  background-color: var(--vo-color-bg-light);
}

/* ==========================================================================
   3. BUTTONS
   Reference site uses full pill-shaped CTAs. Applies to Divi's native
   button module/element and any WP core buttons used in blog content.
   ========================================================================== */

.et_pb_button,
.et_pb_button_wrapper .et_pb_button,
.wp-element-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  font-family: var(--vo-font-body);
  font-weight: 600;
  background-color: var(--vo-color-blue);
  color: var(--vo-color-white) !important;
  border: none;
  border-radius: var(--vo-radius-button);
  padding: 12px 28px;
  letter-spacing: 0.02em;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.et_pb_button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--vo-color-navy);
  transform: translateY(-1px);
}

/* Secondary / outline button — add class "vo-btn-outline" in the module's CSS Class field */
.vo-btn-outline {
  background-color: transparent !important;
  border: 2px solid var(--vo-color-blue) !important;
  color: var(--vo-color-blue) !important;
}

.vo-btn-outline:hover {
  background-color: var(--vo-color-blue) !important;
  color: var(--vo-color-white) !important;
}

/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */

#main-header,
.et-fixed-header {
  background-color: var(--vo-color-white);
  box-shadow: var(--vo-shadow-header);
}

#main-header .nav li a,
#top-menu li a {
  font-family: var(--vo-font-body);
  font-weight: 600;
  color: var(--vo-color-navy);
}

#main-header .nav li a:hover,
#top-menu li a:hover {
  color: var(--vo-color-blue);
}

/* Active nav item — underline treatment matching the reference site */
#top-menu li.current-menu-item > a {
  border-bottom: 2px solid var(--vo-color-blue);
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

#main-footer,
.et-l--footer,
footer.et-l {
  background-color: var(--vo-color-navy) !important;
  color: var(--vo-color-white);
}

#main-footer a,
.et-l--footer a {
  color: var(--vo-color-white);
}

#main-footer a:hover,
.et-l--footer a:hover {
  color: var(--vo-color-teal);
}

#main-footer h1, #main-footer h2, #main-footer h3,
#main-footer h4, #main-footer h5, #main-footer h6 {
  color: var(--vo-color-white);
}

/* ==========================================================================
   6. SECTION BACKGROUND UTILITIES
   Apply via each Divi Section/Row's "CSS Class" field.
   ========================================================================== */

.vo-section-navy {
  background-color: var(--vo-color-navy) !important;
  color: var(--vo-color-white);
}

.vo-section-navy h1, .vo-section-navy h2, .vo-section-navy h3,
.vo-section-navy h4, .vo-section-navy h5, .vo-section-navy h6,
.vo-section-navy p {
  color: var(--vo-color-white);
}

.vo-section-light {
  background-color: var(--vo-color-bg-light) !important;
}

.vo-section-gradient {
  background: var(--vo-gradient-primary) !important;
  color: var(--vo-color-white);
}

.vo-section-gradient h1, .vo-section-gradient h2, .vo-section-gradient h3,
.vo-section-gradient p {
  color: var(--vo-color-white);
}

/* Hero overlay treatment, matching the reference site's darkened background images */
.vo-hero-overlay {
  position: relative;
}

.vo-hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 24, 51, 0.6);
  z-index: 1;
}

.vo-hero-overlay > .et_pb_row {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   7. CARDS & IMAGES
   ========================================================================== */

.vo-card,
.et_pb_blurb,
.et_pb_post,
.et_pb_toggle {
  background-color: var(--vo-color-white);
  border-radius: var(--vo-radius-card);
  box-shadow: var(--vo-shadow-card);
}

.et_pb_image img,
.et_pb_post img,
.vo-rounded-image img,
img {
  border-radius: var(--vo-radius-card);
}

/* Circular images — add class "vo-avatar" for testimonial headshots */
.vo-avatar img {
  border-radius: var(--vo-radius-pill);
}

/* ==========================================================================
   8. FORMS
   Matches the reference site's contact-form styling.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select,
.et_pb_contact input,
.et_pb_contact textarea {
  background-color: var(--vo-color-white);
  border: 1px solid var(--vo-color-border);
  border-radius: var(--vo-radius-input);
  font-family: var(--vo-font-body);
  font-size: 16px;
  line-height: 1.6;
  padding: 12px 16px;
}

label {
  font-weight: 600;
  font-size: 14px;
}

/* ==========================================================================
   9. MISC
   ========================================================================== */

.vo-text-muted {
  color: var(--vo-color-grey);
}

.vo-text-teal {
  color: var(--vo-color-teal);
}

hr {
  border-top: 4px solid var(--vo-color-blue);
  max-width: 200px;
}