/* ADDING THE UNIVERSAL FONTS AT THE TOP FOR EASY REFERENCE*/
    @font-face {
        font-family: 'Open Sauce One';
        src: url('/fonts/OpenSauceOne-Light.ttf') format('truetype');
        font-weight: 300; /* Light */
        font-style: normal;
        font-display: optional; /* Prevents font swap flickering when fonts are preloaded */
    }

    @font-face {
        font-family: "Open Sauce One";
        src: url("/fonts/OpenSauceOne-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: optional; /* Prevents font swap flickering when fonts are preloaded */
    }

    @font-face {
        font-family: 'Open Sauce One';
        src: url('/fonts/OpenSauceOne-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: optional; /* Prevents font swap flickering when fonts are preloaded */
    }

    @font-face {
        font-family: 'Open Sauce One';
        src: url('/fonts/OpenSauceOne-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: optional; /* Prevents font swap flickering when fonts are preloaded */
    }

    @font-face {
        font-family: 'Bellavoir Delight';
        src: url('/fonts/BellavoirDelight.otf') format('opentype');
        font-weight: 400;
        font-style: normal;
        font-display: optional; /* Prevents font swap flickering when fonts are preloaded */
    }

/* UNIVERSAL FONT STYLES / GUIDES */
:root{
    /* Picked some fallback fonts from https://www.w3schools.com/css/css_font_fallbacks.asp */
    --font-sans: "Open Sauce One", Arial, Helvetica, sans-serif;
    --font-serif: "Bellavoir Delight", Georgia, serif;

    /* Letter-spacing tokens */
    --ls-wide: 0.01em; /* +1%  */
    --ls-tight: -0.011em; /* -1.1% */

    /* Minimal palette: light, soft neutrals + blue accent */
    --black: #2C2C2C; /* Soft black – not too dark */
    --white: #FCFCFC;
    --bg: #F8F9FA; /* Slightly cooler, light grey-white */
    --darkgrey: #6B7280; /* Softer grey for nav/secondary text */
    --lightgrey: #F4F5F6; /* Lighter grey for "to-try" – recedes */
    --coolgrey: #E2E5E8; /* Hover states, pills */
    --tag-bg: #5C6166;
    /* Blues */
    --blue: #4A7BA7; /* Muted blue for hero/accent */
    --lightblue: #D4E2F0; /* "loved" rows/cards: clearer blue, more contrast with grey */
    --blue-recede: #E2EAF2; /* Lighter than cards – "christina's" sits behind in space */
    --accent: #3B6B94; /* Blue for links */

    /* Gaps for pages with cards or rows */
    --card-gap: 32px; /* Gap between different cards on activities, museum, sightseeing */
    --row-gap: 18px; /* Vertical space between rows in the work spots table */

    /* Fixed header height: used for main padding-top and sticky table header offset (matches nav height so no gap) */
    --header-height: 56px;
}

/* Page background */
html, body {
    background-color: var(--bg);
    color: var(--black); /* Use custom black color for all text by default */
}

/* Prevent horizontal shift when scrollbar appears/disappears */
html {
    overflow-y: scroll; /* Always show vertical scrollbar to prevent layout shift */
}

/* Body text */
.text-body{
    font-family: var(--font-sans);
    font-weight: 300; /* Light */
    font-size: 12px;
    line-height: 1.5; /* 150% */
    letter-spacing: var(--ls-wide);
    text-transform: none;
    color: var(--black);
}

/* Note */
.text-note{
    font-family: var(--font-sans);
    font-weight: 300; /* Light */
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: var(--ls-wide);
    color: var(--black);
}

/* Tag */
.text-tag{
    font-family: var(--font-sans);
    font-weight: 300; /* Light */
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: var(--ls-wide);
    font-style: normal;
    color: var(--black);
}

/* Small header */
.text-small-header{
    font-family: var(--font-sans);
    font-weight: 500; /* Medium */
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: var(--ls-tight);
    text-transform: capitalize;
    color: var(--black);
}

/* Title */
.text-title{
    font-family: var(--font-sans);
    font-weight: 700; /* Bold */
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: var(--ls-tight);
    color: var(--black);
}

/* Header (display) */
.text-header{
    font-family: var(--font-serif);
    font-weight: 400; /* Regular */
    font-size: clamp(48px, 12vw, 160px); /* Learned of clamp() function
                                         * through https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/.
                                         * Used as a reference, and still needs to be further understood */
    line-height: 1.5;
    letter-spacing: var(--ls-tight);
    color: var(--black); /* Use custom black color from root */
}

/* Empty state message */
.text-empty-state{
    font-family: var(--font-serif);
    font-weight: 400; /* Regular */
    font-size: clamp(24px, 6vw, 80px); /* Half of text-header size */
    line-height: 1.2; /* Less line height than text-header */
    letter-spacing: var(--ls-tight);
    text-align: center;
    color: var(--black);
}

.empty-state-message {
    display: none;
    text-align: center;
    padding: 32px 0;
    color: var(--black);
    margin-top: 0;
}

.empty-state-message.visible {
    display: block;
}

a {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 4px;
    transition: opacity .2s ease, text-decoration-color .2s ease;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
    color: var(--accent);
}


/* NAV BAR */
/* Fixed nav to remain visible during scroll */

header {
    position: fixed;
    top: 0;
    right:0;
    left: 0;
    z-index: 1000;
    padding: 16px 24px; /* Match cards container horizontal padding for alignment */
    background: var(--bg);
}

/* NAV COLORS + HOVER + ACTIVE */
.nav-menu a {
    color: var(--darkgrey);
    text-decoration: none;
    font-weight: 500; /* Medium */
    transition: color .2s ease;
}

.nav-menu a:hover,
.nav-menu a:focus{
    color: var(--black);
    outline: none;
}

.nav-menu a[aria-current="page"] {
    color: var(--black);
    font-weight: 700; /* Bold – clear active state */
    text-decoration: none;
}

/* Mobile/desktop navigation referenced from:
 * https://threkk.medium.com/how-to-make-a-css-only-hamburger-menu-f7ad41e13399
 * Modified with peer guidance and customized to fit my design. */

/* DESKTOP NAV */
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    justify-content:center;
    align-items: center;
}

/* This hides UI on desktop */
nav input[type="checkbox"],
nav label { display: none;}

/* Keep hamburger position relative to the nav bar */
header nav {
    position: relative;
}

/* Hamburger - hide unless mobile */
.hamburger{
    font-size: 28px;
    cursor: pointer;
    padding: 0 32px;
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: translateY(-50%);
}

/* MOBILE NAV */

@media (max-width:900px) {
    header{
        padding: 32px 24px 8px 24px; /* Match cards container right padding (24px) */
    }
    
    header nav {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Align hamburger to right edge */
        width: 100%;
    }
    
    nav label.hamburger {
        display: block;
        position: relative; /* Keep it in normal flow */
        right: 0;
        top: 0;
        transform: rotate(0deg);
        text-align: right;
        padding: 0; /* Remove padding to align with container edge */
        margin: 0 0 8px 0; /* Add bottom margin for spacing, no other margins */
        transition: transform 0.3s ease; /* Smooth rotation */
        z-index: 100; /* Keep it above menu items */
        align-self: flex-end; /* Keep it aligned to the right */
    }

    /* Rotate hamburger 90 degrees when menu is open */
    nav input[type="checkbox"]:checked ~ label.hamburger {
        transform: rotate(90deg);
    }

    nav .nav-menu{
        display: block;
        padding: 0;
        margin: 0;
        width: 100%; /* Full width menu */
        order: 3; /* Ensure it comes after the hamburger */
    }

    nav .nav-menu li {
        display: block;
        text-align: center;
        padding: .5em;
    }

    /*When the checkbox input is NOT checked, then you should select
     * the next element with class .nav-menu and hide that element.
     * This works because in the HTML, code is in this order:
     *      <input type="checkbox" id="nav-toggle" class="nav-toggle">
     *      <label for="nav-toggle" class="hamburger" aria-label="Toggle navigation">☰</label>
     *      <ul class="nav-menu text-small-header" id="nav-menu">
     * otherwise if it is checked, then show the nav-menu.*/
    nav input[type="checkbox"]:not(:checked) ~ .nav-menu { display: none;}
}


/* FOOTER */
footer {
    margin-top: auto;
    text-align: center;
    padding: 16px 0;
    font-size: 14px;
    color: var(--darkgrey);
}


/* INDEX PAGE */
/* Page layout */
main{
    max-width: 850px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 24px 24px;
    box-sizing: border-box; /* Keeps padding inside the 1000px cap */
    min-height: calc(100vh - 80px); /* Viewport height minus approximate header height */
    justify-content: center; /* Vertically center content */
    padding-top: max(112px, 5vh); /* Minimum 112px or 5% of viewport, whichever is larger */
}

.hero-container{
    display: block;
    margin-inline: 0;
    padding-inline: 0;
    padding-top: 0; /* Remove fixed padding, let main handle spacing */
}

.hero-title span{
    display: block;
    margin-inline: auto;
}

/* Top line – lighter than blue cards so it reads behind "nyc bucket list" in space */
.hero-title-sans{
    display: block;
    margin-bottom: 0; /* No extra space */
    line-height: .85; /* Tighter */
    font-family: 'Open Sauce One', sans-serif;
    font-weight: 700; /* Semibold */
    font-style: normal;
    font-size: clamp(32px, 6vw, 120px); /* Learned of clamp() function
                                         * through https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
                                         * used as a reference, but still need to be further understood */
    letter-spacing: var(--ls-tight);
    color: var(--blue-recede);
}

/* Second line */
.hero-title-serif{
    display: block;
    margin-top: -0.28em; /* Overlap for the top */
    margin-bottom: clamp(16px, 2.5vw, 40px);
    line-height: .8; /* tight line box */
    font-family: 'Bellavoir Delight', serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(48px, 12vw, 160px); /* Learned of clamp() function
                                         * through https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
                                         * used as a reference, but still need to be further understood */
    letter-spacing: var(--ls-tight);
    color: var(--black);
}

/* Small-screen */
@media (max-width: 900px){
    .hero-title-serif { margin-top: -0.22em; }
}

#tag-grey{
    background: var(--lightgrey);
    padding: .25px;
}

#tag-blue{
    background: var(--lightblue);
    padding: .25px;
}

