/* ============================================================
   luczanits.net — style.css
   Consolidated replacement for all YAML CSS files.
   Faithfully reproduces the original visual design as defined
   in basemod_grids2.css, content_grids2.css, and Additions.css,
   while adding fluid/responsive behaviour.

   Original design:
   - White body, white page, 1px #aaa border frames the page
   - #ddd ruled lines: above columns, right of main column
   - Verdana body text at 75% (≈12px), #444
   - Geneva/Arial headings; Palatino h2 and h3 em (italic)
   - Blue (#4D87C7) links, purple (#D16FE2) on hover
   - White nav bar, uppercase letter-spaced items, white dropdowns
   - #header h2 and #footer h2 framed with 1px #ddd rules
   ============================================================ */


/* ------------------------------------------------------------
   1. RESET
   ------------------------------------------------------------ */

* { margin: 0; padding: 0; }

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;   /* original YAML value */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* HTML5 block elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

fieldset, img { border: 0 solid; }

option { padding-left: 0.4em; }
select { padding: 1px; }


/* ------------------------------------------------------------
   2. BODY & PAGE FRAME
   Exact values from basemod_grids2.css
   ------------------------------------------------------------ */

body {
    font-family: Verdana, 'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-size: 80%;          /* ≈12px — original YAML value */
    color: #444;
    background: #fff;      /* used to centre .page_margins in old IE */
    overflow-y: scroll;      /* original YAML: force vertical scrollbar */
}

body * {
    text-align: left;
}

/* Page frame: centred box with border.
   Horizontal + vertical padding on .page_margins creates the
   gap between the browser edge and the 1px #aaa frame on .page.
   This gap is preserved at every breakpoint (see responsive
   sections below). */
.page_margins {
  /* Fully fluid — no fixed max-width */
  min-width: 320px;        /* responsive: allow narrower on mobile */

  width: 100%;
  margin: 0 auto;
  padding: 24px;           /* gap on all four sides of the frame */
  text-align: left;
}

.page {
  padding: 12px 24px;
  background-color: #ffffff;
  border: 1px #aaa solid;  /* the frame — exact original value */
}


/* ------------------------------------------------------------
   3. SKIP LINKS
   ------------------------------------------------------------ */

#skiplinks {
  position: absolute;
  top: 0; left: -32768px;
  z-index: 1000;
  width: 100%;
  margin: 0; padding: 0;
  list-style-type: none;
}

#skiplinks a.skip {
  position: absolute;
  top: -32768px;
  left: -32768px;
}

#skiplinks a.skip:focus,
#skiplinks a.skip:active {
  position: static;
  left: 0;
  display: block;
  text-align: center;
  color: #fff;
  background: #333;
  border: 0 none;
  border-bottom: 1px #000 solid;
  padding: 10px 0;
  text-decoration: none;
  outline: 0 none;
}


/* ------------------------------------------------------------
   4. HEADER
   ------------------------------------------------------------ */

#header {
  position: relative;
  /* No bottom padding: the ruled line at the top of .subcolumns sits
     directly under the menu, so it visually belongs to the menu. The
     7 px bottom-padding inside each menu link provides a small breath
     of space, and the natural 1em/1.5em top-margin of the first body
     element gives clearly more air on the other side of the line. */
  padding: 12px 0 0 0;
  color: #000;
  background: #fff;
  font-size: 100%;
  /* Cap header (and therefore the banner + nav inside it) at 2048 px
     and centre it inside .page; the frame itself can still expand. */
  max-width: 2048px;
  margin-left: auto;
  margin-right: auto;
}

/* Random banner image.
   - Fluid up to 2048px (the natural pixel size of the source images)
   - Beyond 2048px the banner stops expanding and centres
   - padding-top % maintains aspect ratio relative to its own width */
#banner-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  margin-bottom: 8px;
}
#banner {
  width: 100%;
  max-width: 2048px;       /* cap at natural image pixel size */
  position: relative;
  overflow: hidden;
  padding-top: 26.6%;      /* maintains the existing aspect ratio */
  min-height: 80px;
  background: #ccc center / cover no-repeat;
}

#banner img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Page title — framed with bottom rule, matches original */
#header h2 {
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  font-size: 200%;         /* original h2 size */
  font-weight: normal;
  font-style: italic;
  color: #666;
  border-bottom: 1px #ddd solid;
  margin: 0;
  padding: 0.75em 0;
  line-height: 1.5em;
}


