/* Note: This CSS is to (1) match the Squarespace site and (2) match the archive design */
/* Note: Did not add global hover state for links. Create global wavy hover state if needed */



/* === ROOT STYLES === */
:root {
    /* Layer 1: Raw palette Squarespace*/
    --off-white: #EAE6E1;
    --beige:     #D2C4B2;
    --topaz:     #AA774B;
    --olive:     #8C874A;
    --chocolate: #3F2517;

    /* Layer 1: Raw palette HPMCA */
    --hpmca-beige: #F5EDD2;

    /* Layer 2: Semantic tokens */
    --color-primary: var(--chocolate);
    --color-text:    var(--chocolate);
    --color-bg:      var(--off-white);

    /* Font families */
    --title-font: 'Ojuju', 'Merriweather', serif; 
    --header-font: 'Atkinson Hyperlegible Next', 'Lato', 'Open Sans', sans-serif;  
    --body-font: 'Atkinson Hyperlegible Next', 'Lato', 'Open Sans', sans-serif;  

    /* Type scale */
    --text-sm:   1rem;
    --text-base: 1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.875rem;
    /* Weights */
    --font-normal:    400;
    --font-medium:    500;
    --font-bold:      700;
    --font-extrabold: 800;

    /* === ROOTS FROM SQUARESPACE === */
    --large-text-size: 1.7rem;
    --large-text-size-value: 1.7;
    --normal-text-size: 1.3rem;
    --normal-text-size-value: 1.3;

    --site-navigation-font-font-size: var(--normal-text-size);
    --site-navigation-font-font-size-value: var(--normal-text-size-value);

    /* computed from the static custom css squarespace file*/
    --site-title-font-font-size: 2rem; 
    --site-title-font-font-size-value: 2;
    --mobile-site-title-font-font-size: 2.5rem;
    --mobile-site-title-font-font-size-value: 2.5
}



/* === FONT STYLES === */
body, optgroup, textarea {
    font-family: var(--body-font);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--chocolate);
}
button, input, select, .btn-primary, .btn-primary-focus{
    font-family: var(--body-font);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
}
select, input, a {
    color: var(--chocolate);
}
a:visited {
    color: inherit;
}
h1, h2, h3, h4 {
    color: var(--chocolate); /* CHANGE AS NEEDED */
    margin-top: 0;
}
h5, h6 {
    color: var(--chocolate); /* CHANGE AS NEEDED */
    font-family: var(--body-font);
    margin-top: 0;
}
h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: 1.2;
    margin-bottom: 1.875rem
}
.main-footer {
    font-size: var(--text-sm);
}


/* === OTHER GLOBALS === */
html {
  scroll-behavior: smooth;
}
.vertical-spacer-60 {
    height: 60px;
}
.vertical-spacer-30 {
    height: 30px;
}
.break.opaque {
    border-color: var(--chocolate);
}




/* ======================= */
/* === HEADER, NAV FIX === */
/* ======================= */
/* omeka has an additional advanced search banner */
/* remove header "advanced search" banner */
.main-header {
    border-top: 0px !important;
}
.main-header__top-bar {
    display: none !important;
}



/* === NAV LINKS CONTAINER === */
/* sizing math copied from squarespace */
.main-navigation__container {
    font-size: calc((var(--site-navigation-font-font-size-value) - 1) * 1.2vw + 1rem) !important;
}
/* === NAVIGATION LINKS === */
/* Base state for links */
.main-navigation .navigation > li > a {
    color: var(--chocolate) !important;
    font-family: var(--header-font);
    border: none !important;
    margin: 0 0 0 2vw; /*left margin to space nav links*/
    padding: calc(.1em + 2vw) 0 !important; /* adjusted padding (this method made the hover effect work better*/
    border-radius: 0 !important;
    font-weight: var(--font-medium); /* 500 Match Squarespace */
}
/* Active state for links */
.main-navigation .navigation > li.active > a {
    color: var(--chocolate) !important;
    font-weight: var(--font-medium); /* 500 Match Squarespace */
    border: none !important;
    border-radius: 0 !important;
    /* Squarespace underline effect */
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
background-position: 0 calc(100% - 2vw) !important;
}
/* Hover state for links */
/* remove all hover states */
.main-navigation .navigation > li > a:hover,
.main-navigation .navigation > li > a:focus {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}
/* sub-menu links */
.main-navigation .navigation>li>ul a {
    color: var(--chocolate);
    font-size: var(--text-base);
    text-decoration: none;
    font-weight: var(--font-medium) !important;
}
.main-navigation .navigation>li>ul a:hover {
    text-decoration: underline
}
/* wavy not in use but added for future-proofing
.main-navigation .navigation>li>ul a:hover {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
}
*/

