/* 1. ROOT VARIABLES & FONT DEFINITIONS */
:root {
  --font-family-sans-serif: 'Source Sans Pro', sans-serif;
  
  /* Color variables for easy theming */
  --color-primary: #00667f;
  --color-accent: #7d3e7e;
  --color-light-gray: #f8f9fa; /* Now used only for specific sections */
  --timeline-line: #e9ecef;
}

body {
  font-family: var(--font-family-sans-serif);
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  counter-reset: fact-counter;
}

/* 2. TYPOGRAPHY: APPLYING THE WEIGHTS */
h1, h2, h3, h4, h5, h6 {
  font-weight: 200;
}
.display-4, .display-5 {
  font-weight: 200;
}
strong, b {
  font-weight: 700;
}

main {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

footer {
  margin-top: auto;
  border-top: 5px solid #555;
}

/* 3. CUSTOM COMPONENTS */

/* Header brand styling */
.navbar-brand {
  font-size: 2rem;
  font-weight: 700;
}

/* Quote Cards at the top */
.quote-card {
  border: 1px solid #eee;
  border-left: 0.35rem solid var(--color-primary);
  -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}

.quote-card:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.quote-card .fa-quote-left {
  color: var(--color-primary);
}

/* Pull quote for breaking up the main text body */
.pull-quote {
  border-left: 3px solid var(--color-accent);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  color: #495057;
}

/* 4. THE VERTICAL TIMELINE */
.timeline-section {
  /* This rule correctly provides the background and padding for the whole section */
  background-color: var(--color-light-gray);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.timeline-container {
  /* THIS is the new rule that's needed for positioning the line */
  position: relative;
}

/* CHANGE THIS SELECTOR from .timeline-section::before to .timeline-container::before */
.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background-color: var(--timeline-line);
  z-index: 1;
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  margin-bottom: 0.25rem;
}
.timeline-item:nth-child(odd) {
  left: 0;
  padding-right: 70px;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  padding-left: 70px;
}

.timeline-item::after {
  content: '';
  position: absolute;
  top: 25px;
  width: 25px;
  height: 25px;
  background-color: white;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  z-index: 2;
}

.timeline-item:nth-child(odd)::after {
  right: -12.5px;
}

.timeline-item:nth-child(even)::after {
  left: -12.5px;
}

.timeline-card {
    border: none;
}
.timeline-card .card-header {
  background-color: var(--color-accent);
  color: white;
  font-weight: 700;
}

.timeline-card .card-body {
  background-color: #fff;
}

/* Updated media query to fix connecting line I hope */

@media (max-width: 768px) {
  /* 1. MOVE THE TIMELINE'S VERTICAL LINE TO THE LEFT */
  .timeline-container::before {
    left: 15px; /* Moves the line from the center to 15px from the left edge */
    -webkit-transform: none;
            transform: none; 
  }

  /* 2. ADJUST THE TIMELINE ITEMS TO MAKE SPACE */
  .timeline-item {
    width: 100%;       /* Items are already full-width */
    padding-left: 70px;  /* << Creates space to the left of the card for the line and circle */
    padding-right: 15px; /* A bit of padding on the right edge */
  }
  
  /* Ensure ALL items are aligned left */
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0;
    text-align: left;
  }

  /* 3. MOVE ALL THE CIRCLES ONTO THE NEW LINE */
  .timeline-item::after {
    left: 3px; /* Positions the circle correctly on the 15px line */
    /* This single rule will override both the 'left' and 'right' from the desktop styles */
  }
}

/* Footer colour change */

.bg-custom-footer {
  background-color: #00657e !important;
}

/*
 * STYLING FOR THE TWO-TONE SUB-FOOTER
 */
.sub-footer {
  background-color: #00667f; /* Your specified darker color */
  padding: 0.75rem 0; /* A bit of vertical padding */
}
  .footer-links {
  list-style: none; /* Removes the default list bullets */
  padding-left: 0;
}

.footer-links li a {
  color: #adb5bd; /* A light, muted gray */
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
}

.footer-links li a:hover {
  color: #fff; /* Brightens to white on hover */
  text-decoration: underline;
}



/*
 * STYLING FOR THE FIXED OFF-CANVAS TRIGGER BUTTON
 */

