/*
 * SAH Archipedia — Olivero overrides
 * Override Olivero's CSS custom properties for SAH branding.
 * No build step required.
 */

/* =============================================
   SAH Brand Colors
   ============================================= */

:root {
  /* Primary palette — maps to Olivero's color system */
  --color--primary-40: #014360;       /* SAH blue — primary buttons, headers, nav */
  --color--primary-50: #238fb5;       /* SAH mid blue — links, hover states */
  --color--primary-60: #5acaeb;       /* SAH light blue — accents */
  --color--primary-80: #c3e8f3;       /* SAH gray blue — subtle backgrounds */

  /* Keep these consistent with the primary palette */
  --color-link: #137b9a;
  --color-link--hover: #014360;

  /* Background */
  --color--white: #fbfbfb;           /* off white */
}

/* =============================================
   Typography
   ============================================= */

:root {
  /* The two faces sah-archipedia.org actually uses: Montserrat for headings
     and nav, Metropolis for body copy, tables, forms, buttons and metadata.
     Metropolis resolves against Olivero's own @font-face (400/600/700) — the
     three woff2 files in this theme's fonts/ dir are never declared and are
     not what's loading. Montserrat comes from the Google Fonts URL in
     archipedia_theme.libraries.yml. */
  --sah-font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --sah-font-body: "metropolis", "Helvetica Neue", Arial, sans-serif;

  /* Olivero drives its own components through these two variables, so
     redefining them here corrects every element we never styled explicitly.
     --font-serif is the important one: it ships as "Lora", georgia, serif and
     is what puts a stray serif on blockquotes, embedded media and the header
     search field. Neither the live site nor this theme uses Lora. */
  --font-sans: var(--sah-font-body);
  --font-serif: var(--sah-font-body);
}

/* =============================================
   Accessibility
   ============================================= */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #014360;
  color: #fff;
  font-family: var(--sah-font-head);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #5acaeb;
  outline-offset: 2px;
}

/* =============================================
   Olivero Layout Overrides
   ============================================= */

/* Remove Olivero's raindrop background pattern */
body {
  background-image: none;
  background-color: var(--color--white);
}

/* Remove the max-width "card" effect on the page wrapper */
.page-wrapper {
  max-width: none;
}

/* Remove the social sidebar offset on main content */
.main-content {
  width: 100% !important;
  margin-inline-start: 0;
}

/* Fluid container — match original SAH Archipedia's 94% layout.
   Less whitespace on wide monitors than a fixed pixel cap. */
.container {
  width: 60%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  max-width:1500px;
}

/* Mobile */
@media (max-width: 767px) {
  .container {
    width: 94%;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 85%;
  }
}

/* Laptop */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    width: 72%;
  }
}

/* Large desktop */
@media (min-width: 1280px) {
  /* Every page type — header, footer, and content — sits at a consistent 80%.
     (Content wrappers carry both .main-content__container and .container.) */
  .container {
    width: 80%;
  }
}

/* Hide Olivero's blue "sticky toggle" decoration block next to the page title */
.site-header__initial {
  background-color: transparent;
}

/* Reduce Olivero's excessive content padding */
.main-content__container {
  padding-block-start: 0.5rem;
  padding-inline: 1.5rem;
}

/* Override Olivero's 14-column grid — use simple layout */
.grid-full {
  display: block;
}

/* Restore grid when sidebar is present */
.sidebar-grid.grid-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .sidebar-grid.grid-full {
    grid-template-columns: 220px 1fr;
  }

  /* Sidebar is second in HTML but should appear first visually */
  .sidebar-grid.grid-full > .region--sidebar {
    grid-row: 1;
    grid-column: 1;
  }

  .sidebar-grid.grid-full > main,
  .sidebar-grid.grid-full > .site-main {
    grid-row: 1;
    grid-column: 2;
  }
}

.layout--content-medium,
.layout--pass--content-medium > * {
  grid-column: unset;
  width: 100%;
}

/* Remove spacing/borders from highlighted and breadcrumb regions */
.region--highlighted,
.region--breadcrumb {
  padding: 0;
  margin: 0;
  border: none;
  font-family: var(--sah-font-head);
}