/* ------------------------------------------------------------
   5. NAVIGATION
   Exact structure from content_grids2.css #header nav rules.
   Original: white background, uppercase, letter-spaced,
   30px left/right padding, white dropdown with box-shadow.
   ------------------------------------------------------------ */

#nav-toggle { display: none; }

#nav-hamburger {
  display: none;
  cursor: pointer;
  background: #f4f4f4;
  color: #444;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.9em;
  padding: 0.5em 1em;
  width: 100%;
  text-align: left;
  border: none;
  border-top: 1px #ddd solid;
  border-bottom: 1px #ddd solid;
  letter-spacing: 1px;
  text-transform: uppercase;
  user-select: none;
}

nav#headernav {
  margin: 0;
  padding: 0;
}

nav#headernav ul {
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav#headernav > ul > li {
  float: left;
  position: relative;
  margin: 0;
  padding: 0;
}

nav#headernav a {
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 30px;
  display: block;
  text-decoration: none;
  color: #4D87C7;          /* same blue as body links */
  background: #fff;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;          /* slightly larger than the original 0.9em */
  white-space: nowrap;
}

nav#headernav a:hover,
nav#headernav a:focus {
  background-color: #f4f4f4;
  outline: 0 none;
}

/* Dropdown menus — white with shadow, exact original values */
nav#headernav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
  z-index: 600;
  flex-direction: column;
  flex-wrap: nowrap;
}

/* Third level: opens to the right */
nav#headernav ul ul ul {
  top: 0;
  left: 95%;
}

nav#headernav ul ul li {
  float: none;
  width: 225px;
}

nav#headernav li:hover > ul,
nav#headernav li:focus-within > ul {
  display: flex;
  flex-direction: column;
}

nav#headernav li:hover {
  background-color: #f4f4f4;
}

nav#headernav ul ul a {
  letter-spacing: 1px;    /* slightly less in dropdowns */
  padding: 7px 20px;
}

/* The – divider between gallery sections */
.nav-divider {
  display: block;
  padding: 7px 20px;
  color: #aaa;
  font-size: 0.9em;
  letter-spacing: 1px;
}


/* ------------------------------------------------------------
   6. MAIN CONTENT AREA
   Exact values from basemod_grids2.css
   ------------------------------------------------------------ */

#main {
  background: #fff;
  padding: 0 0;            /* padding added by .subcl/.subcr */
  /* No top margin: the rule line at the top of .subcolumns sits flush
     against the menu so the line visually belongs to the menu. */
  margin-top: 0;
  margin-bottom: 12px;
  /* Same 2048 px cap as #header so the text column never extends
     past the banner's edges, even when the outer frame is wider. */
  max-width: 2048px;
  margin-left: auto;
  margin-right: auto;
}

/* The ruled line above the two-column area — exact original */
.subcolumns {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
  border-top: 1px #ddd solid;
}

/* Nested subcolumns (50/50 inside content) */
.subcolumns .subcolumns {
  border-top: none;
}

/* 66% main column */
.c66l {
  flex: 0 0 66.666%;
  max-width: 66.666%;
}

/* 33% sidebar */
.c33r {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

/* 50/50 split used within content sections */
.c50l {
  flex: 0 0 50%;
  max-width: 50%;
}

.c50r {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Column padding — original values from basemod_grids2.css */
.subcl {
  padding: 0 0 0 0;        /* main column: no extra left pad */
}

/* The divider: border on right of main column — exact original */
#main .subcl {
  border-right: 1px #ddd solid;
  padding-right: 1em;
}

.subcr {
  padding: 0 0 0 24px;     /* original: padding-left 24px */
}

/* Sidebar sub-content flows as block */
.c33r .subcolumns {
  display: block;
  border-top: none;
}

/* Nested subcr (inside 50/50) */
.c50r .subcr {
  padding-left: 1em;
  border-left: 1px #ddd solid;
}

.maincontent { padding-left: 0; }


/* ------------------------------------------------------------
   7. PER-SECTION CONTENT BANNERS
   Source aspect ratio is 940:250 — the same ratio used for the
   Piwigo banners on top of the page.
   ------------------------------------------------------------ */

img.section-banner {
  width: 100% !important;
  height: auto !important;
  display: block;
  aspect-ratio: 940 / 250;
  object-fit: cover;
  object-position: center 40%;
  margin-bottom: 0.5em;
  max-width: 100%;
}

p:has(> img.section-banner) {
  margin-bottom: 0;
}

/* Section banners wrapped in <a class="banner-link"> by the Piwigo-linker
   script. The <img> carries a title="Caption © Author" attribute, so the
   browser shows a native hover tooltip — no CSS overlay needed.
   Markup shape: <a class="banner-link" href="…">
                    <img class="section-banner" src="…" title="…" />
                 </a>                                                 */

.banner-link {
  display: block;
  text-decoration: none;
}

p:has(> a.banner-link) { margin-bottom: 0; }


/* ------------------------------------------------------------
   8. TYPOGRAPHY
   Exact values from content_grids2.css
   ------------------------------------------------------------ */

/* Headings: Geneva for h1,h3,h4,h5,h6; Palatino for h2 */
h1, h3, h4, h5, h6 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #000;
}