.notes{
    margin-inline: 0;
    padding-inline: 0;
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: flex-start; /* Don't force equal heights */
    margin-top: 40px;
    overflow-x: visible;
    overflow-y: visible;
    margin-bottom: 80px;
    position: relative; /* Easier way to understand this line is that it creates
                         * a new positioning context so rotated cards can layer
                         * z-index relative to container instead of the entire page*/
}

/* Using the > child selector for more targeted styling.
 * Ref: https://www.geeksforgeeks.org/css/what-is-greater-than-sign-selector-in-css/# and peer guidance */
.notes > article {
    max-width: 420px;
    min-width: 0;
    display: flex;
    position: relative;
    transform-origin: center;
}

.note-blue {
    max-width: 540px; /* Wider so all three instructions stay on one line each */
    background: var(--lightblue);
    padding: 32px;
    border-radius: 0;
    border: 1px solid rgba(74, 123, 167, 0.35); /* Slightly darker blue outline – matches grey card treatment */
    box-shadow: 0 4px 12px rgba(58, 8, 8, 0.05); /* Using --black color with opacity */
    transform: rotate(7deg) translatex(-12px);
    z-index: 2; /* sit on top */
}
.note-blue .note-inner {
    max-width: 500px; /* Enough width so “where to go.” and “more info.” don’t wrap */
}
.note-grey {
    background: var(--lightgrey);
    padding: 32px;
    border-radius: 0;
    border: 1px solid var(--coolgrey); /* Outline so grey card reads on light bg */
    box-shadow: 0 4px 12px rgba(58, 8, 8, 0.05); /* Using --black color with opacity */
    transform: rotate(-6deg) translateY(12px);
    z-index: 1;
}

