/*
// ==========================================================
// NCC Custom Sub-theme Stylesheet (xara_ncc)
//
// Table of Contents:
// 1. Global Variables & Theme Palette
// 2. Core Layout & Structure (Sticky Footer)
// 3. Theme Part Overrides (Header, Footer, Menu, etc.)
// 4. Main Content Area Styles
// 5. Component: Leadership Profile Cards
// ==========================================================
*/


/*
// 1. GLOBAL VARIABLES & THEME PALETTE
// ----------------------------------------------------------
// This is the master color and font palette for the custom theme.
// Changing a color here will update it across the entire site.
*/
:root {
  /* Brand Colors */
  --primary: #D9DFEA;      /* Light grayish blue - Used for accents, borders */
  --secondary: #8A181A;      /* NCC Red - Used for strong accents, hover effects */
  --light: #21409A;        /* Royal Blue - Used for main dark backgrounds (header/footer) */
  --border: #1A204C;       /* Dark Indigo - Used for borders and darker elements */

  /* Unused/Inherited Variables (can be removed if not needed) */
  --dark: #628B82;
  --color-heading: #111111;
  --font-text: "Roboto", sans-serif;
  --font-heading: "Roboto", sans-serif;
  --shadow: 0 0 10px 4px var(--border);
  --shadow2: 0 0 4px 2px var(--border);
}

#drupal-live-announce {
  display: none !important;
}

/*
// 2. CORE LAYOUT & STRUCTURE
// ----------------------------------------------------------
// These rules handle the fundamental page layout, including the
// sticky footer and main background color.
*/

/* Set a modern, soft gray background for the entire page to reduce eye strain. */
body {
  background-color: #F0F2F5;
}

/*
 * The Definitive Sticky Footer Fix
 * This forces the main content area to expand and pushes the footer to the bottom.
 * The '!important' flags are necessary here to override conflicting layout rules
 * from the parent themes ('The X' and 'XARA').
*/
.dialog-off-canvas-main-canvas {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
.main-wrapper {
  flex-grow: 1 !important;
}


/*
// 3. THEME PART OVERRIDES
// ----------------------------------------------------------
// Specific tweaks to elements styled by the parent themes.
*/

/* -- Header & Menu -- */

/* Reduces the vertical padding in the header for a more compact look. */
.header-main {
  padding-top: 0.5rem !important;
  padding-bottom: 0rem !important;
}

/* Overrides the background color of the slide-out mobile menu panel. */
.menu-wrap,
.active-menu .menu-wrap {
  background-color: var(--border); /* Uses dark indigo for the background */
}

/* Styles the "hamburger" icon lines for the mobile menu. */
.mobile-menu span {
  background-color: var(--secondary); /* Top and bottom lines are red */
}
.mobile-menu span:nth-child(2) {
  background-color: var(--primary); /* Middle line is light grayish blue */
}

/* Ensures menu links are white inside the slide-out mobile menu. */
@media (min-width: 768px) {
  .menu-wrap .menu a {
    color: white;
  }
}

/* -- Footer -- */

/* Overrides the footer background color. */
.site-footer {
  background-color: var(--secondary); /* Sets the footer background to NCC Red */
}

/* -- Utilities -- */

/* Sets the background color for the 'scroll to top' button. */
.scrolltop {
  background: var(--light);
}


/*
// 4. MAIN CONTENT AREA STYLES
// ----------------------------------------------------------
// Styles for basic content elements like links within a standard page.
*/

/* Sets the default colors for links *only* within the main content area. */
.main-content a {
  color: var(--light) !important; /* Uses Royal Blue for links */
  text-decoration: underline;
}
.main-content a:visited {
  color: var(--border) !important; /* Visited links are a darker Indigo */
}
.main-content a:hover {
  color: var(--secondary) !important; /* Hovering turns the link NCC Red */
  text-decoration: none;
}


/*
// 5. COMPONENT: LEADERSHIP PROFILE CARDS
// ----------------------------------------------------------
// Styles for the custom profile card component on the leadership page.
*/

/* Adds some space above the entire leadership section. */
.leadership-section {
  margin-top: 1rem;
}

/* The main grid container for the cards. */
.leadership-section .leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  justify-content: center;
}

/* The individual profile card. */
.leadership-section .profile-card {
  background-color: var(--primary); /* CHANGED: Now uses theme variable for consistency. */
  border: 1px solid var(--border);   /* CHANGED: Uses theme variable. */
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 5.6em; /* Reserves a fixed space at the bottom for the footer text. */
}

/* The profile image. */
.leadership-section .profile-card-image img {
  max-width: 180px;
  height: auto;
  border-radius: 10%;
  margin: 0 auto 1rem auto;
  border: 2px solid var(--border); /* CHANGED: Uses theme variable. */
}

/* The main body of the card (name and title). */
.leadership-section .profile-card-body .profile-name {
  color: #000000; /* NOTE: Hard-coded black for readability on a light background. */
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0;
}
.leadership-section .profile-card-body .profile-title {
   color: var(--border); /* CHANGED: Uses theme variable. */
   font-style: italic;
   margin-top: 0.25rem;
}

/* The card footer, anchored to the bottom. */
.leadership-section .profile-card-footer {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}
.leadership-section .profile-card-footer p {
  font-size: 0.8rem;
  font-style: italic;
  color: #333333; /* NOTE: Hard-coded dark gray for readability on a light background. */
  margin: 0;
  line-height: 1.4;
}

/* Pseudo-element that creates a consistent horizontal line. */
.leadership-section .profile-card::after {
  content: '';
  position: absolute;
  bottom: 5.6em; /* Anchors the line just above the reserved footer space. */
  left: 25%;
  width: 50%;
  height: 1px;
  background-color: var(--border); /* CHANGED: Uses theme variable. */
  opacity: 0.5;
}