h2 {
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  font-weight: normal;
  font-style: italic;
  color: #666;
  font-size: 200%;
  line-height: 1.5em;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* h3 em is also Palatino italic — preserved via selector */
h3 em {
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  font-style: italic;
}

h1 {
  font-size: 300%;
  line-height: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  letter-spacing: -2px;
}

h3 {
  font-size: 140%;
  line-height: 1.5em;
  margin-top: 1em;
  margin-bottom: 1em;
}

h4 {
  font-size: 130%;
  line-height: 1.5em;
  margin-top: 1.125em;
  margin-bottom: 1.125em;
}

h5, h6 {
  font-size: 115%;
  line-height: 1.286em;
  margin-top: 1.286em;
  margin-bottom: 1.286em;
  font-weight: bold;
}

/* Paragraphs — exact original */
p {
  color: #444;
  line-height: 1.5em;
  margin: 1.5em 0;
  font-family: Verdana, 'Trebuchet MS', Helvetica, Arial, sans-serif;
}

p.small {
  font-size: 0.8333em;
  line-height: 1.8em;
  margin: 1.8em 0;
}

/* Successive paragraphs get indent — original rule */
#main p + p {
  text-indent: 2em;
}

/* But not in nested subcolumns */
.subcolumns .subcolumns p {
  text-indent: 0;
  margin-left: 0;
}

/* .normal class used in some pages */
p.normal {
  font-size: 1em;
  text-indent: 0;
}

h5.normal {
  font-size: 115%;
  font-weight: bold;
}

/* Lists */
ul, ol, dl {
  line-height: 1.5em;
  margin: 0 0 1em 1em;
}

li {
    margin-left: 1.5em;
    line-height: 1.5em;
    text-align: left;
    color: #444;
}

dt { font-weight: bold; }
dd { margin: 1.5em 0 1.5em 2em; }

/* Inline formatting */
cite, blockquote { font-style: italic; }
blockquote { margin: 1.5em 0 1.5em 2em; color: #888; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

acronym, abbr {
  letter-spacing: 0.07em;
  border-bottom: 0.1em dashed #c00;
  cursor: help;
}

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

hr {
  color: #fff;
  background: transparent;
  margin: 1.5em 0;
  padding: 0;
  border: 0;
  border-bottom: 2px #ddd solid;
}

/* Tibetan / special script element — from Additions.css */
tib {
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  font-weight: normal;
  letter-spacing: 0;
  font-style: normal;
  font-size: 200%;
}

/* Allow long transliterations to wrap */
p, li, td { overflow-wrap: break-word; word-wrap: break-word; }


/* ------------------------------------------------------------
   9. LINKS — exact original colours
   ------------------------------------------------------------ */

a {
    color: #4D87C7;
    text-decoration: none;
}

a:focus {
  color: #000;
  background: #fff;
  outline: 3px #f93 solid;
  text-decoration: underline;
}

a:hover {
  color: #D16FE2;
}

a:active, a:target {
  color: #D16FE2;
}

#footer a {
  color: #222;
  font-weight: bold;
}

#footer a:hover,
#footer a:focus,
#footer a:active {
  color: #4D87C7;
  text-decoration: underline;
}


/* ------------------------------------------------------------
   10. GENERIC CONTENT CLASSES — from content_grids2.css
   ------------------------------------------------------------ */

.note {
  text-indent: 0 !important;
  color: #333;
  background: #f4f4f4;
  padding: 1.5em;
}

.important {
  text-indent: 0 !important;
  background: #ffd;
  padding: 1.5em;
}

.warning {
  text-indent: 0 !important;
  background: #fdd;
  padding: 1.5em;
}

.float_left {
  float: left;
  display: inline;
  margin: 0 1.5em 1em -36px;
}

.float_right {
  float: right;
  display: inline;
  margin: 0 1px 1em 1.5em;
}

