/*
 Theme Name:   Divi Child
 Theme URI:    https://www.elegantthemes.com/gallery/divi/
 Description: Child theme for EIC Al Masjid website
 Author:       EIC Al Masjid
 Template:     Divi
 Version:      1.0.0
*/

/* 
  All custom styles go below this line 
*/

/* ==============================
   EIC Design System (Blue)
   Single source of truth for Web + Apps
   ============================== */

:root {
  /* Brand */
  --eic-primary: #083D66;   /* Deep Marine Blue */
  --eic-surface: #E6F3F7;   /* Oceanic Soft Blue */
  --eic-accent: #0B8EC2;    /* Ocean Blue Accent */
  --eic-seafoam: #DFF6F3;   /* Seafoam Tint (sparingly) */
  --eic-cta: #0F172A;       /* Charcoal Navy */

  /* Neutrals */
  --eic-bg: #FAFAFA;
  --eic-surface-2: #F2F4F7;
  --eic-border: #E5E7EB;

  /* Text */
  --eic-text: #111827;
  --eic-text-2: #4A4A4A;
  --eic-muted: #6B7280;
  --eic-on-dark: #FFFFFF;

  /* UI */
  --eic-radius: 14px;
  --eic-radius-sm: 10px;
  --eic-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --eic-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
  --eic-focus: 0 0 0 3px rgba(11, 142, 194, 0.35);
}

/* Base */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--eic-bg);
  color: var(--eic-text);
}

/* Links */
a {
  color: var(--eic-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus {
  color: var(--eic-primary);
}

/* Visible focus for keyboard users */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--eic-focus);
  border-radius: 6px;
}

/* Typography helpers */
.eic-text-muted { color: var(--eic-muted) !important; }
.eic-text-secondary { color: var(--eic-text-2) !important; }
.eic-text-primary { color: var(--eic-primary) !important; }
.eic-text-accent { color: var(--eic-accent) !important; }

/* Background helpers */
.eic-bg-primary { background: var(--eic-primary) !important; color: var(--eic-on-dark) !important; }
.eic-bg-surface { background: var(--eic-surface) !important; }
.eic-bg-seafoam { background: var(--eic-seafoam) !important; }
.eic-bg-cta { background: var(--eic-cta) !important; color: var(--eic-on-dark) !important; }

/* Card */
.eic-card {
  background: #fff;
  border: 1px solid var(--eic-border);
  border-radius: var(--eic-radius);
  box-shadow: var(--eic-shadow-sm);
  overflow: hidden;
}

/* Buttons (works in Divi modules via class field) */
.eic-btn,
.eic-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.eic-btn:hover { transform: translateY(-1px); box-shadow: var(--eic-shadow-sm); }
.eic-btn:active { transform: translateY(0); box-shadow: none; }

.eic-btn-primary { background: var(--eic-primary); color: var(--eic-on-dark); }
.eic-btn-primary:hover { background: #062f4e; color: var(--eic-on-dark); }

.eic-btn-accent { background: var(--eic-accent); color: var(--eic-on-dark); }
.eic-btn-accent:hover { background: #097aa8; color: var(--eic-on-dark); }

.eic-btn-dark { background: var(--eic-cta); color: var(--eic-on-dark); }
.eic-btn-dark:hover { background: #0b1220; color: var(--eic-on-dark); }

.eic-btn-outline {
  background: transparent;
  color: var(--eic-primary);
  border-color: rgba(8, 61, 102, 0.25);
}
.eic-btn-outline:hover {
  background: rgba(8, 61, 102, 0.06);
  border-color: rgba(8, 61, 102, 0.35);
  color: var(--eic-primary);
}

/* Divi gentle defaults (kept light) */
#main-header,
#top-header {
  background: var(--eic-primary);
}

#main-header a,
#top-header a,
#main-header .et-menu a {
  color: var(--eic-on-dark);
}

#main-header a:hover,
#top-header a:hover,
#main-header .et-menu a:hover {
  color: rgba(255, 255, 255, 0.88);
}

/* Make Divi primary buttons align to the system where possible */
.et_pb_button,
.et_pb_button:visited {
  border-radius: 999px;
}

/* Optional: a consistent section surface class for Divi sections/rows */
.eic-section-surface {
  background: var(--eic-surface);
  border: 1px solid var(--eic-border);
  border-radius: var(--eic-radius);
}