/* ----------------- */
/* --- VARIABLES --- */
/* ----------------- */
:root {
    
    /* Colors */
    --primary_text_color:  #011640; /* Dark Blue */

    --background_color_white: #FFFFFF; /* White */    
    --background_color_off_white: #fbf8f4 ; /* Off White */
    --background_color_mid_red: #cc917b; /* Mid Red */
    --background_color_light_red: #d29e8b; /* Light Red */

    --background_color_yellow: #e4d69b; /* Yellow */
    --background_color_light_yellow: #e8dca9; /* Light Yellow */
    --background_color_cyan: #a6c2ba; /* Cyan */
    --background_color_light_cyan: #b8cec8; /* Light Cyan */


    --primary-color: #011640; /* Dark Blue */
    --secondary-color: #F2F2F2; /* Light Gray */
    --accent-color: #FF6B6B; /* Coral */    
    --link-color: #007BFF; /* Bootstrap Primary Color */
    --link-hover-color: #0056b3; /* Darker Blue for hover */

    /* Font Sizes */    
    /*--default_font_size: 1.875rem; /* 30px */                     /* ADAPTED */
    /*--default_font_size-mobile: 1.5rem; /* 24px */
    --default_font_size: 1.5rem; /* 24px */
    --default_font_size-mobile: 1.3rem; /* 21px */

    --smaller_font_size: 1.2rem; /* 19px */
    --smaller_font_size-mobile: 1rem; /* 16px */

    --small_font_size: 1.4rem; /* 22px */
    --small_font_size-mobile: 1.2rem; /* 19px */

    --large-font-size: 2.5rem; /* 40px */
    --large-font-size-mobile: 2rem; /* 32px */

    --extra-large-font-size: 4rem; /* 64px */
    --extra-large-font-size-mobile: 3rem; /* 48px */    

    /* Header Font Sizes */
    --extra-large-header-font-size: 6rem; /* 96px */
    --extra-large-header-font-size-mobile: 4.5rem; /* 72px */
    --extra-large-header-font-size-mobile: 4rem; /* 64px */ /* ADAPTED */
    
    --large-header-font-size: 4.4rem; /* 70px */
    --large-header-font-size-mobile: 3.5rem; /* 56px */
    --large-header-font-size-mobile: 3rem; /* 48px */ /* ADAPTED */
    
    /*--regular-header-font-size: 2.5rem; /* 40px */                  /* ADAPTED */
    /*--regular-header-font-size-mobile: 1.8rem; /* 28px */
    --regular-header-font-size: 2rem; /* 32px */
    --regular-header-font-size-mobile: 1.6rem; /* 25px */

    

    /* Spacing */
    --default_edge_spacing: 1.5rem; /* 24px */
    --default_edge_spacing_mobile: 1rem; /* 16px */

    --special_font_gap: 2rem; /* 32px */
    --special_font_gap_vertical: 0.4rem; /* 6px */
    --special_font_top_bottom_padding: 1rem; /* 16px */

    --regular_standard_spacing_20: 1.25rem; /* 20px */
    --large_standard_spacing_40: 2.5rem; /* 40px */
    --large_standard_spacing_80: 5rem; /* 80px */



}



/* ------------------------------------------------- */
/* --- FONT FONT FONT FONT FONT FONT FONT FONT --- */
/* ------------------------------------------------- */

