/*
 * SMS Strategic Media Services - Custom Site Styling
 * Applies the SMS brand style guide to site components
 */

/* Import SMS tokens first */
@import url('sms-tokens.css');

/* ===========================================
   GLOBAL TYPOGRAPHY
   =========================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--sms-slate);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--sms-black);
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--text-h1-line);
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
}

/* ===========================================
   BUTTONS - PRIMARY (SMS Red on Dark UI)
   =========================================== */

.btn-primary,
.btn-sms-primary {
  background-color: var(--sms-red-500);
  color: var(--sms-black);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  transition: all var(--transition-fast) var(--easing);
}

.btn-primary:hover,
.btn-sms-primary:hover {
  background-color: #E61224;
  color: var(--sms-black);
  transform: translateY(-1px);
}

.btn-primary:focus,
.btn-sms-primary:focus {
  outline: 2px solid var(--sms-red-500);
  outline-offset: 2px;
}

/* ===========================================
   BUTTONS - SECONDARY
   =========================================== */

.btn-secondary,
.btn-sms-secondary {
  background-color: transparent;
  color: var(--sms-red-500);
  border: 1px solid var(--sms-red-500);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  transition: all var(--transition-fast) var(--easing);
}

.btn-secondary:hover,
.btn-sms-secondary:hover {
  background-color: var(--sms-red-500);
  color: var(--sms-black);
}

/* On dark backgrounds */
.bg-dark .btn-secondary,
.bg-dark .btn-sms-secondary {
  color: var(--sms-white);
  border-color: var(--sms-white);
}

/* ===========================================
   CARDS - SMS Style
   =========================================== */

.card-sms,
.card-dark {
  background-color: var(--sms-graphite);
  border: 1px solid var(--sms-steel);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--sms-white);
}

.card-sms h3,
.card-dark h3 {
  color: var(--sms-white);
  margin-bottom: var(--space-3);
}

.card-sms .card-accent {
  border-bottom: 2px solid var(--sms-red-500);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

/* ===========================================
   NAVIGATION - SMS Style
   =========================================== */

.navbar-sms {
  background-color: var(--sms-black);
  border-bottom: 1px solid var(--sms-steel);
}

.navbar-sms .navbar-brand img {
  max-height: 40px;
}

.navbar-sms .nav-link {
  color: var(--sms-white);
  transition: color var(--transition-fast) var(--easing);
  position: relative;
}

.navbar-sms .nav-link:hover {
  color: var(--sms-red-500);
}

.navbar-sms .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--sms-red-500);
}

/* ===========================================
   FORMS - SMS Style
   =========================================== */

.form-control-sms {
  background-color: var(--sms-graphite);
  border: 1px solid var(--sms-steel);
  color: var(--sms-white);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.form-control-sms::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-control-sms:focus {
  border-color: var(--sms-red-500);
  box-shadow: 0 0 0 2px rgba(255, 20, 40, 0.2);
  outline: none;
}

.form-label-sms {
  color: var(--sms-white);
  font-weight: 500;
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
}

/* ===========================================
   SECTIONS - Dark Hero
   =========================================== */

.section-hero-dark {
  background-color: var(--sms-black);
  color: var(--sms-white);
  padding: var(--section-padding-desktop) var(--space-5);
  text-align: center;
}

.section-hero-dark h1 {
  color: var(--sms-white);
  margin-bottom: var(--space-4);
}

.section-hero-dark .subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto var(--space-6);
}

/* ===========================================
   LOGO & BRANDING
   =========================================== */

.logo-sms {
  max-width: 170px;
  height: auto;
}

.logo-sms-small {
  max-width: 120px;
  height: auto;
}

/* Clear space around logo */
.logo-container {
  padding: var(--space-4);
}

/* ===========================================
   ALERTS - SMS Style
   =========================================== */

.alert-sms-danger {
  background-color: rgba(184, 8, 17, 0.1);
  border: 1px solid var(--sms-red-700);
  color: var(--sms-red-700);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.alert-sms-success {
  background-color: rgba(25, 135, 84, 0.1);
  border: 1px solid #198754;
  color: #198754;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.alert-sms-info {
  background-color: rgba(13, 202, 240, 0.1);
  border: 1px solid #0dcaf0;
  color: #0284b0;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

/* ===========================================
   BACKGROUNDS
   =========================================== */

.bg-sms-black {
  background-color: var(--sms-black);
}

.bg-sms-charcoal {
  background-color: var(--sms-charcoal);
}

.bg-sms-graphite {
  background-color: var(--sms-graphite);
}

.bg-sms-mist {
  background-color: var(--sms-mist);
}

/* ===========================================
   TEXT COLORS
   =========================================== */

.text-sms-red {
  color: var(--sms-red-500);
}

.text-sms-red-dark {
  color: var(--sms-red-700);
}

.text-sms-white {
  color: var(--sms-white);
}

.text-sms-slate {
  color: var(--sms-slate);
}

/* ===========================================
   DATA VISUALIZATION ACCENTS
   =========================================== */

.chart-accent {
  color: var(--sms-red-500);
}

.data-highlight {
  background-color: var(--sms-red-500);
  color: var(--sms-black);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* ===========================================
   BRAND MOTIF - Interlocking Circles Pattern
   =========================================== */

.sms-pattern-bg {
  position: relative;
  overflow: hidden;
}

.sms-pattern-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.03;
  pointer-events: none;
  /* Add subtle ring pattern here if needed */
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 768px) {
  .section-hero-dark {
    padding: var(--section-padding-mobile) var(--space-4);
  }
  
  h1 {
    font-size: 36px;
  }
  
  h2 {
    font-size: 28px;
  }
  
  h3 {
    font-size: 20px;
  }
  
  .btn-primary,
  .btn-sms-primary,
  .btn-secondary,
  .btn-sms-secondary {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

.spacing-1 { margin: var(--space-1); }
.spacing-2 { margin: var(--space-2); }
.spacing-3 { margin: var(--space-3); }
.spacing-4 { margin: var(--space-4); }
.spacing-5 { margin: var(--space-5); }
.spacing-6 { margin: var(--space-6); }
.spacing-7 { margin: var(--space-7); }
.spacing-8 { margin: var(--space-8); }

.padding-1 { padding: var(--space-1); }
.padding-2 { padding: var(--space-2); }
.padding-3 { padding: var(--space-3); }
.padding-4 { padding: var(--space-4); }
.padding-5 { padding: var(--space-5); }
.padding-6 { padding: var(--space-6); }
.padding-7 { padding: var(--space-7); }
.padding-8 { padding: var(--space-8); }

.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }