/*
DESIGN SYSTEM VARIABLES (2026 redesign)
*/

:root
{
   /* DESIGN SYSTEM COLORS */
   --color-bg: #F7FAFC; /* page background */
   --color-surface: #FFFFFF; /* card/surface background (white) */
   --color-surface-alt: #EAF1F6; /* light blue card/section background */
   --color-text: #1C2530; /* body text, dark navy */
   --color-accent: #2C6E9E; /* primary accent - buttons, headings, links */
   --color-accent-dark: #1B4A6E; /* dark accent - card headers, nav/footer */
   --color-accent-secondary: #1D4E5F; /* secondary accent - hover states, teal-blue */
   --color-border: #D9D2C7; /* borders, dividers */
   /* FONTS */
   --font-heading: 'Playfair Display', serif;
   --font-body: 'Inter', sans-serif;
   /* LEGACY COLORS - still used by original utility classes (Background-*)
      that appear on Excursion/RoadDirections/Contact pages not yet
      migrated to the design system above */

   --legacy-green: #26a026; /* .Background-green (Transport page cards) */
   --legacy-black: #2B3542; /* .Background-black (used on some card headers) */
   --legacy-rust: #7E140C; /* .Background-rust (card header accent) */
   --legacy-gray: #c1cbcf; /* .background-gray */
   --legacy-gray-light: #DCDCDC; /* .backgropund-gray-light (note: typo kept intentionally, class is used in markup) */
   --legacy-navy: #2F4F82; /* .Background-navy (Excursion page sub-sections) */
   --legacy-blue: #4169e1; /* .Background-blue (Guide page cards) */
   --legacy-yellow-light: #f6e15e; /* .Sub-Background-yellow (Contact page highlight) */
}

/*
BASE / RESET
*/

html
{
   height: 100% !important;
   font-size: 16px !important;   
}

body
{
   height: 100% !important;
   background-color: var(--color-bg);
   font-family: var(--font-body);
   color: var(--color-text);
}

p
{
   font-size: large;
}

h1, h2, h3
{
   font-family: var(--font-heading);
   font-weight: 500;
}

img
{
   max-width: 100%;
   height: auto;
}

/*
NAVBAR
*/

.nav-link
{
   color: white !important;
   font-size: 1.2em !important;
   font-weight: 500;
   letter-spacing: 0.02em;
}

.navbar-nav li a.nav-link
{
   text-decoration: none !important;
   border-bottom: 3px solid transparent !important;
}

   .navbar-nav li a.nav-link:hover
   {
      border-bottom: 3px solid var(--color-accent) !important;
   }

.nav-item
{
   font-size: 20px;
   margin-right: 1em;
}

.navbar-brand
{
   width: 153px;
   font-size: 24px;
}

   .navbar-brand img
   {
      height: 60px;
      /* put value of image height as your need */
      float: left;
   }

.navbar-logo
{
   width: 180px;
}

/*
END NAVBAR
*/

/*
PAGE LAYOUT / FOOTER
*/

.page-container
{
   margin: 0 auto;
   padding: 0;
   position: relative;
   min-height: 100vh;
}

.content-wrap
{
   margin: 0;
   padding: 0;
   padding-bottom: 2.5rem; /*Footer height */
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
}

.footer
{
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 2.5rem; /*  Footer height */
}