.center {
  text-align: center;
  margin: 1.5em auto;
}

.dimmed { color: #888; }
.highlight { color: #c30; }


/* ------------------------------------------------------------
   11. TABLES — from content_grids2.css
   ------------------------------------------------------------ */

table {
  width: auto;
  border-collapse: collapse;
  margin-bottom: 0.5em;
}

table.full { width: 100%; }
table.fixed { table-layout: fixed; }

th, td { padding: 0.5em; }
thead th { background: #444; color: #fff; }
tbody th { background: #ccc; color: #333; }
tbody th.sub { background: #ddd; color: #333; }


/* ------------------------------------------------------------
   12. FOOTER — from content_grids2.css
   ------------------------------------------------------------ */

#footer {
  padding: 0 0;
  color: #666;
  /* Same 2048 px cap so footer aligns with the banner / main column. */
  max-width: 2048px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer h2: framed top and bottom with #ddd rules — original */
#footer h2 {
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  font-size: 160%;         /* slightly smaller than page h2 */
  font-weight: normal;
  font-style: italic;
  color: #666;
  border-top: 1px #ddd solid;
  border-bottom: 1px #ddd solid;
  margin: 0;
  padding: 0.75em 0;
}

/* Images */
img {
    height: auto;
}

a > img[src*="Backtotop"] {
  display: inline;
  vertical-align: middle;
}


/* ------------------------------------------------------------
   13. PIWIGO GALLERY EMBEDS
   ------------------------------------------------------------ */

.gallery-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 1.5em 0;
  overflow: hidden;
}

.gallery-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.gallery-embed-panorama { padding-top: 26.5%; }


/* ------------------------------------------------------------
   14. RESPONSIVE — tablet (≤ 900px)
   ------------------------------------------------------------ */

@media screen and (max-width: 900px) {

  /* Remove fixed width constraint, but keep a gap on all sides
     so the 1px frame never touches the browser edge. */
  .page_margins {
    min-width: 0;
    padding: 8px;
  }

  /* Frame remains on all four sides at this breakpoint. */

  /* Show hamburger, collapse nav */
  #nav-hamburger { display: block; }

  nav#headernav > ul {
    display: none;
    flex-direction: column;
  }

  #nav-toggle:checked ~ nav#headernav > ul {
    display: flex;
  }

  /* Mobile: dropdowns are indented static blocks */
  nav#headernav ul ul,
  nav#headernav ul ul ul {
    display: flex !important;
    flex-direction: column;
    position: static;
    box-shadow: none;
    background: #f9f9f9;
    min-width: 0;
    padding-left: 1em;
    width: auto;
  }

  nav#headernav ul ul li { width: auto; }

  nav#headernav a {
    padding: 7px 16px;
    letter-spacing: 1px;
  }

  /* Stack columns */
  .c66l, .c33r, .c50l, .c50r {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Replace vertical divider with horizontal */
  #main .subcl {
    border-right: none;
    border-bottom: 1px #ddd solid;
    padding-right: 0;
    padding-bottom: 1em;
    margin-bottom: 1em;
  }

  .subcr {
    padding-left: 0;
  }

  .c50r .subcr {
    border-left: none;
    border-top: 1px #ddd solid;
    padding-left: 0;
    padding-top: 1em;
    margin-top: 0.5em;
  }
}


/* ------------------------------------------------------------
   15. RESPONSIVE — mobile (≤ 540px)
   ------------------------------------------------------------ */

@media screen and (max-width: 540px) {

  body { font-size: 70%; }

  /* Smaller but still present gap between browser edge and frame. */
  .page_margins { padding: 6px; }

  .page { padding: 0 12px 12px 12px; }

  #banner { padding-top: 30%; }

  nav#headernav a { letter-spacing: 0; padding: 8px 12px; }

  h2 { font-size: 160%; }
  h3 { font-size: 120%; }
}


/* ------------------------------------------------------------
   16. PRINT — from print_grids2.css
   ------------------------------------------------------------ */

@media print {

  body { font-size: 10pt; }

  #skiplinks, nav#headernav, #nav-hamburger,
  #banner { display: none; }

  #header, #main { padding: 0; }

  .subcl, .subcr, .maincontent {
    padding: 0 !important;
    border: 0 none !important;
  }

  .subcolumns { border: 0 none; }

  .c66l, .c33r, .c50l, .c50r {
    flex: 0 0 100%;
    max-width: 100%;
  }

  img.section-banner {
    max-height: 5cm;
    object-fit: cover;
  }

  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}