/* === MOBILE BREAK POINT FOR NAV === */
/* Change Navigation & Search Breakpoint to 768px */
@media screen and (min-width: 768px) {
    /* 1. Position the navigation block (pushes it to the right) */
    body .main-header .main-navigation {
        margin-left: auto !important;
        margin-right: 20px !important;
        order: initial !important;
    }
    /* 2. Show the text links container */
    body .main-header .main-navigation__container {
        display: block !important;
    }
    /* 3. Hide the mobile hamburger toggle */
    body .main-header .main-navigation__toggle {
        display: none !important;
    }
    /* 4. Force the mobile menu drawer to stay hidden */
    body .menu-drawer {
        transform: translateX(-100%) !important;
    }
    /* 5. reset the Search Button spacing so it stops fighting the Nav */
    body .main-header .main-search-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        order: initial !important;
    }
}

/* === HEADER ICONS === */
/* Burger menu styling */
.main-navigation__toggle span {
    height: 1px !important; /* Forces the thin line */
    border-radius: 0px !important;
    background: var(--chocolate) !important; /* Matches your color scheme */
    transition: 140ms ease-in-out;
}

/* === CUSTOM NAV BAR FULL WIDTH DESKTOP === */
.main-header .container {
    max-width: 100%; /* full width since body is not */
}
@media screen and (min-width: 768px) {
    body .main-header .container {
        padding-left: 4vw !important;  
        padding-right: 4vw !important; 
        padding-top: 0 !important;  
        padding-bottom: 0 !important; 
    }
}

/* === CUSTOM NAV BAR FULL WIDTH MOBILE === */
/* adjusted to match squarespace */
.main-navigation__toggle {
    margin: 0;
}
body .main-header .container {
    padding-left: 6vw;  
    padding-right: 6vw; 
    padding-top: 5.5vw;  
    padding-bottom: 5.5vw; 
}

/* === LOGO FIX === */
.main-header__site-title a {
    font-family: var(--title-font) !important;
    color: var(--chocolate) !important;
    font-weight: var(--font-extrabold) !important; /* Adjusted to 800 */
    text-decoration: none !important;

    font-size: calc((var(--site-title-font-font-size-value) - 1) * 1.2vw + 1rem) !important;
}
/* === LOGO FIX (Mobile Override) === */
@media screen and (max-width: 767px) {
    body .main-header__site-title a {
        /* Mobile-Specific Size */
        font-size: calc((var(--mobile-site-title-font-font-size-value) - 1) * 1.2vw + 1rem) !important;
    }
}


/* ================== */
/* ===    BODY    === */
/* ================== */

/* === BACKGROUND COLOR === */
.main-header {
    background-color: var(--hpmca-beige);
}
body {
    background: var(--hpmca-beige);
}
#main-content {
    padding-left: 4vw;  
    padding-right: 4vw; 
}

/* === FONTS === */
/* see FONT STYLES above */


/* === CUSTOM PAGE WIDTHS === */
#main-content .max-w-800 {
    max-width: 800px; /* scaled down, used 800 to match cards */
    left: 0;  /* pin to left */
    right: 0; /* pin to right */
    margin: 0 auto; /* auto margins for centering */
}
#main-content .max-w-840 {
    max-width: 800px; /* scaled down, used 840 to match contribute */
    left: 0;  /* pin to left */
    right: 0; /* pin to right */
    margin: 0 auto; /* auto margins for centering */
}

/* === PAGETITLE DESIGN === */
.title,.block-pageTitle {
    border-radius: 0 0 0 0;
    padding-left: 0;
}
.title::before,.block-pageTitle::before {
    background-color: none;
    border-radius: 0 0 0 0;
    width: 0;
}






