/*
Theme Name: Gamli Handil
Theme URI: https://gamlihandil.fo
Author: Olivar J. Olsen / jebster
Description: Søgulig heimasíða fyri Heiðarnar — valmynd til vinstru, innihald í miðjuni, lýsingar og smátt til høgru. Inspired by the 2004 site, built for today.
Version: 1.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: gamlihandil
*/

:root {
  --page: #F4F4F0;        /* whitewash */
  --panel: #EAE8E1;       /* paper grey, right column */
  --paper: #FFFFFF;       /* the sign plate and content */
  --ink: #2B2A28;         /* tarred timber */
  --ink-soft: #55524C;
  --mold: #93826C;        /* the old site's taupe: rules and dates */
  --mold-text: #7A6B58;
  --blue: #1F3A66;        /* links, from the old #093A80 */
  --green: #3B6B4F;       /* current menu branch, painted-door green */
  --rule: #D6D2C8;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", Verdana, Helvetica, sans-serif;
  --measure: 68ch;
  --gh-content-width: 580px;   /* middle column on wide screens; Customise → Layout overrides it (inc/layout.php) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 17px/1.55 var(--sans); font-feature-settings: "kern", "liga";
}
a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.2; color: var(--ink); margin: 1.4em 0 .5em; }
h1 { font-size: 2.1rem; margin-top: 0; font-variation-settings: "SOFT" 60, "opsz" 36; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p, ul, ol, table, blockquote, figure { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6em 0; }
blockquote { margin-left: 0; padding-left: 1em; border-left: 3px solid var(--rule); color: var(--ink-soft); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--paper); padding: .5em 1em; z-index: 10; }
.skip-link:focus { left: 1em; top: 1em; }

/* ---- masthead: the photo strip with the sign plate ---- */
.masthead { position: relative; width: 100%; background: var(--ink); }
.masthead--constrained { max-width: var(--gh-masthead-max-width, 1164px); margin-inline: auto; }
.masthead__photo {
  display: block; width: 100%;
  height: clamp(
    min(var(--gh-masthead-height-phone, 150px), var(--gh-masthead-height-tablet, 240px)),
    calc(var(--gh-masthead-pt-intercept, 64.390244px) + var(--gh-masthead-pt-vw, 21.951220vw)),
    max(var(--gh-masthead-height-phone, 150px), var(--gh-masthead-height-tablet, 240px))
  );
  object-fit: cover; object-position: 50% var(--gh-masthead-y, 72%); filter: saturate(.85); opacity: .92;
}
.masthead__plate {
  position: absolute; left: clamp(16px, 5vw, 72px); bottom: -22px;
  background: var(--paper); padding: 14px 22px 12px; max-width: min(92%, 560px);
  border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--mold);
}
.masthead__title { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; margin: 0; line-height: 1; letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "opsz" 72; }
.masthead__title a { color: var(--ink); text-decoration: none; }
.masthead__tagline { margin: .35em 0 0; color: var(--mold-text); font-size: .95rem; }

/* ---- the three columns ---- */
.site { max-width: calc(var(--gh-content-width) + 600px);   /* 220 menu + 236 right + 2×40 gaps + 2×32 padding */
  margin: 0 auto; padding: 48px clamp(12px, 3vw, 32px) 0; display: grid; gap: 0 40px;
  grid-template-columns: 220px minmax(0, 1fr) 236px; grid-template-areas: "nav main aside"; }
.nav { grid-area: nav; } .main { grid-area: main; min-width: 0; } .aside { grid-area: aside; }