.offcanvas-trigger-btn {
  /* Positioning */
  position: fixed;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1040;

  /* NEW: Flexbox for alignment */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* Turn the button into a flex container */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* Stack children vertically */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* Center vertically */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;    /* Center horizontally */
  gap: 0.75rem; /* add space between the icon and text */

  /* Styling */
  background-color: var(--color-primary);
  color: white;
  padding: 1rem 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  text-decoration: none;
  
  /* Smooth transition for hover effect */
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}

.offcanvas-trigger-btn:hover {
  background-color: #004c60;
  color: white;
}

/*
 * NEW: STYLING FOR THE VERTICAL TEXT
 */
.menu-text {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl; /* This is the magic property! */
  text-orientation: mixed;   /* Keeps characters upright */
  letter-spacing: 0.1rem;    /* Optional: adds a little space between letters */
}


/* ===================================================================
   MOBILE FIX FOR OFF-CANVAS BUTTON
   =================================================================== */
/* Apply these styles only on screens 768px wide or smaller */
@media (max-width: 768px) {
  .offcanvas-trigger-btn {
    /* 1. Unset the desktop positioning */
    top: auto;   /* Remove the top: 50% */
    left: auto;  /* Remove the left: 0 */
    -webkit-transform: none;
            transform: none; /* Remove the translateY(-50%) */

    /* 2. Set new mobile-friendly positioning */
    bottom: 20px; /* 20px from the bottom */
    right: 20px;  /* 20px from the right */
    
    /* 3. Adjust styling for the new position */
    border-radius: 50%; /* Make it a perfect circle */
    padding: 1rem;      /* Adjust padding to be equal for a circular shape */
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Add a subtle shadow to lift it off the page */
  }

  .offcanvas-trigger-btn .menu-text {
    display: none; /* Hide the text on mobile to keep the button small and clean */
  }
}

/*
 * STYLING FOR THE PAGE NAVIGATION COMPONENT Previous / next page
 */
.page-nav-link {
  display: block;
  padding: 0.75rem 1.25rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem; /* Standard Bootstrap border-radius */
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.page-nav-link:hover {
  background-color: var(--color-light-gray);
  border-color: #ced4da;
}

.page-nav-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6c757d; /* Muted text color for the label */
}

.page-nav-title {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-primary);
}

/*Base font size increased because my eyes are getting old*/
html {
  font-size: 1.125rem; /* 18px if Bootstrap's default is 16px */
  overflow-y: scroll;
}

/*
 * STYLING FOR THE "FACT CARD" COMPONENT
 */

.fact-card {
  position: relative; /* Required for the pseudo-element numbering */
  overflow: hidden;   /* Keeps the number from spilling out */
  border: 1px solid #eee;
  -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}

.fact-card:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* The stylized number in the corner */
.fact-card::before {
  counter-increment: fact-counter; /* Increment the counter for each card */
  content: counter(fact-counter);  /* Display the counter's value */
  
  position: absolute;
  top: -10px;
  right: 5px;
  font-size: 4rem; /* Make the number large */
  font-weight: 700;
  color: var(--color-light-gray); /* Make it a subtle background element */
  z-index: 0;
}

.fact-card .card-body {
  position: relative; /* Ensures card content sits on top of the number */
  z-index: 1;
}

.fact-card .card-footer {
    background-color: transparent;
    border-top: 1px solid #eee;
}

        /*Used for UNIX home */