/* =============================== */
/* === ITEMS / ITEM SETS PAGES === */
/* =============================== */
/* color border for fields */
input[type=text],input[type=email],input[type=url],input[type=password],input[type=search],input[type=number],input[type=tel],input[type=range],input[type=date],input[type=month],input[type=week],input[type=time],input[type=datetime],input[type=datetime-local],input[type=color],textarea,select {
    border: 1px solid var(--chocolate);
}
/* grid | list design */
.browse-controls {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
}
.browse-controls .layout-toggle button:disabled,.browse-controls .layout-toggle button[disabled] .browse-controls .layout-toggle button.disabled {
    color: var(--topaz);
    font-size: var(--text-sm);
}
.browse-controls .layout-toggle .layout-toggle-separator {
    border-left: 1px solid;
    height: 1rem;
    align-self: center;
}
/* advanced search */
.browse-controls .advanced-search-container a {
    font-size: var(--text-sm);
    color: var(--chocolate);
}
/* showing 1 to 2 of 2 results */
.pagination {
    border-bottom: none; /* removed lines */
    border-top: 1px none;
    justify-content: space-between;
    margin: 0;
}
.pagination .row-count {
    color: var(--chocolate);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
}
/* === (<) page (input, ie. 1) of (8) (go) (>) === */
/* padding for (input, ie. 1) */
@media(min-width: 600px) {
    .pagination input[type=text] {
        padding:8px 16px;
        border-radius: 30px
    }
}
/* padding for (go) */
@media(min-width: 600px) {
    .pagination input[type=submit] {
        padding:8px 16px
    }
}
/* font size for (<) and (>) */
.pagination .button {
    font-size: var(--text-sm);
}
.pagination .button.disabled {
    border-color: var(--topaz);
    color: var(--topaz);
}
/* font fize "page" & "of 8" */
.pagination .pager label,.pagination .pager .page-count {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--topaz);
}
/* === (title) (decending) (sort) === */
/* padding for (sort) */
.browse-controls .sorting button {
    padding: 8px 16px
}




/* ================= */
/* ===   CARDS   === */
/* ================= */

/* === GENERAL FIXES === */
/* border/padding fixes */
@media(min-width: 768px) {
    .resource-grid .resource__thumbnail {
        margin: 10px 0 10px 10px
    }
}
/* max height of the cards by omeka  */
.resource-grid .resource__thumbnail img {
    max-height: 800px;
}
.resource-list .resource__thumbnail img {
    width: 30dvw;
    max-width: 300px;
    height: auto;
}

/* === FIX CONTENT CARDS BORDER RADIUS === */
/* omeka had a leaf shape by default */
/* added dashed fix and border color */
.resource-grid .resource {
    border-radius: 8px; /* was 20px 0; */
    background-color: var(--hpmca-beige);
    border: none; /* removed dashed border to prep for w3 svg fix */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' stroke='%234A2E1B' stroke-width='2' stroke-dasharray='8, 3' /%3e%3c/svg%3e");
}
.resource-list .resource {
    border-radius: 8px; /* was 20px 0; */
    background-color: var(--hpmca-beige);
    border: none; /* removed dashed border to prep for w3 svg fix */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' stroke='%234A2E1B' stroke-width='2' stroke-dasharray='8, 3' /%3e%3c/svg%3e");
}
#main-content img {
    border-radius: 0 0 0 0; /* was 20px 0; */
    border: none; /* removed border to match brand style */
}
#main-content .resource__thumbnail img {
    border-radius: 5px; 
    border: solid 1px var(--chocolate); 
}




/* === LIST: CARD FORMAT === */
/* fixes for desktop view */
.resource-list .resource__content {
    max-width: 1000px;
}
.resource-list .resource {
    max-width: 800px;
    margin-left: auto; /* centers the cards */
    margin-right: auto; /* centers the cards */
}


/* === GRID: VERTICAL CARD FORMAT === */
/* fixes for desktop view */
@media(min-width: 768px) {
    .resource-grid .resource {
        flex-direction: column;
    }
    .resource-grid .resource__thumbnail {
        width: calc(100% - 20px);
    }  
@media(min-width: 1024px) {
    .resource-grid .grid-sizer, 
    .resource-grid .resource {
        width: 23.5%; 
    }
    }
}
.resource {
    /* fixes for mobile view */
    @media(max-width: 767px) {
        flex-direction: column;
    }
}


/* === CARDS STYLES === */
/* font, color, hover */
.resource__content a {
    color: var(--chocolate);
    font-style: var(--font-bold);
    text-decoration: underline;
}
.resource__content a:hover {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none; 
}




/* ============================== */
/* =========== FOOTER =========== */
/* ============================== */