.note-inner{
    background: var(--white);
    padding: 24px 32px;
    border-radius: 0;
    max-width: 380px; /* Updated this value because needs to be smaller than outer card */
    min-width: 0;
    box-sizing: border-box;
    margin: 0 auto; /* Centers the card horizontally in the layout */
}

.note-inner ul,
.note-inner ol {
    padding-left: 1.25rem; /* Keep bullets indented without big margins */
}

/* Mobile: undo the translate effect and change the flexbox direction to column
 * instead of default row so cards can be stacked vertically */
@media (max-width: 900px){
  .notes{
      flex-direction: column;
      gap: 40px;
      align-items: center;
      padding-inline: 16px;
      width:100%;
      overflow-x: clip; /* Prevents horizontal scroll */
    }

    /* Left card: pin to left edge, keep tilt */
    .note-grey{
        margin-left: 0;
        margin-right: auto; /* left aligned */
        transform: rotate(-6deg);
    }

    /* Right card: pin to right edge, keep tilt */
    .note-blue{
        margin-right: 32px; /* Add a margin so that it's not sooo right aligned*/
        margin-left: auto; /* Right aligned */
        transform: rotate(7deg);
    }
    /* Let the inner fill the card; remove desktop cap */
    .note-inner{
        max-width: none;
    }
}