/* Hide Olivero's default "Home" breadcrumb on node pages — we use our own */
body.path-node .block-system-breadcrumb-block {
  display: none;
}

/* Tighten Olivero's header spacing */
.site-header {
  border-bottom: none;
  margin-bottom: 0;
  min-height: 0 !important;
}

.site-header__fixable {
  border-bottom: none;
}

/* Collapse the sticky toggle bar — not needed for SAH */
.site-header__initial {
  display: none;
}

/* Remove min-height that Olivero sets on the header inner container */
.site-header__inner__container {
  min-height: 0;
  padding-block: 0;
}

/* Collapse the main wrapper top margin/padding */
.layout-main-wrapper {
  padding-block-start: 0;
  margin-block-start: 0;
}

/* Collapse empty highlighted region */
.region--highlighted:empty,
.region--highlighted:has(> .hidden:only-child) {
  display: none;
}

/* =============================================
   Typography
   ============================================= */

/* Faces are defined once as --sah-font-head / --sah-font-body at the top of
   this file, where they also replace Olivero's --font-sans and --font-serif.
   Everything below refers to the tokens — never a literal family name. */
html {
  font-family: var(--sah-font-body);
  /* Base font size: Olivero's default 100% (16px base). rem-based type &
     spacing scale from here. Was briefly bumped to 112.5% (18px) as a test. */
  font-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sah-font-head);
}

/* Override Olivero's .text-content serif font with the body face */
.text-content,
.text-content p {
  font-family: var(--sah-font-body);
  font-size: 1rem;
  line-height: 1.7;
}

/* Page titles — light weight, wide tracking to match D7 */
h1 {
  font-weight: 300;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

h2 {
  font-weight: 300;
  letter-spacing: 0.06em;
}

h3, h4 {
  font-weight: 400;
  letter-spacing: 0.025em;
  /* Olivero's shared h1–h6 rule jumps to margin-block: var(--sp2) (2.25rem)
     at ≥43.75rem, which is far too loose for our sub-headings. Reset to one
     --sp above and a tight 0.5rem below so a heading sits closer to the
     content it labels than to what precedes it. Same specificity as
     Olivero's element rule — this wins on source order (theme group loads
     after Olivero's base group). */
  margin-block: var(--sp) 0.5rem;
}

h5, h6 {
  font-weight: 400;
}

/* =============================================
   SAH Banner / Header
   ============================================= */

/* SAH Banner — independent top bar above Olivero's header */
.sah-banner {
  display: block;
  text-align: center;
  padding: 1rem 0;
  background-color: #fbfbfb;
  width: 100%;
  position: relative;
  z-index: 200;
}

.sah-banner__link {
  display: block;
}

.sah-banner__logo--desktop {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

.sah-banner__logo--mobile {
  display: none;
}

@media (max-width: 767px) {
  .sah-banner__logo--desktop {
    display: none;
  }
  .sah-banner__logo--mobile {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
  }
}

/* =============================================
   Centered page titles (search + browse)
   ============================================= */

/* Both landing types present a single title above a full-width tool (the
   search bar, the A–Z letter nav), so the title is centered and scaled up
   rather than sitting flush left like a node title. Kept here rather than in
   search.css / browse-taxonomy.css so the two can't drift apart — those are
   per-page component libraries and neither loads on the other's pages. */
body.path-search .block-page-title-block,
body.path-browse .block-page-title-block {
  text-align: center;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

body.path-search .block-page-title-block h1,
body.path-browse .block-page-title-block h1 {
  font-size: 2.25rem;
  letter-spacing: 0.14em;
}

/* Mobile: smaller font + tighter tracking so "ARCHIPEDIA" fits on one line
   instead of breaking mid-word ("ARCHIPEDI / A" on iPhone SE). This override
   must follow the desktop rule above — a max-width media query adds no
   specificity, so source order decides the winner at ≤600px. */
@media (max-width: 600px) {
  body.path-search .block-page-title-block h1,
  body.path-browse .block-page-title-block h1 {
    font-size: 1.35rem;
    letter-spacing: 0.04em;
  }
}

/* =============================================
   Building Entry
   ============================================= */

/* Hide Olivero's page title block on building entries — we render our own */
body.page-node-type-building-entry .block-page-title-block,
body.page-node-type-regional-overview .block-page-title-block,
body.page-node-type-thematic-essay .block-page-title-block {
  display: none;
}

/* Breadcrumb — ancestor chain */
.building-entry__breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.building-entry__breadcrumb a {
  color: #137b9a;
  text-decoration: none;
}

.building-entry__breadcrumb a:hover {
  text-decoration: underline;
}

.building-entry__header {
  text-align: center;
  padding: 0.5rem 0 1rem;
}

/* Editorial accent rule under the title — centered beneath the title to match D7. */
.building-entry__header::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: #238fb5;
  margin: 0.6rem auto 0;
}

.building-entry__title {
  font-family: var(--sah-font-head);
  font-weight: 600;
  font-size: 2.75rem;
  line-height: 1.12;
  color: #014360;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Replaces Olivero's inherited h1 margin/line-height (a ~81px gap). */
  margin-block: 0.5rem 0.75rem;
}

.building-entry__layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1000px) {
  .building-entry__layout {
    flex-direction: row;
    gap: 2.5rem;
  }

  .building-entry__sidebar {
    flex: 0 0 340px;
    order: 1;
  }

  /* Content fills the available width; the featured image floats right
     (see photo-gallery.css) so text sits flush beside it, matching D7. */
  .building-entry__content {
    flex: 1;
    min-width: 0;
    order: 2;
  }
}

/* =============================================
   Regional essay — sidebar layout
   ============================================= */

.regional-essay__layout,
.thematic-essay__layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1000px) {
  .regional-essay__layout,
  .thematic-essay__layout {
    flex-direction: row;
  }

  /* Content fills the available width (matches building entries); the essay
     body is no longer capped at a fixed reading measure. Sidebar sits on the
     LEFT, content on the right — matching the building-entry layout. */
  .regional-essay__content,
  .thematic-essay__content {
    flex: 1;
    min-width: 0;
    order: 1;
  }

  .regional-essay__sidebar,
  .thematic-essay__sidebar {
    flex: 0 0 340px;
    order: 0;
  }
}