.display-huge {
    font-family: 'Inter', sans-serif; /* You may need to add this font to your Google Fonts link */
    font-size: clamp(5rem, 20vw, 24rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.8;
    color: #00667f;  /*was 212539 */
}

.registered-top {
    font-size: 0.3em;         /* Slightly larger for better vertical alignment */
    vertical-align: super;    /* This is the standard way to do superscript */
    line-height: 0;           /* Prevents it from adding extra space between lines */
    margin-left: -0.15em;     /* Pulls it slightly to the left to tuck it in */
}

/*
 * STYLES FOR THE "PUNCHY" UNIX PAGE
 */

/* 1. Full-Screen Hero Section */
.hero-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 80vh; /* Takes up most of the viewport height */
    background-color: #1a1a1a; /* A very dark, almost black background */
    color: #fff;
    text-align: center;
    padding: 2rem;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 6rem); /* Responsive font size */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    /* Animated gradient text effect */
    background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(#00d4ff), to(#fff));
    background: linear-gradient(90deg, #fff, #00d4ff, #fff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: gradient-shine 5s linear infinite;
            animation: gradient-shine 5s linear infinite;
}

@-webkit-keyframes gradient-shine {
    to {
        background-position: 200% center;
    }
}

@keyframes gradient-shine {
    to {
        background-position: 200% center;
    }
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 2. Feature Grid */
.feature-icon {
    font-size: 3rem;
    color: var(--color-primary);
}

/* 3. Legacy Logos */
.legacy-logo {
    max-height: 50px; /* Standardize logo height */
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%); /* Make them grayscale */
    opacity: 0.7;
    -webkit-transition: opacity 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;
}

.legacy-logo:hover {
    -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
    opacity: 1;
}


/* --- Base styles for all nav links --- */
.navbar .nav-link {
  padding-bottom: 6px; /* Your original padding */
  border-bottom: 2px solid transparent;
  -webkit-transition: border-color 0.2s ease-in-out;
  transition: border-color 0.2s ease-in-out;
}


/* --- START: Navbar Active Link Styling --- */

/* Style for all nav links to prevent content from "jumping" when the border is added */
.navbar-nav .nav-link {
    border-bottom: 3px solid transparent;
    -webkit-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out;
}

/* Define the style for the active link (used on all pages) */
.navbar-nav .nav-link.active {
    font-weight: normal;
    border-bottom-color: #00657e; /* Using your custom purple color */
}

/* 
  THIS IS THE FIX: 
  A specific rule to force the underline on the "Home" link
  ONLY when the user is on the homepage (body id="index").
  This works even if the JavaScript removes the .active class.
*/
body#index .navbar-nav .nav-link[href="index.html"] {
    font-weight: normal;
    border-bottom-color: #00657e; /* Using your custom purple color */
}

/* Optional: Add a subtle hover effect for non-active links */
.navbar-nav .nav-link:not(.active):hover {
    border-bottom-color: #ddd;
}

/* --- END: Navbar Active Link Styling --- */






/* --- THE FIX: Styles for the COLLAPSED hamburger menu --- */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link {
    /* 
      This is the key change. We force the link to be an inline-block,
      which makes it shrink-to-fit its content. The border will now
      only be under the text.
    */
    display: inline-block;

    /* 
      We also remove any horizontal padding that might be on the <a> tag
      and add it back on the right for spacing between links if needed.
    */
    padding-left: 0;
    padding-right: 0;
  }
}

/*
 * STYLING FOR THE LICENSE PLATE STORY PAGE
 */
.story-hero {
  position: relative;
  height: 60vh; /* Adjust height as needed */
  background: url('../assets/images/unix-license-plate.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

/* Adds a dark overlay so text is readable */
.story-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.story-hero .container {
  position: relative; /* Sits on top of the overlay */
}

.story-hero h1 {
    color: white;
    font-weight: 700;
}

.story-hero p {
    font-weight: 200;
}

/* Styling for the Evolution list */
.evolution-list .list-group-item {
    background-color: var(--color-light-gray);
    border: none;
    font-family: monospace;
}

/* Add this to the end of your demo.css file */

/*
 * STYLING FOR THE HTML/CSS UNIX LICENSE PLATE
 */
.license-plate {
  font-family: 'Inter', sans-serif; /* A bold, blocky font works well */
  background-color: #004c60; /* A deep, dark blue-green */
  color: white;
  border: 4px solid #fff;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0 0 2px #333, 0 5px 15px rgba(0,0,0,0.3);
          box-shadow: 0 0 0 2px #333, 0 5px 15px rgba(0,0,0,0.3);
  padding: 1rem;
  max-width: 400px; /* Control the max size */
  margin: 2rem auto; /* Center it with some vertical space */
}

.license-plate .motto {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em; /* Wide letter spacing */
  color: #ffc107; /* A gold/yellow color */
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.license-plate .plate-text {
  font-size: 4.5rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  color: #f8f9fa;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  margin: 0.5rem 0;
}

.license-plate .trademark {
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

.license-plate .trademarkr {
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  vertical-align:text-top;
}