/**
 * ===================================================
 * Archaeology Festival Identity
 * Purpose: Style Overrides for archaeology festival
 * Usage: These were gathered from Carla and Tulsi
 * ===================================================
 */
 :root {
    /* ===== Brand Colors ===== */
    /* Primary color palette */
    --primary: #1517bd;          /* Maroon/dark red – primary brand color */
    --primary-dark: #080521;     /* Darker maroon for hover states, borders */
    --secondary: #767676;        /* Gray – accent color */
    --highlight-color: #f9f0ec;  /* Light pink – subtle backgrounds, accents */
    
    /* Extended color palette - brand-specific accent colors */
    --accent-1: #74160c;         /* Dark gray - used in footer */
    --accent-2: #2a2a2a;         /* Slightly darker gray - used in footer bottom */
    --accent-3: var(--secondary); /* Same as secondary - Gray */
    
    /* Functional UI colors */
    --ui-light: #ffffff;         /* White - main page background */
    --ui-light-alt: #f5f5f5;     /* Light gray - alternative background */
    --ui-dark: #111111;          /* Dark gray - text color */
    --ui-mid: #cccccc;           /* Light gray for subtle borders */
    --shadow-color: rgba(0,0,0,0.15); /* For shadows and overlays */
    --button-text-color: #ffffff; /* Text color for buttons */

    /* NEW: Color relationship variables - CRITICAL FOR READABILITY */
    /* These ensure text and interactive elements remain visible regardless of background */
    --text-on-primary: #ffffff;       /* Text that appears ON primary color background */
    --text-on-primary-dark: #ffffff;  /* Text that appears ON primary-dark background */
    --text-on-secondary: #ffffff;     /* Text that appears ON secondary color background */
    --text-on-ui-light: var(--ui-dark); /* Text that appears ON light backgrounds */
    --text-on-ui-light-alt: var(--ui-dark); /* Text that appears ON light-alt backgrounds */
    --text-on-accent-1: #ffffff;      /* Text that appears ON accent-1 background */
    --text-on-accent-2: #ffffff;      /* Text that appears ON accent-2 background */
    
    /* NEW: Interactive element colors - ENSURES VISIBILITY */
    --interactive-on-primary: var(--highlight-color);     /* Interactive elements on primary */
    --interactive-hover-on-primary: var(--ui-light);      /* Hover state on primary */
    --interactive-on-primary-dark: var(--highlight-color); /* Interactive elements on primary-dark */
    --interactive-hover-on-primary-dark: var(--ui-light);  /* Hover state on primary-dark */
    --interactive-on-accent-1: var(--highlight-color);    /* Interactive elements on accent-1 */
    --interactive-hover-on-accent-1: var(--ui-light);     /* Hover state on accent-1 */
    --interactive-on-light: var(--primary);               /* Interactive elements on light */
    --interactive-hover-on-light: var(--primary-dark);    /* Hover state on light */
    
    /* ===== Background Applications ===== */
    --background-body: var(--ui-light);
    --background-alt: var(--ui-light-alt);
    
    /* Header Backgrounds */
    --background-header-top-bar: var(--accent-2); 
    --background-header-main-bar: var(--primary); /* the blue */
    
    /* Footer Backgrounds */
    --background-footer-top: var(--accent-1);     /* matches BSA site */
    --background-footer-bottom: var(--accent-2);  /* Slightly darker gray */
    
    /* ===== Text Colors ===== */
    --text-color: var(--ui-dark);                 /* Main text color - dark gray */
    --heading-color: var(--primary);              /* Heading color - maroon */
    
    /* Link Colors */
    --link-color: var(--primary);                 /* Link color - maroon */
    --link-hover-color: var(--primary-dark);      /* Link hover - darker maroon */
    
    /* Header Text Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --header-top-bar-text-color: var(--text-on-accent-1);
    --header-top-bar-link-color: var(--text-on-accent-1);
    --header-top-bar-link-hover-color: var(--interactive-on-accent-1);
    
    --header-main-bar-text-color: var(--text-on-primary);
    --header-main-bar-link-color: var(--text-on-primary);
    --header-main-bar-link-hover-color: var(--interactive-on-primary);
    
    --site-title-color: var(--text-on-primary);
    --site-title-hover-color: var(--interactive-on-primary);

    /* Footer Text Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --background-footer-top-text-color: var(--text-on-accent-1);     
    --background-footer-bottom-text-color: var(--text-on-accent-2);
    
    /* Navigation Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --nav-text-color: var(--text-on-primary);
    --nav-indicator-color: var(--text-on-primary);
    --nav-hover-color: var(--interactive-on-primary);
    --nav-hover-indicator-color: var(--interactive-on-primary);
    
    /* ===== Typography ===== */
    --font-body: 'Noto Sans', sans-serif;         /* Default text */
    --font-headings: 'Noto Sans', sans-serif;    /* Headings (h1–h6) */
    --font-size: 1rem;                            /* Base font size */
    --font-size-small: 0.875rem;                  /* Secondary text (meta) */
    --line-height: 1.6;
    --heading-line-height: 1.25;
    
    /* ===== Layout & Spacing ===== */
    --container-max-width: 1280px;                /* Width of main container */
    --content-spacing: 2rem;                      /* Spacing between major content sections */
    --header-vertical-padding: 1.5rem;            /* Vertical padding in header */
    --footer-top-padding-top: 2rem;               /* Top padding for footer top */
    --footer-top-padding-bottom: 1rem;            /* Bottom padding for footer top */
    --footer-bottom-padding: 2rem;                /* Vertical padding for footer bottom */
    
    /* ===== Borders & Shadows ===== */
    --border-color: var(--ui-mid);                /* Light gray for subtle borders */
    --border-accent: var(--primary);              /* Maroon for accent borders */
    --card-shadow: 0px 1px 6px var(--shadow-color); /* Shadow for card-like elements */
    --border-radius: 4px;                         /* Rounded corners for buttons and elements */

}