/* WORK SPOTS PAGE */

/* Table styling based on this tutorial:
 * https://youtu.be/Oy9K7iz3aa4?si=SdvylTyoonh4m47W
 * Loosely followed and customized to match my Figma design, adapted through discussion with peers. */

/* Header bar */
.work-table{
    width: 100%;
    table-layout: fixed; /* Fixed column widths */
    border-collapse: separate; /* Rounded corners + spacing */
    border-spacing: 0; /* No gap between rows */
    color: var(--black);
    position: relative;
}

.work-table thead th{
    color: var(--black);
    font-weight: 500; /* Same as nav – table header is secondary to nav */
    text-transform: uppercase;
    text-align: left;
    padding: 12px 16px;
}
.work-table thead th:first-child{ border-top-left-radius: 0; border-bottom-left-radius: 0; }
.work-table thead th:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.work-table tbody td,
.work-table tbody th[scope="row"]{
    background-clip: padding-box; /* Make sure cell backgrounds don’t bleed past corners */
    padding: 18px 16px;
    vertical-align: middle;
    border: none;
    box-shadow: none;
}

/* Using the > child selector for more targeted styling.
 * Ref: https://www.geeksforgeeks.org/css/what-is-greater-than-sign-selector-in-css/# and peer guidance */
.work-table tbody tr > *:first-child{ border-top-left-radius: 0; border-bottom-left-radius: 0; }
.work-table tbody tr > *:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Style rows based on their data-status value ("loved" and "to-try").
 * Plan to enable future JS filtering by status, hence why data attributes were needed. */

/* Using data-* attributes to style cards and enable future filtering.
 * Ref: https://css-tricks.com/a-complete-guide-to-data-attributes/
 * and
 * https://dev.to/dev-harbiola/custom-data-attributes-in-html-a-guide-to-data--373 */

.work-table tbody tr[data-status="loved"]  > *{ background: var(--lightblue); }
.work-table tbody tr[data-status="to-try"] > *{ background: var(--lightgrey); }
/* Grey rows: subtle left border so they read on light bg (matches grey card treatment) */
.work-table tbody tr[data-status="to-try"] > *:first-child { border-left: 3px solid var(--coolgrey); }

/* This is the header, that applies to the entire row it's in.
 * In this case, the header is the name of the location. */
.work-table tbody th[scope="row"]{
    color: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    text-align: inherit;
}

/* Status pill on the right */
.work-table td:last-child{ text-align: left; }
.work-table .status{
    display: inline-block; /* Sits side by side with other text, but can style it like a block (e.g. autolayout Frame button on Figma) */
    padding: 10px 16px;
    background: var(--white);
    color: var(--black);
    border-radius: 8px;
    border: 1px solid var(--coolgrey); /* Outline so pill reads against row background */
    white-space: nowrap;
    text-transform: lowercase;
}

/* Set column widths on tables - fixed widths to prevent shifting */
.work-table th:nth-child(1),
.work-table td:nth-child(1) {width: 16%; min-width: 120px; } /* NAME */
.work-table th:nth-child(2),
.work-table td:nth-child(2) {width: 14%; min-width: 110px; } /* BOROUGH - increased more */
.work-table th:nth-child(3),
.work-table td:nth-child(3) {width: 18%; min-width: 160px; } /* LOCATION - reduced */
.work-table th:nth-child(4),
.work-table td:nth-child(4) {width: 22%; min-width: 160px; } /* HOURS */
.work-table th:nth-child(5),
.work-table td:nth-child(5) {width: 8%; min-width: 60px; }  /* WIFI */
.work-table th:nth-child(6),
.work-table td:nth-child(6) {width: 12%; min-width: 100px; } /* TYPE */
.work-table th:nth-child(7),
.work-table td:nth-child(7) {width: 10%; min-width: 80px; }  /* STATUS */

/* Allow text wrapping for all columns to prevent cutoff */
.work-table td,
.work-table th {
    overflow: visible;
    word-wrap: break-word;
    white-space: normal;
    vertical-align: top;
}

/* Fade non-hovered row */
/* Removed hover effects - no drop shadow or opacity changes */

