/**
 * Syro-Malabar Design System Override
 * Values from design_systems/syro_malabar/syromalabar_site_general_design_final.json
 * Applied over the static landing to align colors, typography, and components.
 */

:root {
  /* Primary */
  --syro-red: #dc3545;
  --syro-red-darker: #be1929;
  --syro-red-hover: #990b3f;
  --syro-red-light: #dc354533;
  --syro-blue: #0b2848;
  --syro-blue-secondary: #011e94;
  --syro-blue-light: #798daf;
  --syro-blue-dark: #16253c;
  /* Secondary */
  --syro-orange: #ff7903;
  --syro-purple: #6e1b48;
  --syro-maroon: #77121b;
  /* Neutrals */
  --syro-white: #ffffff;
  --syro-bg-gray: #f5f6f7;
  --syro-light-gray: #eaebef;
  --syro-text-gray: #818181;
  --syro-medium-gray: #7b869a;
  --syro-dark-gray: #506276;
  --syro-table-border: #eaebef;
  /* Typography */
  --syro-font-primary: 'Poppins', Arial, Helvetica, sans-serif;
  --syro-font-display: 'Playfair Display', serif;
  --syro-h1: 2.8rem;
  --syro-h2: 2.2rem;
  --syro-h3: 1.8rem;
  --syro-h4: 1.5rem;
  --syro-h6: 18px;
  --syro-body: 20px;
  --syro-label: 16px;
  --syro-small: 14px;
  --syro-section-title: 24px;
  /* Spacing */
  --syro-section-padding: 60px 15px;
  --syro-card-padding: 40px;
  --syro-grid-gap: 30px;
}

/* Body and base */
body {
  font-family: var(--syro-font-primary);
  background-color: var(--syro-bg-gray);
  color: var(--syro-blue);
}

/* Section titles - vertical label + red accent bar */
.section-title h6 {
  font-size: var(--syro-section-title);
  font-weight: 300;
  color: var(--syro-blue-light);
  letter-spacing: 5px;
}

/* Highlight/accent text (e.g. "The Malankara" in headings) */
.imp-color {
  color: var(--syro-red) !important;
}

/* Primary button - design system */
.primary-button {
  text-decoration: none;
  color: var(--syro-white);
  background: var(--syro-red);
  padding: 10px 20px;
  border-right: 7px solid var(--syro-red-darker);
  font-weight: 300;
  display: inline-block;
  transition: background 1s, border 1s;
}

.primary-button:hover {
  background: var(--syro-red-darker);
  border-right-width: 6px;
  border-right-color: var(--syro-red);
  color: var(--syro-white);
}

/* Main titles - use same font as Catholicos heading (Poppins) for consistency */
.main-title h1,
.main-title h2 {
  font-family: var(--syro-font-primary);
  font-size: var(--syro-h1);
  font-weight: 700;
  color: var(--syro-blue);
  margin-bottom: 10px;
}

.main-title h2 {
  font-size: var(--syro-h2);
}

/* About / content text */
.about-content p,
.cardinal-new-details p,
.event-title {
  font-size: var(--syro-body);
  color: var(--syro-dark-gray);
  font-weight: 400;
}

/* Notification / circular strip */
.Circularnotification,
.breaking-news {
  background: var(--syro-purple) !important;
}

/* Quick links / day hover */
.day:hover {
  background: var(--syro-red-light) !important;
}

.day {
  background: var(--syro-red-light);
}

/* Skin toggle (Updates) */
#skin-select #toggle {
  background: var(--syro-purple) !important;
}

/* Quick link cards - optional alignment with design system */
.quick-link-card .quick-title h6 {
  color: var(--syro-blue);
  font-weight: 600;
  font-size: var(--syro-h6);
}

/* Footer and header shadows (if needed) */
.dashboard-header,
.logo-container {
  box-shadow: 0 10px 25px -10px rgba(11, 40, 72, 0.49);
}

/* Card shadows */
.event-card,
.cardinal-new,
.about-us {
  box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px;
}

/* Scroll news title color */
.nnnew {
  color: var(--syro-maroon) !important;
  font-weight: bold;
}

@media (max-width: 991px) {
  .main-title h1,
  .main-title h2 {
    font-size: calc(1.5rem + 1vw);
  }
}

@media (max-width: 576px) {
  .section-title h6 {
    writing-mode: horizontal-tb;
    transform: none;
    position: relative;
    left: 0;
    font-size: 15px;
    margin-bottom: 10px;
  }
}

/* Show all nav items: THE CATHOLICATE, ADMINISTRATION, THE CHURCH, HOLY SYNOD, ECUMENICAL, DIOCESES, SAINTS (override style.css which hides 3rd and 7th) */
#syro-header-bar #topmenus li:nth-child(3),
#syro-header-bar #topmenus li:nth-child(7) {
  display: list-item !important;
}