/* Light card panel (essay pages), matching the browse/search motif: pale-blue
   ground, navy text, a soft shadow, and a brand-teal accent stripe up top that
   ties it to the page's title accent rule. (Building-entry "What's Nearby"
   keeps its own darker treatment.) */
.regional-essay__sidebar,
.thematic-essay__sidebar {
  background-color: #f5f9fc;
  color: #12333d;
  padding: 1.25rem;
  border: 1px solid #d7e6ee;
  border-top: 3px solid #238fb5;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(1, 67, 96, 0.08);
}

.regional-essay__sidebar-heading,
.thematic-essay__sidebar-heading {
  /* First child of a padded sidebar card — same reasoning as the building
     entry panel headings above. */
  margin-block: 0 0.6rem;
  font-size: 1.05rem;
  font-family: var(--sah-font-head);
  color: #014360;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #d7e6ee;
  padding-bottom: 0.5rem;
}

.regional-essay__sidebar .views-row,
.thematic-essay__sidebar-list li {
  padding: 0.3rem 0;
  line-height: 1.4;
  font-family: var(--sah-font-body);
  font-weight: 400;
}

.thematic-essay__sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Navy links on the light card, teal on hover. */
.regional-essay__sidebar .views-row a,
.thematic-essay__sidebar-list a {
  color: #014360;
  text-decoration: none;
  font-size: 0.9rem;
}

.regional-essay__sidebar .views-row a:hover,
.regional-essay__sidebar .views-row a:focus,
.thematic-essay__sidebar-list a:hover,
.thematic-essay__sidebar-list a:focus {
  color: #238fb5;
  text-decoration: underline;
}

/* Sidebar sections — stacked flush, colors match legacy SAH Archipedia */
.building-entry__sidebar > div {
  margin-bottom: 0;
}

/* Leaflet location map — needs an explicit height to render (matches the
   old iframe's 300px). */
.building-entry__map {
  height: 300px;
  width: 100%;
}

/* Custom teardrop pin (inline SVG via L.divIcon) — no default marker box. */
.entry-map__pin {
  background: none;
  border: none;
}