/* === FOOTER FIXES (REMOVE OMEKA DESIGN) === */
/* remove copy right bottom section */
.main-footer__bottom {
    display: none;
}
/* fix social media icons */
.main-footer__social-network a {
    display: flex;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 50%;
    height: 48px;
    justify-content: center;
    text-decoration: none;
    width: 48px;
}
.main-footer__social-network a:hover {
    border: 1px solid #fff;
}
/* remove weird dashed lines */
.main-footer__heading::after {
    background-image: none;
}
.main-footer__top {
    background: none;
}


/* =========================== */
/* ===== ADVANCED SEARCH ===== */
/* =========================== */
/* match card design - dashed lines */
.field,fieldset {
    border: none;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 25px;
    background-color: var(--hpmca-beige);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' stroke='%23AA774B' stroke-width='2' stroke-dasharray='8, 3' /%3e%3c/svg%3e");
}
/* color of text */
label,.label,legend {
    color: var(--chocolate);
}
/* color of (+) */
button.add-value,button.remove-value {
    border: 1px solid var(--chocolate);
}






/* ======================== */
/* ====== COLLECTING ====== */
/* ======================== */
/* spacing under map */
.field .inputs .collecting-map-label {
    margin-top: 20px;
}
/* checkbox styling */
input[type=checkbox] {
    border: 1px solid var(--chocolate);
}





/* --- CUSTOM BUTTONS --- */
.language-btn {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}
/* Custom Buttons like Languages */
.btn-primary {
    border-radius: 30px;
    cursor: pointer;
    padding: 8px 15px;
    text-decoration: none;
    transition: all .3s ease;
    background-color: #fff;
    border: 1px solid var(--chocolate);
    color: var(--chocolate);
}
.btn-primary:hover {
    border: 1px solid var(--secondary-dark);
    color: var(--secondary-dark);
}
.btn-primary-focus, a.btn-primary-focus {
    border-radius: 30px;
    padding: 8px 15px;
    text-decoration: none;
    background-color: var(--hpmca-beige);
    border: 1px solid var(--topaz);
    color: var(--topaz);
    text-color: var(--topaz);
}




/* ======================== */
/* ===== ARCHIVE/HOME ===== */
/* ======================== */
/* spacing below the preview browse items block */
.preview-block {
    margin: 1rem 0 1% !important;
}
/* font weight of "recently added", change h3 here if changed in omeka */
.remove-bold h3 {
    font-weight: var(--font-normal);
}

/* === HARLEM GRAPHIC === */
/* === CONTAINER LAYOUT === */
.archive-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.archive-hero-section .hero-svg-container {
  width: 100%; 
  max-width: 800px; /* max width for SVG container */
  height: auto;
  padding-bottom: 2rem; /* Default padding for mobile screens */
}
/* === SVG TEXT STYLING === */
.archive-hero-section svg text {
  text-anchor: middle; /* Centers text perfectly on the X axis */
  dominant-baseline: middle; /* Centers text perfectly on the Y axis */
  fill: var(--chocolate);
  text-transform: uppercase;
  letter-spacing: normal; 
}
/* Top Line: Subtitle */
.archive-hero-section .svg-subtitle {
  font-family: var(--header-font);
  font-weight: var(--font-medium);
  font-size: 20px; /* scale to match title */
}
/* Middle Line: Massive "Harlem" */
.archive-hero-section .svg-title {
  font-family: var(--title-font);
  font-weight: var(--font-extrabold);
  font-size: 120px; /* scale to match subtitle and tagline */
}
/* Bottom Line: Tagline */
.archive-hero-section .svg-tagline {
  font-family: var(--header-font);
  font-weight: var(--font-medium);
  font-size: 20px; /* scale to match title */
}
/* === SVG ELEMENT RESPONSIVENESS === */
.archive-hero-section .hero-svg-container svg {
  width: 100%;
  height: auto;
  display: block; /* Prevents a tiny gap at the bottom of the SVG */
}
/* === ACCESSIBILITY (SCREEN READERS ONLY) === */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* === MOBILE RESPONSIVENESS === */
@media screen and (max-width: 768px) {
  .archive-hero-section {
    /* Top/Bottom padding: 2rem. 
       Left/Right padding: exactly 20px for the full-bleed layout. */
    padding: 2rem 0;
  }
}
@media screen and (min-width: 1024px) {
  .archive-hero-section .hero-svg-container {
    padding-bottom: 4rem; /* Increases padding on larger screens */
  }
}