/*
=============================================================================
  CUSTOM.CSS — Minimalist Child Theme Overrides
  
  HOW TO USE THIS FILE:
  - Each section below matches a part of your website.
  - To make a change, find the section you want, then edit the value
    to the RIGHT of the colon (:) on each line.
  - After editing, save this file and reload your website to see changes.
  
  QUICK CSS TIPS:
  - Colors can be written as names ("red"), hex codes ("#ff0000"),
    or rgb values ("rgb(255, 0, 0)"). Use a tool like coolors.co to pick.
  - Font sizes use "px" (pixels) — bigger number = bigger text.
  - "em" units are relative to the current font size (1em = 100%, 1.5em = 150%).
  - If a line is greyed out with (star and slash) in front, it's a comment (not active).
  - The "!important" tag forces your rule to win over the parent theme's rule.
    You'll need it whenever the parent theme is being stubborn.
=============================================================================
*/


/* =============================================================================
   1. COLORS — Global Color Palette
   Change these to instantly retheme the whole site.
   The parent theme uses a purple palette; swap these out for any colors you like.
   
   HOW IT WORKS: We define "CSS custom properties" (variables) here on :root
   (the whole page), then use them throughout the file below. If you want to
   change the main accent color sitewide, you only need to edit it once here.
============================================================================= */

:root {
  --color-primary: #A0522D; /* Amber Walnut */
  --color-primary-dark: #6B3A2A; /* Dark Roast */
  --color-primary-light: #C5956A; /* Dusty Rose Amber */
  --color-primary-mid: #8C6247; /* Faded Umber */
  --color-bg: #F5EFE6; /* Aged Linen */
  --color-text: #3D2B1F; /* Inkwell */
  --color-heading: #5C4A3A; /* Charcoal Bark */
  --color-border: #D4C4B0; /* Pale Driftwood */
  --color-button-bg: #EDE4D8; /* Warm Stone */
}


/* =============================================================================
   2. BODY & PAGE BACKGROUND
   Controls the overall page background and base text styles.
============================================================================= */

body {
  background-color: var(--color-bg);  /* Page background. Change --color-bg above */
  color: var(--color-text);           /* Default text color */
  
  /* --- FONT: Body Text ---
     Replace the font name below with any Google Font you've imported,
     or any web-safe font (Arial, Georgia, Verdana, etc.)
     The fonts after the first are "fallbacks" used if the first isn't available. */
  font-family: "Lato", Verdana, Arial, sans-serif;
  
  font-size: 16px;    /* Base font size. Most other sizes scale from this. */
  line-height: 1.6;   /* Space between lines. 1.6 = 160% of font-size. */
}


/* =============================================================================
   3. HEADINGS (H1, H2, H3, H4, H5, H6)
   H1 is the biggest, H6 is the smallest.
   The parent theme uses a different font family for headings vs. body text.
============================================================================= */

h1, h2, h3, h4, h5, h6 {
  /* --- FONT: Headings ---
     Change this to use a different font just for headings. */
  font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
  
  color: var(--color-heading); /* Heading color — edit --color-heading above */
}

h1 {
  font-size: 40px;    /* The biggest heading — usually the page title */
  /* text-transform: uppercase; */ /* Uncomment this to make H1 all-caps */
}

h2 {
  font-size: 32px;
  border-top-color: var(--color-border); /* The line above H2 headings */
}

h3 {
  font-size: 24px;
}


/* =============================================================================
   4. SITE TITLE
   The big name/logo text in the top-left of your site.
============================================================================= */

#site-title {
  color: var(--color-primary-dark);  /* Title text color */
  font-size: 40px;                   /* Title size */
  font-weight: bold;
  
  /* font-family: "Georgia", serif; */ /* Uncomment to use a different font */
}

#site-title a {
  color: var(--color-primary-dark);  /* Color of the title when it's a link */
  text-decoration: none;             /* Removes the underline from the title link */
}

#site-title a:hover {
  color: var(--color-primary);       /* Color when you hover over the title */
  text-decoration: none;
}


/* =============================================================================
   5. LINKS
   Styles for clickable text links throughout the site.
   "a" = the link itself. "a:hover" = when your mouse is over it.
   "a:visited" = a link you've already clicked. "a:active" = while clicking.
============================================================================= */

a {
  color: var(--color-primary);   /* Normal link color */
  text-decoration: none;         /* "none" removes underline; use "underline" to add it back */
}