.building-entry__facts {
  background-color: #014360;
  color: #fdfdfd;
  padding: 1rem;
  text-transform:uppercase;
  font-size:1.6rem;
  font-family: var(--sah-font-body);
}


.building-entry__facts-list dt {
  font-weight: 300;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: #c3e8f3;
}

.building-entry__facts-list dd {
  margin-left: 0;
  font-size: 0.9rem;
  /* Stop Olivero's inherited auto-hyphenation from breaking facts values
     mid-word (e.g. "mate-rial"); values now wrap only on whole words. */
  hyphens: manual;
  overflow-wrap: normal;
}

.building-entry__facts-list a {
  color: #5acaeb;
  text-decoration: none;
}

.building-entry__facts-list a:hover {
  color: #fdfdfd;
  text-decoration: underline;
}

.building-entry__facts-heading,
.building-entry__citation-heading,
.building-entry__print-source-heading,
.building-entry__events-heading,
.building-entry__nearby-heading {
  /* Each of these is the first child of its own padded panel, so any top
     margin just stacks on the panel's 1rem padding. Zero it out. */
  margin-block: 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.6rem;
  font-weight: 400;
  color: #c3e8f3;
  font-weight:300;
  text-decoration: underline;
}

/* #1a6d8c bg: white links hit 5.3:1 (AA); #238fb5 only reached 3.64:1.
   Heading flips to pale #c3e8f3 (the Facts-panel heading colour) — the old
   #014360 was 2.87:1 on this panel. */
.building-entry__nearby {
  background-color: #1a6d8c;
  color: #fdfdfd;
  padding: 1rem;
  font-family: var(--sah-font-body);

}

.building-entry__nearby-heading {
  /* #e8f4f8 (not #c3e8f3) clears 4.5:1 on #1a6d8c with margin — #c3e8f3 was 4.48. */
  color: #e8f4f8;
}

.building-entry__events-heading,
.building-entry__print-source-heading {
  color:#28333b
}

.building-entry__citation {
  background-color: #5acaeb;
  color: #014360;
  padding: 1rem;
}

.building-entry__citation p {
  font-size: 1rem;
  line-height: 1.5;
}

.building-entry__citation a {
  color: #014360;
}

.building-entry__print-source {
  background-color: #c3e8f3;
  color: #014360;
  padding: 1rem;
}

.building-entry__credits-heading {
  color:#28333b;
  font-family: var(--sah-font-head);
}

/* Main content */
/* Lead / standfirst — the headnote (date, architect, address) set apart as an
   editorial intro with a left accent border rather than top+bottom rules. */
.building-entry__headnote {
  font-family: var(--sah-font-body);
  border-left: 3px solid #238fb5;
  padding: 0.15rem 0 0.15rem 0.9rem;
  margin-bottom: 1.25rem;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: #28333b;
}