/* Match card shadows */
/* Removed hover effects - no drop shadow or opacity changes */

/* Sticky table header: sits just under nav; opaque so rows are clipped (hidden) behind it, not visible through */
.work-table thead th {
    position: sticky;
    top: var(--header-height);
    background: var(--bg); /* Match page so bar blends; solid so rows hide behind it */
    z-index: 10; /* Below nav (1000) but above table body */
    box-shadow: 0 1px 0 rgba(58, 8, 8, 0.06); /* Thin line above row when stuck */
}

/* Hide some columns on smaller screens */
@media (max-width: 900px) {
    /* hide hours, wifi, type (columns 4, 5, 6) */
    .work-table th:nth-child(4),
    .work-table td:nth-child(4),
    .work-table th:nth-child(5),
    .work-table td:nth-child(5),
    .work-table th:nth-child(6),
    .work-table td:nth-child(6) {
        display: none;
    }

    /* Adjust row radius */
    .work-table thead th:first-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .work-table thead th:last-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* On mobile, hide borough, since this was causing horizontal scroll */
@media (max-width: 500px) {
    /* hide borough, hours, wifi, type (columns 2, 4, 5, 6) */
    .work-table th:nth-child(2),
    .work-table td:nth-child(2),
    .work-table th:nth-child(4),
    .work-table td:nth-child(4),
    .work-table th:nth-child(5),
    .work-table td:nth-child(5),
    .work-table th:nth-child(6),
    .work-table td:nth-child(6) {
        display: none;
    }
    
    /* Adjust column widths on mobile to ensure STATUS column is visible */
    .work-table th:nth-child(1),
    .work-table td:nth-child(1) {
        width: 25%; /* NAME - further reduced to give more space to STATUS */
        min-width: 90px; /* Further reduced */
    }
    
    .work-table th:nth-child(3),
    .work-table td:nth-child(3) {
        width: 40%; /* LOCATION - further reduced to give more space to STATUS */
        min-width: 100px; /* Further reduced */
    }
    
    .work-table th:nth-child(7),
    .work-table td:nth-child(7) {
        width: 35%; /* STATUS - increased to ensure full visibility */
        min-width: 100px; /* Increased to accommodate pill with padding */
    }
}

/* Mobile filter spacing adjustments */
@media (max-width: 768px) {
    .filters-wrapper {
        gap: 16px; /* Minimum gap between filter sections on mobile */
        flex-wrap: wrap; /* Allow wrapping if absolutely necessary */
    }
    
    .filter-section.status-section {
        flex: 1 1 auto; /* Allow status section to shrink if needed */
        min-width: 0; /* Allow flex shrinking */
    }
    
    .filter-section.location-section {
        flex: 0 0 auto; /* Keep borough dropdown from shrinking too much */
    }
    
    .filter-container {
        gap: 6px; /* Further reduce gap between status buttons on mobile */
    }
    
    .filter-btn {
        padding: 4px 8px; /* Further reduced padding on mobile */
        font-size: 14px; /* Slightly smaller font on mobile if needed */
    }
    
    .dropdown-active-filter {
        min-width: 100px;
        padding: 6px 12px;
        font-size: 14px;
    }
}

/* Extra small mobile devices - use smaller proportional font sizes, keep horizontal layout */
@media (max-width: 480px) {
    .filters-wrapper {
        gap: 12px; /* Minimum gap between filter sections */
        /* Keep horizontal layout - no stacking */
    }
    
    /* Proportional text size reduction (base 16px → ~87.5% = 14px, buttons ~81% = 13px) */
    .filter-label {
        font-size: 14px; /* ~87.5% of 16px - proportionally smaller */
        line-height: 1.5; /* Maintain same line-height ratio */
    }
    
    .filter-btn {
        padding: 3px 7px; /* Proportional padding reduction */
        font-size: 13px; /* ~81% of 16px - slightly smaller than labels */
        line-height: 1.5; /* Maintain same line-height ratio */
    }
    
    .dropdown-label {
        font-size: 14px; /* Match filter label size */
        line-height: 1.5; /* Maintain same line-height ratio */
    }
    
    .dropdown-active-filter {
        min-width: 90px;
        font-size: 13px;
        padding: 6px 10px;
        line-height: 1.5;
    }
    
    .dropdown-option {
        font-size: 13px; /* Consistent with buttons */
        padding: 3px 10px; /* Proportional padding */
        line-height: 1.5; /* Maintain same line-height ratio */
    }
    
    .dropdown-arrow {
        width: 14px; /* Proportionally smaller arrow (87.5% of 16px) */
        height: 14px;
    }
    
    .filter-container {
        gap: 5px; /* Tighter gap between status buttons */
    }
}


/* ACTIVITIES / MUSEUMS / SIGHTSEEING PAGES */

/* Page layout */
.activities__cards{
    max-width: 1200px; /* Consistent width for activities, museums, sightseeing, and workspots pages */
    display: block;
    margin: 0 auto;
    padding: 0 24px 24px;
    box-sizing: border-box;
}

.page-title {
    text-align: center;
    margin: 24px 0 32px;
    padding-top: var(--header-height);
}

/* FILTER BUTTONS – Cosmos-style: invisible container, pill dropdowns, text = selected */
.filters-wrapper {
    margin: 0 0 32px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box;
}

.filter-section {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.filter-section .filter-container {
    display: none; /* Status is now a dropdown pill */
}

/* Pill dropdown (status + borough): single clickable pill, text shows selection */
.custom-dropdown {
    position: relative;
    display: inline-flex;
}

/* Hide the label trigger; pill is the only control */
.dropdown-trigger {
    display: none;
}

/* Pill button: shows selected value + chevron (Cosmos-style). Text centred; arrow fixed right. */
.dropdown-active-filter {
    position: relative;
    background: var(--lightgrey);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 28px 8px 12px; /* snug padding for text + arrow */
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 15px;
    color: var(--black);
    text-transform: lowercase;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Fixed width so pill doesn’t resize when selection changes (based on longest option) */
.filter-section.status-section .dropdown-active-filter {
    width: 10.25em; /* fits "all statuses" */
}

.filter-section.location-section .dropdown-active-filter {
    width: 11.25em; /* fits "all locations" */
}

.dropdown-active-filter:hover {
    background: var(--coolgrey);
}

.dropdown-active-filter .filter-text {
    text-align: center;
}

.dropdown-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--darkgrey);
    transition: transform 0.2s ease, color 0.2s ease;
}

.custom-dropdown.active .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown.active .dropdown-active-filter {
    border-color: rgba(0, 0, 0, 0.08);
}

.custom-dropdown.active .dropdown-active-filter .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: var(--black);
}