/**
 * ===================================================
 * Hero Banner Styles
 * Purpose: Full-width hero banner for main content
 * ===================================================
 */

/* Hide breadcrumbs on pages with hero banner */
.breadcrumbs {
    display: none;
}

/* Remove top spacing from main content container */
#main-content.container {
    padding-top: 0;
    margin-top: 0;
}

/* Remove bottom border from header */
.main-header {
    box-shadow: none !important;
}

.main-header__site-title {
    box-shadow: none !important;
}

.main-header__main-bar {
    border-bottom: none !important;
    box-shadow: none !important;  /* this kills the shadow */
}

/* Hero text (banner like) full-width styling */
.hero-text {
    background-color: var(--primary);
    text-align: center;
    color: var(--text-on-primary) !important;
    padding: 40px 20px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    border-bottom: 20px solid #fff;
}

.hero-text h2,
.hero-text h3 {
    color: var(--text-on-primary) !important;
    margin: 10px 0;
}

.hero-text h3 em {
    color: var(--text-on-primary) !important;
}

/**
 * ===================================================
 * Main Site Logo
 * Purpose: let it be bigger
 * ===================================================
 */

.main-header__site-title {
  padding: 0;              /* remove the limiting padding */
  position: relative;      /* needed for overlap tricks */
  z-index: 10;             /* keep it above the next div */
}

.main-header__site-title img {
  height: auto;
  width: auto;
  max-height: 84px;   /* mobile default */
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .main-header__site-title img { 
    max-height: 100px;
    margin-bottom: -20px;    /* pushes into the next div */
  }
}

@media (min-width: 1024px) {
  .main-header__site-title img { 
    max-height: 200px; 
    margin-bottom: -40px;
    }
}

/**
 * ===================================================
 * Footer changes
 * Purpose: make it smaller, simpler
 * ===================================================
 */

.main-footer__top {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.main-footer__top-container {
  height: 60px; /* or whatever height you want the footer */
  align-items: center; /* flexbox vertical centering */
}

.main-footer__col1 {
    margin-bottom: 0px !important;
    display: flex;
    align-items: center; /* keeps logo vertically centered */
    height: 100% !important;      /* make sure it fills the footer height */
    max-width: 60% !important;
}

.main-footer__col3 {
  padding-top: 20px !important;
  max-width: 20% !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center !important;           
  justify-content: flex-end;    
  text-align: right;             
}

.main-footer__social-network {
    margin-bottom: 30px !important;
}

/* Make sure the container takes up the full column height */
.main-footer__col1 .footer_site_info {
  height: 100%;       /* fill column */
  width: auto;        /* expand for content */
  display: flex;
  align-items: center;
}

/* Force logo to scale to container height */
.main-footer__col1 > img {
  max-width: none !important; /* override the 120px cap */
  height: 100% !important;    /* fill the footer column */
  width: auto !important;     /* maintain aspect ratio */
  display: block;
}

.main-footer__bottom {
    padding-top: 10px;
    padding-bottom: 10px; 
}

/**
 * ===================================================
 * Add a class for full-width assets
 * Purpose: make them go all the way across page
 * ===================================================
 */
.full-width-assets {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}