/* left: the menu, hairline list, current branch open */
.nav__title { font-family: var(--serif); font-size: 1rem; color: var(--mold-text); margin: .4em 0 .6em; font-weight: 500; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul > li { border-top: 1px solid var(--rule); }
.nav > ul > li:last-child { border-bottom: 1px solid var(--rule); }
.nav li a { display: block; padding: .45em .6em .45em .75em; text-decoration: none; color: var(--ink); line-height: 1.3; }
.nav li a:hover { color: var(--green); text-decoration: underline; }
.nav li li a { font-size: .95rem; padding-left: 1.6em; }
.nav li li li a { padding-left: 2.4em; font-size: .9rem; }
.nav li ul { display: none; padding-bottom: .3em; }
.nav li.current-menu-ancestor > ul, .nav li.current-menu-item > ul, .nav li.current-menu-parent > ul,
.nav li.current_page_ancestor > ul, .nav li.current_page_item > ul, .nav li.current_page_parent > ul { display: block; }
.nav li.current-menu-item > a, .nav li.current_page_item > a { color: var(--green); font-weight: 600; box-shadow: inset 3px 0 0 var(--green); }
.nav li.current-menu-ancestor > a, .nav li.current_page_ancestor > a { color: var(--green); }
.nav__toggle { display: none; }
.search { margin-top: 1.6em; }
.search label { display: block; font-size: .85rem; color: var(--mold-text); margin-bottom: .25em; }
.search__row { display: flex; }
.search input[type=search] { flex: 1; min-width: 0; border: 1px solid var(--mold); border-right: 0; background: var(--paper); padding: .35em .5em; font: inherit; font-size: .95rem; }
.search button { border: 1px solid var(--mold); background: var(--panel); font: inherit; font-size: .9rem; padding: 0 .7em; cursor: pointer; }
.nav__foot { margin-top: 2em; font-size: .85rem; color: var(--mold-text); }

/* middle: the page */
.crumbs { font-size: .9rem; color: var(--mold-text); margin: 0 0 1.2em; }
.crumbs a { color: var(--mold-text); }
.crumbs span + span::before { content: " › "; color: var(--mold); }
.entry { max-width: var(--gh-content-width); }
.entry__meta { font-size: .9rem; color: var(--mold-text); margin: -.2em 0 1.4em; }
.entry__meta a { color: var(--mold-text); }
.entry__body table { border-collapse: collapse; max-width: 100%; }
.entry__body td, .entry__body th { padding: .25em .5em; vertical-align: top; }   /* the old editor used tables for layout: no rules */
.entry--wide .entry__body table { font-size: .95rem; }                            /* the registers (censuses, year list) are real tables */
.entry--wide .entry__body td, .entry--wide .entry__body th { border-bottom: 1px solid var(--rule); }
.entry__body hr + hr { display: none; }
.entry__body img { height: auto; }
.entry__body td img { max-width: none; }                                             /* max-width:100% inside an auto-layout table shrinks a picture to a sliver */
.entry__body a > img[width="50"], .entry__body a > img[width="40"] { width: 76px; }   /* 2005's postage-stamp thumbnails, linked to the full picture */
.entry__body .alignleft { float: left; margin: .3em 1.2em .6em 0; }
.entry__body .alignright { float: right; margin: .3em 0 .6em 1.2em; }
.entry__body iframe { max-width: 100%; }
.entry--wide { max-width: none; }        /* the census and auction registers are tables; let them breathe */
.entry--wide .entry__body { overflow-x: auto; }
.entry__body .tablepress { width: 100%; max-width: none; margin: 0 0 1.5em; }
.entry__body .tablepress thead th { background: var(--panel); color: var(--ink); border-bottom: 2px solid var(--mold); }
.entry__body .tablepress td:first-child, .entry__body .tablepress th:first-child { width: 7em; white-space: nowrap; }
.entry__body .tablepress.gh-numbered td:first-child, .entry__body .tablepress.gh-numbered th:first-child { width: 1%; }   /* "Nr." column: shrink to its widest number (TablePress → table → Extra CSS classes) */
/* Listaframsýningar table (TablePress → Extra CSS classes: gh-exhibitions): thumbnail · date · artist + blurb */
.entry__body .tablepress.gh-exhibitions td, .entry__body .tablepress.gh-exhibitions th { vertical-align: top; overflow-wrap: anywhere; }
.entry__body .tablepress.gh-exhibitions td:first-child, .entry__body .tablepress.gh-exhibitions th:first-child { width: 1%; white-space: normal; }
.entry__body .tablepress.gh-exhibitions td:nth-child(2), .entry__body .tablepress.gh-exhibitions th:nth-child(2) { width: 8.5em; white-space: normal; }
.entry__body .tablepress.gh-exhibitions td:first-child img { display: block; }
@media (max-width: 720px) {
  .entry__body .tablepress.gh-exhibitions td, .entry__body .tablepress.gh-exhibitions th { padding: 8px 6px; }
  .entry__body .tablepress.gh-exhibitions td:nth-child(2), .entry__body .tablepress.gh-exhibitions th:nth-child(2) { width: 5.5em; font-size: .92em; }
  .entry__body .tablepress.gh-exhibitions td:first-child img { width: 58px; }
}
/* Aðrar framsýningar table (Extra CSS classes: gh-other-exhibitions): date · what was on — no photo column */
.entry__body .tablepress.gh-other-exhibitions td, .entry__body .tablepress.gh-other-exhibitions th { vertical-align: top; overflow-wrap: anywhere; }
.entry__body .tablepress.gh-other-exhibitions td:first-child, .entry__body .tablepress.gh-other-exhibitions th:first-child { width: 8.5em; white-space: normal; }
@media (max-width: 720px) {
  .entry__body .tablepress.gh-other-exhibitions td, .entry__body .tablepress.gh-other-exhibitions th { padding: 8px 6px; }
  .entry__body .tablepress.gh-other-exhibitions td:first-child, .entry__body .tablepress.gh-other-exhibitions th:first-child { width: 5.5em; font-size: .92em; }
}
.entry__body .gh-year-list { width: 100%; max-width: none; margin: 0 0 1.5em; }
.entry__body .gh-year-list__year { width: 7em; white-space: nowrap; }
.entry__body .gh-year-list__event > :first-child, .entry__body .gh-year-list__year > :first-child { margin-top: 0; }
.entry__body .gh-year-list__event > :last-child { margin-bottom: 0; }

/* album galleries: WordPress's [gallery] markup, as a grid */
.gallery { display: grid; gap: 14px; margin: 1.4em 0; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item { margin: 0; background: var(--paper); border: 1px solid var(--rule); padding: 6px; }
.gallery-icon a { display: block; }
.gallery-icon img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-caption { font-size: .85rem; line-height: 1.35; color: var(--ink-soft); margin: .5em 2px 0; }
.entry--wide .gallery { max-width: 980px; }

/* sub-pages (albums under Myndasavn, people, exhibitions) */
.children { margin: 2.4em 0 1em; }
.children h2 { font-size: 1.2rem; color: var(--mold-text); border-top: 1px solid var(--rule); padding-top: .8em; }
.children__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.children__grid li { background: var(--paper); border: 1px solid var(--rule); padding: 6px; }
.children__grid a { text-decoration: none; color: var(--ink); display: block; }
.children__grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .5em; }
.children__grid strong { font-weight: 600; font-size: .98rem; }
.children__grid small { display: block; color: var(--mold-text); font-size: .85rem; }
.children__list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.children__list li { padding: .4em 0; border-top: 1px solid var(--rule); }
.children__list small { color: var(--mold-text); margin-left: .6em; font-size: .85rem; }
.children--first { margin: 0 0 2em; }
.children--first h2 { border-top: 0; padding-top: 0; color: var(--ink); font-size: 1.3rem; }

/* front page extras */
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 1.6em 0; }
.strip a img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); background: var(--paper); padding: 3px; }
.news { list-style: none; padding: 0; }
.news li { padding: .5em 0; border-top: 1px solid var(--rule); }
.news time { color: var(--mold-text); font-size: .9rem; margin-right: .6em; }