.dropdown-label {
    display: none;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(58, 8, 8, 0.1);
    border: 1px solid rgba(58, 8, 8, 0.08);
}

.custom-dropdown.active .dropdown-menu {
    display: flex;
}

.dropdown-option {
    background: transparent;
    border: none;
    padding: 8px 14px;
    text-align: left;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 15px;
    color: var(--darkgrey);
    text-transform: lowercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 6px;
    margin: 0 6px;
    box-sizing: border-box;
}

.dropdown-option:hover,
.dropdown-option:focus {
    background: var(--coolgrey);
    color: var(--black);
    outline: none;
}

.dropdown-option.active {
    color: var(--black);
    font-weight: 400;
}

/* Hide native selects */
.location-select.hidden,
.status-select.hidden {
    display: none;
}

.filter-section.location-section .filter-container {
    display: none;
}

/* Labels hidden – pill text is the selection */
.filter-label {
    display: none;
}

/* Borough pill: ensure long options fit */
/* Location pill width set above (12.5em) */

.filter-container {
    display: flex;
    gap: 8px; /* Reduced gap between buttons on mobile */
    flex-wrap: nowrap; /* Keep buttons on one line */
    align-items: center;
}


.filter-btn {
    background: transparent;
    color: var(--darkgrey); /* Grey text - inactive state */
    border: none;
    border-radius: 4px; /* Slightly rounded rectangle */
    padding: 4px 10px; /* Reduced horizontal padding to save space */
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    text-transform: lowercase;
    /* Prevent layout shift */
    box-sizing: border-box;
    min-width: fit-content;
    font-weight: 300; /* Light - inactive state */
    font-size: 16px; /* Match dropdown font size */
    line-height: 1.5; /* Match dropdown line-height for consistent height */
}

.filter-btn:hover,
.filter-btn:focus {
    background: transparent; /* No background on hover */
    color: var(--black); /* Black text on hover */
    outline: none;
}

.filter-btn.active {
    background: var(--lightgrey);
    color: var(--black);
    font-weight: 300; /* Keep light weight */
}