a:hover {
  color: var(--color-primary-light);  /* Color when hovering */
  text-decoration: underline;          /* Shows underline on hover */
}

a:visited {
  color: var(--color-primary-mid);  /* Color for already-visited links */
}

a:active {
  color: var(--color-primary-light); /* Color while the link is being clicked */
}


/* =============================================================================
   6. BUTTONS
   Covers submit buttons, the "View Items" link, and similar button-style elements.
   "input[type=submit]" = form submit buttons
   "button" = HTML button elements
   ".button" = anything with class="button"
============================================================================= */

input[type=submit],
button,
.button {
  background-color: var(--color-button-bg); /* Default button background */
  color: var(--color-text);                 /* Button text color */
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  
  /* border-radius: 4px; */ /* Uncomment for rounded corners on buttons */
}

input[type=submit]:hover,
button:hover,
.button:hover {
  background-color: var(--color-primary);  /* Button background on hover */
  color: #ffffff;                           /* Button text color on hover */
}

input[type=submit]:active,
button:active,
.button:active {
  background-color: var(--color-primary-light); /* Background while clicking */
}


/* =============================================================================
   7. TOP NAVIGATION BAR
   The main menu across the top of your site.
   ".nav-menu" = the menu bar background
   ".nav-item" = each individual menu item tab
============================================================================= */

/* The navigation bar background */
#top-nav .nav-menu {
  background-color: var(--color-button-bg); /* Bar background color */
  
  /* font-size: 15px; */ /* Uncomment to change menu font size */
}

/* Each nav tab (desktop view) */
#top-nav .nav-menu .nav-item {
  background-color: var(--color-button-bg); /* Tab background */
}

/* Nav link colors (desktop) */
#top-nav .nav-menu a:link,
#top-nav .nav-menu a:visited {
  color: var(--color-primary); /* Link text color in nav */
}

/* Nav link on hover */
#top-nav .nav-menu a:hover,
#top-nav .nav-menu a:focus {
  background-color: var(--color-primary); /* Background when hovering a nav link */
  color: #ffffff;
}

/* The currently active/selected nav item */
#top-nav .nav-menu .active,
#top-nav .nav-menu .nav-item.active {
  background-color: var(--color-primary-mid); /* Active tab background */
}

#top-nav .nav-menu .active a {
  color: #ffffff; /* Active tab text color */
}

/* Dropdown sub-menus */
#top-nav .nav-menu .sub-nav.open {
  background-color: #f7f7f7;    /* Dropdown panel background */
  border: 1px solid #6f6f6f;    /* Dropdown panel border */
}

#top-nav .nav-menu .sub-nav.open li a {
  color: var(--color-primary);  /* Dropdown item text color */
}

#top-nav .nav-menu .sub-nav.open li a:hover {
  background-color: #A0522D;    /* Dropdown item hover background */
  color: #ffffff;
}


/* =============================================================================
   8. HEADER & FOOTER
   The very top and bottom sections of every page.
============================================================================= */

header {
  padding: 0 24px;
  /* background-color: #f5f5f5; */ /* Uncomment to add a header background */
  /* border-bottom: 2px solid var(--color-primary); */ /* Uncomment for a header underline */
}

footer {
  padding: 0.5em 0;
  border-top: 5px double var(--color-border); /* The decorative line above the footer */
  
  /* color: #888; */              /* Uncomment to make footer text lighter */
  /* font-size: 14px; */          /* Uncomment to make footer text smaller */
  /* background-color: #f5f5f5; */ /* Uncomment to add a footer background color */
}


/* =============================================================================
   9. CONTENT AREA
   The main content block where page text and items appear.
============================================================================= */

#content {
  padding: 24px;         /* Space around the content (top/bottom and left/right) */
  
  /* max-width: 800px; */ /* Uncomment to cap the content width for readability */
}

/* The outer wrapper that limits the whole page width */
#wrap {
  max-width: 59em;  /* How wide the site can get. Increase for a wider layout. */
  margin: auto;     /* Centers the site horizontally */
}


/* =============================================================================
   10. ITEMS & COLLECTIONS
   Styles for the boxes and listings that show your archive items/collections.
============================================================================= */

/* Border at the bottom of each item in a list */
#recent-items .item {
  border-bottom: 1px solid var(--color-border);
}

/* The line above each metadata field on an item's detail page */
.show .element {
  border-top: 1px solid var(--color-border);
}