/* right: panels */
.aside .widget { background: var(--panel); border-top: 2px solid var(--mold); padding: 12px 14px 14px; margin-bottom: 20px; font-size: .92rem; }
.aside .widget-title, .aside .widget h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .6em; color: var(--ink); font-weight: 500; }
.aside .widget ul { list-style: none; padding: 0; margin: 0; }
.aside .widget li { padding: .3em 0; border-top: 1px solid var(--rule); }
.aside .widget li:first-child { border-top: 0; }
.aside .widget li small { color: var(--mold-text); display: block; }
.sponsors a { display: block; margin: 0 0 10px; background: var(--paper); border: 1px solid var(--rule); padding: 6px; text-align: center; }
.sponsors img { display: inline-block; max-height: 90px; }
.sponsors a.sponsors__wide { width: 100%; padding: 0; margin: 0; }
.sponsors__wide img { display: block; width: 100%; max-height: none; aspect-ratio: 13 / 7; object-fit: cover; object-position: center; margin: 0; padding: 0; border: none; }
.sponsors small, .widget_custom_html .textwidget small { color: var(--mold-text); }
.randphoto img { display: block; width: 100%; border: 1px solid var(--rule); background: var(--paper); padding: 4px; }
.randphoto figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .4em; }
.randphoto figcaption a { display: block; color: var(--mold-text); }