@font-face {
    font-family: 'PPNeueMontreal-Regular';
    src: url('../fonts/PPNeueMontreal-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.default_font_style {
    font-size: var(--default_font_size);
    color: var(--primary_text_color);
}

.smaller_font_style {
    font-size: var(--smaller_font_size);
    color: var(--primary_text_color);
}

.small_font_style {
    font-size: var(--small_font_size);
    color: var(--primary_text_color);
}

.regular_header_size_font_style {
    font-size: var(--regular-header-font-size);
    color: var(--primary_text_color);
}

.variable_font_style {
    font-size: var(--default_font_size);
    color: var(--primary_text_color);
}


@media (max-width: 992px) {
    .variable_font_style {
        font-size: 1.2rem; /* 19px */        
    }
}


.white_font_style {
    color: var(--background_color_white);
}

/* --------------- */
/* --- GENERAL --- */
/* --------------- */

/* ------------------------------------------------- */
body {
    font-family: 'PPNeueMontreal-Regular', sans-serif;    
    /* font-size: 16px; */
    /* line-height: 1.5; */
    /* font-size: 30px;  */
    color: var(--primary_text_color);
}

/* --------------- */
/* --- HEADERS --- */
/* --------------- */

h1 {font-size: var(--extra-large-header-font-size);}

h2 {font-size: var(--large-header-font-size);}
h3 {font-size: var(--regular-header-font-size);}

@media (max-width: 992px) {
    h1 {font-size: var(--extra-large-header-font-size-mobile);}
    h2 {font-size: var(--large-header-font-size-mobile);}
    h3 {font-size: var(--regular-header-font-size-mobile);}
}

h3 {
    word-break: break-word;
    overflow-wrap: break-word;
}

h2 {
    word-break: break-word;
    overflow-wrap: break-word;
}

.h1_reduced{font-size: var(--large-header-font-size);}
@media (max-width: 992px) {    
    .h1_reduced {font-size: var(--large-header-font-size-mobile);}    
}

.h2_reduced{font-size: var(--regular-header-font-size);}
@media (max-width: 992px) {    
    .h2_reduced {font-size: var(--regular-header-font-size-mobile);}    
}


/* ------------- */
/* --- LINKS --- */
/* ------------- */
a {
    color: var(--primary_text_color);
    text-decoration: underline;
}


/* -------------------------- */
/* --- PADDINGS & MARGINS --- */
/* -------------------------- */

.padding_btm_40_no_margin {
    padding-bottom: var(--large_standard_spacing_40);
    margin-bottom: 0px;
}

.padding_btm_top_40_no_margin {
    padding-bottom: var(--large_standard_spacing_40);
    padding-top: var(--large_standard_spacing_40);
    margin-bottom: 0px;
}



/* ------------------- */
/* --- BACKGROUNDS --- */
/* ------------------- */

.bg_white {
    background-color: var(--background_color_white);
}

.bg_off_white {
    background-color: var(--background_color_off_white);
}

.bg_mid_red {
    background-color: var(--background_color_mid_red);    
}

.bg_light_red {
    background-color: var(--background_color_light_red);    
}

.bg_yellow {
    background-color: var(--background_color_yellow);    
}

.bg_light_yellow {
    background-color: var(--background_color_light_yellow);    
}

.bg_cyan {
    background-color: var(--background_color_cyan);
}

.bg_light_cyan {
    background-color: var(--background_color_light_cyan);
}



/* ------------------------------ */
/* --- GENERAL SECTION STYLES --- */
/* ------------------------------ */

.general_section_spacing {
    padding-left: var(--default_edge_spacing);
    padding-right: var(--default_edge_spacing);
    padding-top: var(--large_standard_spacing_80);
    padding-bottom: var(--large_standard_spacing_80);
}

@media (max-width: 992px) {
    .general_section_spacing {
        padding-left: var(--default_edge_spacing_mobile);
        padding-right: var(--default_edge_spacing_mobile);
        padding-top: var(--large_standard_spacing_40);
        padding-bottom: var(--large_standard_spacing_40);
    }
}

.general_section_spacing_no_bottom {
    padding-left: var(--default_edge_spacing);
    padding-right: var(--default_edge_spacing);
    padding-top: var(--large_standard_spacing_80);
    padding-bottom: 0px;
}
@media (max-width: 992px) {
    .general_section_spacing_no_bottom {
        padding-left: var(--default_edge_spacing_mobile);
        padding-right: var(--default_edge_spacing_mobile);
        padding-top: var(--large_standard_spacing_40);
        padding-bottom: 0px;
    }
}

.general_section_spacing_no_top {
    padding-left: var(--default_edge_spacing);
    padding-right: var(--default_edge_spacing);
    padding-bottom: var(--large_standard_spacing_80);
    padding-top: 0px;
}
@media (max-width: 992px) {
    .general_section_spacing_no_top {
        padding-left: var(--default_edge_spacing_mobile);
        padding-right: var(--default_edge_spacing_mobile);
        padding-bottom: var(--large_standard_spacing_40);
        padding-top: 0px;
    }
}

.general_section_spacing_no_top_no_bottom {
    padding-left: var(--default_edge_spacing);
    padding-right: var(--default_edge_spacing);
    padding-bottom: 0px;
    padding-top: 0px;
}
@media (max-width: 992px) {
    .general_section_spacing_no_top_no_bottom {
        padding-left: var(--default_edge_spacing_mobile);
        padding-right: var(--default_edge_spacing_mobile);
        padding-bottom: 0px;
        padding-top: 0px;
    }
}

.general_section_spacing_no_bottom_narrow_top {
    padding-left: var(--default_edge_spacing);
    padding-right: var(--default_edge_spacing);
    padding-top: var(--regular_standard_spacing_20);
    padding-bottom: 0px;
}

.general_sub_section_spacing {
    padding-left: var(--default_edge_spacing);
    padding-right: var(--default_edge_spacing);
    padding-bottom: var(--default_edge_spacing_mobile);
    padding-top: 0px;
}

@media (max-width: 768px) {
    .general_sub_section_spacing {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: var(--default_edge_spacing_mobile);
        padding-top: var(--default_edge_spacing_mobile);
    }
}

.left_spacing_regular {
    padding-left: var(--regular_standard_spacing_20);
}

@media (max-width: 992px) {
    .left_spacing_regular { /* mobile */
        padding-left: 0px;
        padding-bottom: var(--default_edge_spacing_mobile);
    }
}



/*
.a_col_1 {
    padding-left: 0px;
    padding-right: 0px;
}

.a_col_2 {
    padding-left: var(--default_edge_spacing_mobile);
    padding-right: 0px;
}

.a_col_last {
    padding-left: var(--default_edge_spacing_mobile);
    padding-right: var(--default_edge_spacing);
}
*/



/* ----------------------- */
/* --- SPECIFIC STYLES --- */
/* ----------------------- */

.word_break{
    word-break: break-word;
    overflow-wrap: break-word;
}

.descriptor_section_right_aligned {
    display: flex;
    justify-content: flex-end; /* align items to the right */    
    gap: var(--special_font_gap); /* spacing between items */
    
    margin-right: var(--default_edge_spacing);

    padding-top: var(--special_font_top_bottom_padding);
    padding-bottom: var(--special_font_top_bottom_padding);    
}

@media (max-width: 992px) {
    .descriptor_section_right_aligned{
        justify-content: flex-start; /* left-align items in mobile view */
        margin-right: 0px;
        margin-left: var(--default_edge_spacing);
        flex-direction: column;    /* Stack children vertically */
        align-items: flex-start;   /* align items to the left inside the column */
        gap: 0;                    /* remove horizontal gap, since now vertical */
        row-gap: var(--special_font_gap_vertical); /* adjust vertical gap !important */
    }
}


.sub_section_right_aligned {
    display: flex;
    justify-content: flex-end; /* align items to the right */        
    
    padding-right: var(--default_edge_spacing);

    padding-top: var(--special_font_top_bottom_padding);
    padding-bottom: var(--special_font_top_bottom_padding);    
}

@media (max-width: 992px) {
    .sub_section_right_aligned{
        justify-content: left; /* center items in mobile view */
        padding-right: 0px;
        padding-left: 0px;
    }
}

.section_main_header_pad{
    padding-bottom: var(--large_standard_spacing_80);
}
@media (max-width: 992px) {
    .section_main_header_pad{
        padding-bottom: var(--large_standard_spacing_40);
    }
}

.sub_section_header_pad_type_bottom{
    padding-bottom: var(--large_standard_spacing_40);
}
@media (max-width: 992px) {
    .sub_section_header_pad_type_bottom{
        padding-bottom: var(--regular_standard_spacing_20);
    }
}

.sub_section_header_pad_type_top{
    padding-top: var(--large_standard_spacing_40);
}
@media (max-width: 992px) {
    .sub_section_header_pad_type_top{
        padding-top: var(--regular_standard_spacing_20);
    }
}

.sub_section_header_pad_type_top_bottom{
    padding-top: var(--large_standard_spacing_40);
    padding-bottom: var(--large_standard_spacing_40);
}

@media (max-width: 992px) {
    .sub_section_header_pad_type_top_bottom{
        padding-top: var(--regular_standard_spacing_20);
        padding-bottom: var(--regular_standard_spacing_20);
    }
}


/* -------------- */
/* --- IMAGES --- */
/* -------------- */

.image_container {
    width: 100%;
    height: 300px; /* desired height */
    overflow: hidden; /* rop anything outside the div */
    position: relative;
    /* border: 1px solid var(--primary_text_color); */
}

.image_container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
    position: absolute;    
}