/* Loading state - hide content until ready */
.cards,
.work-table tbody {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cards:not(.loaded):not(.loading),
.cards.loading,
.work-table tbody:not(.loaded):not(.loading),
.work-table tbody.loading {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease, visibility 0.1s ease;
}

.cards.loaded,
.work-table tbody.loaded {
    opacity: 1;
    visibility: visible;
}

/* Loading spinner */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 64px 0;
}

.loading-spinner.hidden {
    display: none;
}

.loading-spinner::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid var(--lightgrey);
    border-top-color: var(--darkgrey);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Masonry-style 3 columns */
/* Followed these masonry layout tutorials:
 * https://www.youtube.com/watch?v=c-OfB6Vq1tA
 * https://youtube.com/shorts/NNLxPcEnZDY?si=Vd6mY-3x9eC6JTME*/
.cards{
    columns: 250px;
    column-gap: var(--card-gap);
}

/* Behaviour of all cards in the masonry columns */
.card{
    display: block;
    break-inside: avoid; /* prevents browser from spliting element across columns (card stays intact)*/
    margin-bottom: var(--card-gap); /* add a spacing below each card, to create a vertical gap between stacked cards while keeping the masonry layout */
}

/* A single card itself */
.card__surface{
    border-radius: 0;
    padding: 32px;
}

/* Style rows based on their data-status value ("loved" and "to-try").
 * Plan to enable future JS filtering by status, hence why data attributes were needed. */

/* Using data-* attributes to style cards and enable future filtering.
 * Ref: https://css-tricks.com/a-complete-guide-to-data-attributes/
 * and
 * https://dev.to/dev-harbiola/custom-data-attributes-in-html-a-guide-to-data--373 */

.card[data-status="to-try"] .card__surface {
    background: var(--lightgrey);
    border: 1px solid var(--coolgrey); /* Outline so grey card reads on light bg */
}
.card[data-status="loved"] .card__surface {
    background: var(--lightblue);
    border: 1px solid rgba(74, 123, 167, 0.35); /* Slightly darker blue outline – matches grey card treatment */
}
.card[data-status="loved"] .card__media img {
    filter: grayscale(100%);
    transition: filter 0.2s ease;
}
/* restore color on hover */
.card[data-status="loved"]:hover .card__media img {
    filter: grayscale(0%);
}

/* Tags + title
 * Typographic hierarchy: title (heaviest) → body → tags (lightest).
 * Tags and body are de-emphasized via size and color so titles read first.
 * Ref: type scale ratios ~1.2, secondary text 75–85% of body size. */
.card__tags { display: flex; gap: 8px; flex-wrap: wrap; }

.card__tags .tag {
    display: inline-block;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: rgba(253, 253, 253, 0.5); /* var(--white) with 50% opacity */
    color: var(--darkgrey); /* Lighter color for metadata/secondary hierarchy */
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: var(--ls-wide);
    text-decoration: none;
}
.card__title {
    margin: 32px 0 16px;
    font-weight: 700; /* Bold – heaviest in card hierarchy */
    font-size: 18px;
}
.card__body {
    font-size: 11px;
}

/* Media: image fills card width, height hugs content */
.card__media { margin: 0; }
.card__media img{
    display: block;
    width: 100%; /* Fill width */
    height: auto; /* Hug height */
    border-radius: 0;
}

/* Text that goes under media, to give credit to original author — same hierarchy as tags */
.card__credit {
    margin: 8px 0;
    hyphens: auto;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: var(--ls-wide);
    color: var(--darkgrey);
}

/* Card body: full paragraph, slightly smaller text */
.card__body {
    font-size: 10px;
}
.card__body p {
    margin: 0;
}

/* Hover/active interactions that apply only to the card surface */
/* Removed hover effects - no drop shadow or opacity changes */

/* Responsive behaviour: I want the padding to be a little thinner on the cards
 * so the text and images can take up more space */
@media (max-width: 1000px){
    .card__surface{
        padding: 24px;
    }
}

/* REDUCED MOTION - CSS consolidated at the bottom */
/* Rules adapted from:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
    .notes > article{ transition: none; }
    .card[data-status="loved"] .card__media img { transition: none ;}
    a {transition: none;}
    .cards.loading,
    .cards.loaded,
    .work-table tbody.loading,
    .work-table tbody.loaded { transition: none; }
    .loading-spinner::after { animation: none; }
}