/* footer */
.foot { max-width: calc(var(--gh-content-width) + 600px); margin: 40px auto 0; padding: 14px clamp(12px, 3vw, 32px) 28px; border-top: 1px solid var(--mold); color: var(--mold-text); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .4em 2em; }
.foot a { color: var(--mold-text); }

/* lightbox */
.lb { position: fixed; inset: 0; background: rgba(20,19,17,.94); display: none; z-index: 100; color: #eee; }
.lb.is-open { display: grid; grid-template-rows: 1fr auto; }
.lb img { max-width: 94vw; max-height: 84vh; margin: auto; display: block; box-shadow: 0 0 0 6px #fff; }
.lb__cap { text-align: center; padding: 10px 56px 16px; font-size: .95rem; min-height: 2.6em; }
.lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; padding: 10px 16px; line-height: 1; }
.lb__close { top: 6px; right: 10px; } .lb__prev { left: 6px; top: 50%; transform: translateY(-50%); } .lb__next { right: 6px; top: 50%; transform: translateY(-50%); }
.lb__count { position: absolute; left: 14px; top: 14px; font-size: .85rem; color: #bbb; }

/* search results / archives */
.list .item { padding: 1em 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.list .item h2 { font-size: 1.25rem; margin: 0 0 .2em; }
.list .item h2 a { text-decoration: none; }
.pager { display: flex; gap: 1em; margin: 1.6em 0; font-size: .95rem; }

@media (min-width: 800px) {
  .masthead__photo {
    height: clamp(
      min(var(--gh-masthead-height-tablet, 240px), var(--gh-masthead-height-desktop, 240px)),
      calc(var(--gh-masthead-td-intercept, 240px) + var(--gh-masthead-td-vw, 0vw)),
      max(var(--gh-masthead-height-tablet, 240px), var(--gh-masthead-height-desktop, 240px))
    );
  }
}
@media (max-width: 1080px) {
  .site { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "nav main" "nav aside"; gap: 0 28px; }
  .aside { padding-top: 1em; }
  .aside .widget { display: inline-block; vertical-align: top; width: calc(50% - 12px); margin-right: 16px; }
  .aside .widget:nth-child(2n) { margin-right: 0; }
  .gallery-columns-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .masthead__plate { position: static; margin: 0; max-width: none; border-width: 0 0 1px; padding: 12px 16px; }
  .site { display: block; padding-top: 20px; }
  .nav__toggle { display: inline-block; font: inherit; background: var(--paper); border: 1px solid var(--mold); padding: .4em .9em; cursor: pointer; margin-bottom: .8em; }
  .nav__toggle[aria-expanded="true"] + .nav__body, .nav__body.is-open { display: block; }
  .nav__body { display: none; margin-bottom: 1.6em; }
  .nav li ul { display: block; }
  .aside .widget { display: block; width: auto; margin-right: 0; }
  .gallery-columns-3, .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .foot { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav li a, a { transition: color .12s; }
}
@media print {
  .masthead__photo, .nav, .aside, .foot, .crumbs, .entry__meta .print, .lb { display: none !important; }
  .site { display: block; padding: 0; } .masthead { background: none; } .masthead__plate { position: static; border: 0; box-shadow: none; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; } a { color: #000; }
  .entry { max-width: none; } .gallery-icon img { aspect-ratio: auto; }
  .entry--wide .entry__body { overflow: visible; }
  .entry__body .tablepress { width: 100%; } .entry__body .tablepress thead { display: table-header-group; }
  .entry__body .tablepress tr { break-inside: avoid; page-break-inside: avoid; }
  .entry__body .tablepress caption { display: none; }
  .entry__body .gh-year-list { width: 100%; }
  .entry__body .gh-year-list tr { break-inside: avoid; page-break-inside: avoid; }
}