/* ------------------------------------------------- */
/* --- NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR NAVBAR --- */
/* ------------------------------------------------- */

/* navbar height to 80px */
.navbar {    
    height: 80px; /*80*/
    /*align-items: center;*/ /* Vertically center content */
    padding-top: 0px; /* Remove top padding */
    padding-bottom: 0px; /* Remove bottom padding */        
    background-color: var(--background_color_off_white);
}

/* Add space before the logo */
.navbar-brand {
    margin-left: 40px;
    padding-right: 8px; /* Space between logo and text */
}

/* Standard spacing between left-aligned navigation links */
.navbar-nav.me-auto .nav-link {
    margin-right: 40px;    
    padding-bottom: 0px; /* Remove bottom padding */
    padding-left: 0px; /* Remove left padding */  
}

/* color */
.nav-link {
    color: var(--primary_text_color); /*!important*/
}

.nav-link:hover {
    color: var(--background_color_mid_red, #cc917b); /* hover color */
}

/* active page settings */
.nav-link.active, .nav-link.active:hover, .nav-link.active:focus {
    color: var(--background_color_mid_red, #cc917b) !important; /* active link color */
    text-decoration: underline;
}


/* ------------------------------ ONLY DESKTOP BEHAVIOUR ------------------------------ */
@media (min-width: 992px) {
    
    .navbar {
        align-items: flex-start;  /* key line */
        transition: height 0.7s; /* 0.25s */
        height: 80px; /* the default height */
        overflow: visible;
        position: relative;
        z-index: 1200;
    }

    .navbar-nav {
        margin-top: 28px; /* adjust to fine-tune distance from top ->  instead of nav-link padding (below) */
    }

    .navbar-brand {
        margin-top: 22px; /* required to align vertically with nav links */
    }

    /* Optional: restore vertical padding for nav links if needed */
    .navbar .navbar-nav .nav-link {
        padding-top: 0px;  /* 0 here as using margin (above) - adjust so nav links are correctly vertically aligned (original = center) */
        padding-bottom: 0;
    }

    /* When hovered or focused within, expand navbar height */
    .navbar-nav .dropdown:hover ~ .navbar,
    .navbar-nav .dropdown:focus-within ~ .navbar {
      height: 100px; /* height to cover nav+submenu */
    }
  
    /* But the above selector is not correct due to sibling issues;
       Instead, use a parent-based selector with :has (supported in modern browsers) */  
    .navbar:has(.navbar-nav .dropdown:hover),
    .navbar:has(.navbar-nav .dropdown:focus-within),
    .navbar.navbar-expanded {
        height: 100px;
    }

    /* When hovered, expand navbar immediately (not after animation) */
    .navbar.navbar-expanded {    
        transition: height 0.25s;
    }

    /* Make sure the parent is positioned for proper line-up */
    .navbar-nav .dropdown {
    position: relative;
    }

    .navbar-nav .dropdown .nav-link {
    position: relative;
    z-index: 2; /* On top of expanding navbar */    
    }
    

    /* Make the .dropdown:hover cover the whole area under sub-menus */
    /*.navbar-nav .dropdown,
    .navbar-nav .dropdown:hover,
    .navbar-nav .dropdown:focus-within {
        /* "buffer" at the bottom, so moving into submenu doesn't leave hover quickly */
        /* padding-bottom: 20px; */ /* Or as much as your submenu is tall */
    /*}

  
    /* Fallback for browsers that don't support :has():
    Optionally use JS for cross-browser if necessary */    

    /* Horizontal submenu, lines up under the parent menu item */
    .custom-horizontal-dropdown {
        position: absolute;
        left: 0;
        top: 100%;
        width: max-content;
        min-width: 100%; /* At least as wide as the parent */
        /*background: var(--background_color_off_white, #faf7f3);*/
        background-color: transparent;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0.5rem 0;
        z-index: 1000;
        flex-direction: row;
        justify-content: flex-start;
        /* Chrome-optimized: use opacity instead of display */
        display: flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* Override any transitions */
        transition: none !important;
        animation: none !important;
        /* Chrome GPU acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: opacity, visibility;
    }
    
    /* Immediate dropdown display on hover */
    .navbar-nav .dropdown:hover > .custom-horizontal-dropdown,
    .navbar-nav .dropdown:focus-within > .custom-horizontal-dropdown,
    .navbar-nav .dropdown:hover .dropdown-menu.custom-horizontal-dropdown,
    .navbar-nav .dropdown:focus-within .dropdown-menu.custom-horizontal-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .custom-horizontal-dropdown li {
        list-style: none;
        margin: 0 18px 0 0; /* space between items */
        padding: 0;
    }

    .custom-horizontal-dropdown li:last-child {
        margin-right: 0;
    }

    .custom-horizontal-dropdown .dropdown-item {
        background: transparent;
        /* color: #b8836e; */
        padding: 0;
        /*text-decoration: underline;*/
        border-radius: 0;
        font-size: 1rem;
        transition: color 0.16s;
        white-space: nowrap;
    }

    .custom-horizontal-dropdown .dropdown-item:hover,
    .custom-horizontal-dropdown .dropdown-item:focus {
        color: var(--background_color_mid_red, #cc917b); /* hover color */
        background: none;
    }
    
    .custom-horizontal-dropdown .dropdown-item.active {
        color: var(--background_color_mid_red, #cc917b); /* active color */
        text-decoration: underline;
    }    

    /* Absolutely position submenu BELOW .nav-link (not navbar) */
    .custom-horizontal-dropdown {
      top: 100%;
      left: 0;
    }
  }


/* ------------------------------ ONLY MOBILE BEHAVIOUR ------------------------------ */
/* Center align navbar links in mobile view */
@media (max-width: 992px) {
    .navbar {
        height: auto; /* Allow height to adjust naturally in mobile view */
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .navbar-collapse {
        text-align: center;
    }

    .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navbar-nav .nav-item {
        margin-bottom: 10px;
        width: 100%;
    }

    .navbar-nav .nav-link {
        display: block;
        width: 100%;        
    }

    /* "Jobs" */
    /* .navbar-nav .nav-item:last-child {
        margin: 0; 
    } */

    /* Hide on mobile: revert to Bootstrap dropdown */
    .custom-horizontal-dropdown {
        display: none; /* fallback to Bootstrap's stacking */
    }
    .navbar-nav .dropdown-menu.show {
        display: block;
    }

  /* Remove box, bg, and force center alignment for only sub-menus dropdown */
  .custom-horizontal-dropdown, /* in mobile this is still the dropdown-menu */
  .navbar-nav .dropdown-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100%;
    left: 0;
    right: 0;
    /* Removes any border radius */
    border-radius: 0 !important;
  }

  .custom-horizontal-dropdown li,
  .navbar-nav .dropdown-menu li {
    width: 100%;
    text-align: center;
    margin: 0; /* remove any gap above or below */
  }

  .custom-horizontal-dropdown .dropdown-item,
  .navbar-nav .dropdown-menu .dropdown-item {
    display: block;
    background: transparent !important;
    color: var(--primary_text_color, #011640);
    font-size: 1rem;
    text-align: center;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
  }

  .custom-horizontal-dropdown .dropdown-item:hover,
  .navbar-nav .dropdown-menu .dropdown-item:hover {
    text-decoration: underline;
    background: transparent !important;
    color:var(--background_color_mid_red, #cc917b);  /* hover color */
  }
  
  .custom-horizontal-dropdown .dropdown-item.active,
  .navbar-nav .dropdown-menu .dropdown-item.active {
    text-decoration: underline;
    background: transparent !important;
    color:var(--background_color_mid_red, #cc917b);  /* active color */
  }
}

/* ------------------------------ */
/* additional settings for dropdown toggles */
@media (min-width: 992px) {
    .nav-item .dropdown-toggle-link { display: block; }
    .nav-item .dropdown-toggle { display: none !important; }
}
@media (max-width: 992px) {
    .nav-item .dropdown-toggle-link { display: none !important; }
    .nav-item .dropdown-toggle { display: block; }
}

/* ------------------------------ */
/* brand logos hover effect */
.navbar-brand .logo-hover {
    display: none;
  }
  .navbar-brand:hover .logo-default {
    display: none;
  }
  .navbar-brand:hover .logo-hover {
    display: inline;
  }


  
/* ------------------------------ */
/* burger menu style */

.navbar-toggler {
    border: none;
    background: none;
    padding: 0.5rem 0.75rem;
    box-shadow: none;
    outline: none;
    position: relative;
  }
  
  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.3em;
    position: relative;
    background: none;
    border: none;
  }
  
  /* Bar setup: base (middle), before (top), after (bottom) */
  .navbar-toggler-icon,
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--primary_text_color);
    position: absolute;
    left: 0;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    border-radius: 2px;
  }
  
  /* Middle bar: center */
  .navbar-toggler-icon {
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--primary_text_color);
  }
  
  /* Top bar */
  .navbar-toggler-icon::before {
    top: -6px; /* "up" from middle bar */
  }
  
  /* Bottom bar */
  .navbar-toggler-icon::after {
    top: 6px; /* "down" from middle bar */
  }
  
  /* Hide focus outline */
  .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
  }
  
  /* Animations: when menu is open, make an X */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent; /* Hide middle line */
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
  




  

/* 
.test{
    line-height: 1;
    vertical-align: bottom; 
    margin-bottom: -5px;
    color: green;
} */


/* ------------------------------ */
/* --- PROJECT FILTER TABS --- */
/* ------------------------------ */

.project-filter-tabs {
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    justify-content: flex-end;
    padding-right: 1rem; /* Add padding to compensate for link's right padding */
}

.project-filter-tabs .nav-link {
    background-color: transparent;
    color: var(--primary_text_color);
    border: 1px solid transparent;
    padding: 0.25rem 1rem;
    font-size: var(--smaller_font_size);
    border-radius: 0;
    text-decoration: none;
    transition: border-color 0.2s;
}

.project-filter-tabs .nav-link:hover {
    border: 1px solid var(--primary_text_color);
    background-color: transparent;
    color: var(--primary_text_color);
}

.project-filter-tabs .nav-link.active {
    border: 1px solid var(--primary_text_color);
    background-color: transparent;
    color: var(--primary_text_color);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .project-filter-tabs {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        justify-content: center;
        padding-right: 0; /* Reset padding for mobile */
    }
    
    .project-filter-tabs .nav-link {
        padding: 0.2rem 0.75rem;
        font-size: var(--smaller_font_size-mobile);
    }
}

/* Project type label (e.g., Wettbewerb) */
.project-type-label {
    display: inline-block;
    border: 1px solid var(--primary_text_color);
    padding: 0.1rem 0.5rem;
    margin-right: 0.25rem;
    font-size: inherit;
    line-height: 1.2;
    vertical-align: baseline;
}

/* ================================== */
/* MAGAZINE FILTER TABS - Same as Project */
/* ================================== */
.magazine-filter-tabs {
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    justify-content: flex-end;
    padding-right: 1rem; /* Add padding to compensate for link's right padding */
}

.magazine-filter-tabs .nav-link {
    background-color: transparent;
    color: var(--primary_text_color);
    border: 1px solid transparent;
    padding: 0.25rem 1rem;
    font-size: var(--smaller_font_size);
    border-radius: 0;
    text-decoration: none;
    transition: border-color 0.2s;
}

.magazine-filter-tabs .nav-link:hover {
    border: 1px solid var(--primary_text_color);
    background-color: transparent;
    color: var(--primary_text_color);
}

.magazine-filter-tabs .nav-link.active {
    border: 1px solid var(--primary_text_color);
    background-color: transparent;
    color: var(--primary_text_color);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .magazine-filter-tabs {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        justify-content: center;
        padding-right: 0; /* Reset padding for mobile */
    }

    .magazine-filter-tabs .nav-link {
        padding: 0.2rem 0.75rem;
        font-size: var(--smaller_font_size-mobile);
    }
}

/* Magazine article tag links styling */
.magazine-byline a {
    text-decoration: none;
    color: inherit;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    transition: background 0.2s ease;
    display: inline-block;
    margin: 0 2px;
}

.magazine-byline a:hover {
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
}

/* For overlay version on hero images */
.magazine-byline-overlay a {
    text-decoration: none;
    color: inherit;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: background 0.2s ease;
    display: inline-block;
    margin: 0 2px;
}

.magazine-byline-overlay a:hover {
    background: rgba(255, 255, 255, 0.3);
    color: inherit;
}