/* css styles */

:root {
    /* 1. The Standard Link Color (Midnight Navy) */
    --bs-link-color: #003366; 
    
    /* 2. The RGB Version (CRITICAL) */
    /* This MUST match the Hex above. Format: Red, Green, Blue (no brackets) */
    /* 0, 51, 102 corresponds to #003366 */
    --bs-link-color-rgb: 0, 51, 102;

    /* 3. The Link Hover Color (Slightly lighter/brighter for interaction) */
    --bs-link-hover-color: #0056b3;
    
    /* 4. The Hover RGB Version */
    /* 0, 86, 179 corresponds to #0056b3 */
    --bs-link-hover-color-rgb: 0, 86, 179;
}


@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.navbar-logo {
    max-height: 50px;
    width: auto;
    padding-right: 4px;
}

p {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1 h2 h3 h4 h5 h6 {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: normal;
}

p.italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: italic;
}


.reveal .slide-logo {
  display: block;
  position: fixed;
  bottom: 0;
  right: 12px;
  max-width: unset !important;
  max-height: unset !important; 
  height: 70px !important;
  width: 70px !important;
  z-index: 2;
}
.white_head {
  background-color: rgba(211, 211, 211, 0.5); 
  color: white;
  shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

li::marker {
  color: #FF6F20;
}

.reveal .slides {
  font-family: 'Atkinson Hyperlegible'
  
}
.reveal .title-slide h1 {
  background: rgba(0, 0, 0, 0.5); 
  color: white;
}

.reveal h2{
    color: #FF6F20;
  
}

/* --- Footer Appearance --- */

.nav-footer {
  /* Create separation without heavy lines */
  border-top: 1px solid #eaeaea; 
  background-color: transparent;
  
  /* Add breathing room so it doesn't crowd the content */
  margin-top: 3rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  
  /* Typography: Smaller and lighter than main text */
  text-align: center;
  font-size: 0.85rem; 
  color: #777777; /* Muted grey */
}

/* --- Link Styling --- */
/* This is key for the "less intrusive" look. 
   It stops the footer from looking like a list of bright blue links. */

.nav-footer a {
  color: inherit; /* Forces links to be grey like the text */
  text-decoration: none; /* Removes underline */
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}

/* --- Interaction --- */
/* Only bring attention to the link when the user hovers */

.nav-footer a:hover {
  color: #2fa4e7; /* Restores the blue accent color on hover */
  opacity: 1;
  text-decoration: underline;
}

/* link colours */
a.quarto-grid-link .listing-title {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    transition: color 0.2s ease-in-out;
}

/* On hover, use the site's standard link hover color */
a.quarto-grid-link:hover .listing-title {
    color: rgba(var(--bs-link-hover-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}
h3.listing-title a {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: none;
}

/* On hover, use the site's standard link hover color */
h3.listing-title a:hover {
    color: rgba(var(--bs-link-hover-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}
/* Targets the description container */
.listing-description {
    font-size: 0.95rem;       /* Slightly smaller than body text for hierarchy */
    line-height: 1.5;         /* Improves readability on multi-line descriptions */
    color: #4a4a4a;           /* Dark grey: readable but distinct from the Navy header */
    margin-top: 0.5rem;       /* Adds breathing room between Header and Description */
}

/* Ensures the link inside the description doesn't look like a blue link */
.listing-description a {
    color: inherit;           /* Forces it to use the grey defined above */
    text-decoration: none;    /* Removes underline */
    cursor: text;             /* Optional: Makes it feel like normal text, not a link */
}

/* Target the specific image class used by Quarto listings */
img.thumbnail-image {
    height: 12rem;       /* Sets a fixed height (approx 190px). Adjust as needed. */
    width: 100%;         /* Ensures the image fills the width of its container */
    object-fit: cover;   /* Critical: Crops the image to fill the box without squashing it */
    object-position: center; /* Centers the image within the crop */
}

/* Adds space between the content (image/text) and the bottom border line */
.quarto-post {
    padding-bottom: 1.5rem; /* Adjust this value to increase/decrease space */
    margin-bottom: 1.5rem;  /* Ensures there is also space outside the border before the next item starts */
}

.alert-primary {
  background-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  
}

/* Overrides the 'Success' button to use the Logo's Orange Accent */
.btn-success {
    /* 1. Background: The Brand Orange */
    /* Using a vibrant orange similar to your logo icon */
    --bs-btn-bg: #f0ad4e; 
    --bs-btn-border-color: #f0ad4e;
    
    /* 2. Text Color: Midnight Navy */
    /* Using Navy text on Orange ensures it passes accessibility standards significantly better than White text */
    --bs-btn-color: #003366;
    
    /* 3. Hover State: Slightly Darker Orange */
    --bs-btn-hover-bg: #d35400;
    --bs-btn-hover-border-color: #d35400;
    
    /* 4. Hover Text: Keep it Navy or switch to White if preferred */
    --bs-btn-hover-color: #003366; 

    /* 5. Active/Click State */
    --bs-btn-active-bg: #a84300;
    --bs-btn-active-border-color: #a84300;
    --bs-btn-active-color: #ffffff; /* Turns white when physically clicked for feedback */
}

.small-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.small-gallery img {
  width: 100%;
  height: 200px; /* Forces uniform thumbnail height */
  object-fit: cover; /* Crops image cleanly without distorting aspect ratio */
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.small-gallery img:hover {
  transform: scale(1.02);
}

.medium-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 12px;
}
.medium-gallery img {
  width: 100%;
  height: 400px; /* Forces uniform thumbnail height */
  object-fit: cover; /* Crops image cleanly without distorting aspect ratio */
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.medium-gallery img:hover {
  transform: scale(1.02);
}