.building-entry__body {
  font-family: var(--sah-font-body);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Open up the rhythm between body paragraphs at the wider reading measure. */
.building-entry__body p {
  margin: 0 0 1.1rem;
}

/* ---------------------------------------------------------------------------
   Long-form type scale (~Major Third, 1.25)
   Restores a strictly descending hierarchy across the building-entry,
   regional-overview & thematic-essay bodies (they share .building-entry__body):
   title 2.75 > h2 2 > h3 1.65 > editor-emphasis 1.6 > h4 1.4 > byline 1.15
   > body 1 > apparatus 0.85 (rem). The .building-entry__body scope beats
   Olivero's bare-element heading sizes; weights move to 600 for real contrast.
   Asymmetric margins (large above / tight below) bind a heading to its section.
   --------------------------------------------------------------------------- */
.building-entry__body h2 {
  font-family: var(--sah-font-head);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #014360;
  margin-block: 2.25rem 0.75rem;
}

.building-entry__body h3 {
  font-family: var(--sah-font-head);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #014360;
  margin-block: 2rem 0.6rem;
}

.building-entry__body h4 {
  font-family: var(--sah-font-head);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #014360;
  margin-block: 1.75rem 0.5rem;
}

/* h5 is used for the byline/attribution — treat it as editorial italic,
   not a heading, so it reads as a distinct register from the body. */
.building-entry__body h5 {
  font-family: var(--sah-font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #5a7282;
  margin-block: -0.25rem 1.75rem;
}

.building-entry__body blockquote {
  font-size: 1.0625rem;
  margin-block: 1.75rem;
}

/* Editorial apparatus — notes & captions step down to a quieter register
   instead of reading at full body weight. */
.building-entry__body .footnote,
.building-entry__body .footnote p,
.building-entry__body figcaption,
.building-entry__body .caption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5a7282;
}

.building-entry__body figcaption,
.building-entry__body .caption {
  font-style: italic;
}

.building-entry__events {
  padding: 1rem;
  background-color: #e8f4f8;
  color: #014360;
}

.building-entry__events-list,
.building-entry__nearby-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.building-entry__events-list li,
.building-entry__nearby-list li {
  padding: 0.25rem 0;
  line-height: 1.3;
  font-weight:200;
}

.building-entry__nearby-list a {
  color: #fdfdfd;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.building-entry__nearby-list a:hover,
.building-entry__nearby-list a:focus {
  text-decoration: underline;
}

.building-entry__references {
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.building-entry__credits {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #c3e8f3;
}

.building-entry__author {
  font-weight: 600;
  color: #014360;
}

/* =============================================
   Sidebar hamburger toggle — mobile only
   ============================================= */

/* Desktop: toggle is hidden, sidebar is always shown (flex positions it). */
.building-entry__sidebar-toggle {
  display: none;
}

@media (max-width: 999px) {
  /* On mobile: show content first, keep toggle at top, hide sidebar by default. */
  .building-entry__layout {
    gap: 1rem;
  }

  .building-entry__sidebar-toggle {
    order: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #014360;
    color: #fdfdfd;
    border: none;
    cursor: pointer;
    font-family: var(--sah-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    border-radius: 3px;
  }

  .building-entry__sidebar-toggle:hover,
  .building-entry__sidebar-toggle:focus-visible {
    background: #137b9a;
    outline: none;
  }

  .building-entry__sidebar-toggle[aria-expanded="true"] {
    background: #137b9a;
  }

  /* Toggle at top (order 0), then sidebar (drops in when open), then content. */
  .building-entry__sidebar {
    order: 1;
    display: none;
  }

  .building-entry__content {
    order: 2;
  }

  .building-entry__sidebar.is-open {
    display: block;
  }
}

/* =============================================
   Search page — full-width, no sidebar column
   ============================================= */

/* Collapse the sidebar grid to a single block column */
body.path-search .sidebar-grid.grid-full {
  display: block;
}

/* Hide sidebar in its original grid slot —
   search-facets.js will move it into the filter bar */
body.path-search .region--sidebar {
  display: none;
}

/* =============================================
   Footer
   ============================================= */

.site-footer {
  background-color: #014360;
  color: #fff;
  padding: 0;
}

/* Olivero draws a 90px black left-border on .site-footer at ≥75rem to
   visually continue the social-bar sidebar. The rebuild has no social bar,
   so suppress it. Matches Olivero's selector specificity. */
body:not(.is-always-mobile-nav) .site-footer {
  border-inline-start: none;
}

.sah-footer {
  background-color: #014360;
  color: #fff;
  font-weight: 300;
  padding: 2rem 0;
}

.sah-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 1rem 1.5rem;
}

@media (min-width: 768px) {
  .sah-footer__inner {
    flex-direction: row;
    gap: 3rem;
  }

  .sah-footer__section {
    flex: 1;
  }
}

.sah-footer__heading {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: #fff;
}

.sah-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.7;
}

.sah-footer a {
  color: #5acaeb;
  text-decoration: none;
  font-weight: 300;
}

.sah-footer a:hover {
  color: #c3e8f3;
  text-decoration: underline;
}

.sah-footer__trademark {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  opacity: 0.85;
}

.sah-footer__tagline {
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.sah-footer__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.sah-footer__logos img {
  max-height: 60px;
  width: auto;
}

.sah-footer__org-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
}

.sah-footer__org-logos img {
  max-height: 45px;
  width: auto;
}

.sah-footer__links p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.sah-footer__login {
  opacity: 0.7;
}

.sah-footer__login:hover,
.sah-footer__login:focus {
  opacity: 1;
}