/* Collection item borders */
.collections .item {
  border-top: 1px solid var(--color-border);
}

/* The stacked shadow on collection/exhibit thumbnail images */
.collection .image img,
.exhibit .image img {
  box-shadow: -6px -6px 0 #bbb, -12px -12px 0 #eee; /* Decorative stack effect */
}

/* "View Items" style link/button */
.view-items-link {
  background-color: var(--color-button-bg);
  color: var(--color-text);
}

.view-items-link:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}


/* =============================================================================
   11. SEARCH BAR
   The search box in the header area.
============================================================================= */

/* The search/submit button icon */
#search-container button,
#search-container .show-advanced {
  color: var(--color-primary);   /* Icon color */
}

#search-container button:hover,
#search-container .show-advanced:hover {
  color: #ffffff;                /* Icon color on hover (bg changes to primary) */
}

/* The dropdown advanced search panel */
#search-container #advanced-form {
  background-color: var(--color-bg);
  border-color: var(--color-border);
}


/* =============================================================================
   12. PAGINATION
   The "Previous / Next" navigation between pages of results.
============================================================================= */

.pagination .pagination_next a,
.pagination .pagination_previous a,
.pagination .previous-page a,
.pagination .next-page a {
  background-color: var(--color-button-bg); /* Arrow button background */
}

.pagination .pagination_next a:hover,
.pagination .pagination_previous a:hover,
.pagination .previous-page a:hover,
.pagination .next-page a:hover {
  background-color: var(--color-primary); /* Arrow button hover background */
  color: #ffffff;
}


/* =============================================================================
   13. TABLES
   Styles for any data tables in your archive.
============================================================================= */

table {
  width: 100%;
  margin: 1em 0;
}

th, td {
  border-bottom: 1px solid var(--color-border); /* Row divider lines */
  padding: 0.5em 0;
}

th {
  border-width: 3px;             /* Makes the header row's bottom line thicker */
  /* color: var(--color-primary); */ /* Uncomment to color table headers */
  /* font-weight: bold; */           /* Uncomment to bold table headers */
}


/* =============================================================================
   14. EXHIBITS (Omeka Exhibits Plugin)
   Only applies if you use the Exhibits plugin.
============================================================================= */

/* The currently viewed exhibit page highlight */
#exhibit-pages.full .current-page {
  background-color: var(--color-primary-light);
  color: #ffffff;
}

/* Exhibit navigation buttons */
#exhibit-child-pages .exhibit-child-nav li a,
#exhibit-pages.full #secondary-nav ul li a {
  background-color: var(--color-button-bg);
}

#exhibit-child-pages .exhibit-child-nav li a:hover,
#exhibit-pages.full #secondary-nav ul li a:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* The "current page" highlight in exhibit page navigation */
#exhibit-page-navigation .current-page {
  background-color: var(--color-primary);
  color: #ffffff;
}


/* =============================================================================
   15. FORMS (Search, Advanced Search, etc.)
   Input boxes, dropdowns, and form fields.
============================================================================= */

input[type=text],
input[type=password] {
  border: 1px solid var(--color-border);
  min-height: 36px;
  padding: 6px;
  
  /* border-radius: 4px; */ /* Uncomment for rounded input fields */
  /* font-size: 16px; */    /* Uncomment to set input text size */
}

select {
  border: 1px solid var(--color-border);
  height: 36px;
  background-color: var(--color-bg);
  
  /* border-radius: 4px; */ /* Uncomment for rounded select dropdowns */
}


/* =============================================================================
   16. TAG CLOUD
   The tag/keyword cloud display (if you use tags in Omeka).
   Font sizes below control how "popular" tags appear bigger.
============================================================================= */

.hTagcloud ul li a {
  text-decoration: none;
  color: var(--color-primary);  /* Tag link color */
}

.hTagcloud ul li a:hover {
  color: var(--color-primary-light); /* Tag color on hover */
  text-decoration: underline;
}


/* =============================================================================
   17. RESPONSIVE / MOBILE
   These styles only apply on screens wider than 640px (tablets and desktops).
   Generally you won't need to change these unless you're adjusting layout widths.
============================================================================= */

@media screen and (min-width: 40em) {

  /* How wide the search bar is on wider screens */
  #search-container {
    margin: 30px 0;
  }

  /* Bottom navigation bar (visible only on wider screens) */
  #bottom-nav {
    display: block;
    overflow: auto;
    margin-bottom: 1em;
  }
}