/* travel.beall.id.au — faithful recreation of the thm_travel theme.
   Pure CSS + images (no web fonts, no JS dependency). */

html, body, #page { height: 100%; }
* { box-sizing: border-box; }
body {
  margin: 0;
  color: #3b3b3b;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: #0071B3; text-decoration: none; }
a:hover, a:focus { color: #018fe2; }
a:active { color: #23aeff; }
img { max-width: 100%; height: auto; }

#page-wrapper {
  min-height: 100%;
  min-width: 960px;
  background: #292929;
}
#page {
  min-height: 100%;
  background-color: #ffffff;
  background-image: linear-gradient(to top, #ffffff 0%, #3476f4 100%);
}

/* ---- Banner: clouds + green strip + kombi van ---- */
#banner {
  width: 100%;
  margin-bottom: 5px;
  /* clouds.png is white clouds on transparent; the blue comes from the
     #page gradient showing through. No solid bg-color or it hides the sky. */
  background-image: url(/static/theme/green_strip.png), url(/static/theme/clouds.png);
  background-repeat: repeat-x, no-repeat;
  background-position: center bottom, top center;
  background-size: auto, 100%;
  background-color: transparent;
}
#banner img.center { display: block; margin: 0 auto; width: auto; height: 187px; max-width: 100%; }

/* ---- Header section + nav ---- */
#header .section { width: 960px; margin: 0 auto; position: relative; }
#main-menu { clear: both; padding-bottom: 6px; }
#main-menu-links {
  list-style: none; margin: 0; padding: 0 15px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95em; margin-left: 30%;
}
#main-menu-links li { float: left; padding: 0 1px; margin: 0 1px; }
#main-menu-links a {
  display: block; color: #fff; background: #b11b1f;
  height: 2.4em; line-height: 2.4em; padding: 0 0.9em;
  border-radius: 8px;
}
#main-menu-links a:hover { background: #c93338; }
#main-menu-links a.active { background: #db511e; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---- Main layout: 960px, sidebar 240 + content 720 ---- */
#main-wrapper { width: 960px; margin: 0 auto; min-height: 300px; padding-top: 8px; }
#sidebar-first { float: left; width: 240px; }
#content { float: left; width: 720px; }
.no-sidebars #content { float: none; width: 960px; }
#content .section, .sidebar .section { padding: 0 15px; }

/* ---- Sidebar blocks (Monthly archive / View by location) ---- */
.sidebar .block {
  background: #f6f6f2; border: 1px solid #c9c9c2;
  padding: 10px 14px; margin-top: 10px; border-radius: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}
.sidebar h2 {
  font-size: 1.1em; margin: 0 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid #c9c9c2; font-family: Georgia, serif;
}
.sidebar ul { list-style: none; padding-left: 0; margin: 0; }
.sidebar li { margin: .15rem 0; }
.sidebar .count { color: #888; }
/* Collapsible location tree: triangle for countries, dot for leaf places */
.loc-tree ul { list-style: none; margin: 0; padding-left: 1.1em; }
.loc-tree > ul { padding-left: 0; }
.loc-tree summary { cursor: pointer; list-style: none; }
.loc-tree summary::-webkit-details-marker { display: none; }
.loc-tree summary::before {
  content: "\25B8"; color: #b3b3b3; font-size: .8em; margin-right: .4em;
  display: inline-block; transition: transform .12s;
}
.loc-tree details[open] > summary::before { transform: rotate(90deg); }
.loc-tree li.leaf::before { content: "\2022"; color: #b3b3b3; margin-right: .4em; }

/* ---- Content prose ---- */
#content h1 { font-size: 1.8em; line-height: 1.15; margin: .2em 0 .4em; }
/* Breadcrumb — charcoal, consistent colour for all parts */
.crumbs { color: #333; font-size: .85em; margin: 0 0 .6rem; }
.crumbs a { color: #333; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.post-meta { color: #666; font-size: .85em; margin: 0 0 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ---- Lined notepad paper (shared) ---- */
.notepad {
  background-image: url(/static/theme/notepad_top.png), url(/static/theme/notepad.png);
  background-repeat: no-repeat, repeat-y;
  background-position: top center, top center;
  background-size: 690px 102px, 690px 25px;
  padding: 14px 24px 28px 80px;
  min-height: 300px;
  max-width: 690px;
  line-height: 25px;
}
/* Journal index has no breadcrumb above it; match the sidebar block's
   10px top margin so the notepad and "Monthly archive" box line up. */
.notepad.journal-index { margin-top: 10px; }
/* Journal posts: notepad + cursive handwriting (generic cursive = the
   elegant system script, matching the original theme). Text sits ON the
   ruled lines (line-height = the 25px ruling pitch). */
.node-journal-entry { font-family: cursive; font-size: 1.2em; line-height: 25px; }
.node-journal-entry h1 { font-family: cursive; font-size: 2.4em; line-height: 50px; color: #0071B3; margin: 0; }
.node-journal-entry p { margin: 0 0 25px; text-align: justify; }
.places { font-size: .9em; margin: 0 0 .6rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.totop, .totop-inline { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.totop { text-align: right; margin: .25rem 0 0; font-size: .8em; }
.totop-inline { font-size: .7em; font-weight: normal; }

/* ---- Journal index (TOC) ---- */
.toc { list-style: none; padding: 0; margin: 0; }
.toc h2 { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.05em; color: #333; margin: 1.25rem 0 .4rem; }
.toc-item { margin: 0 0 1rem; }
.toc-item a { font-weight: bold; }
.toc-item .date { color: #666; font-size: .8em; margin-left: .4rem; font-weight: normal;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.toc-item .excerpt { margin: .15rem 0 0; font-size: .9em; color: #333; }

/* ---- Prev/next ---- */
.seq-nav { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #cfd8e8;
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .9em; }
.seq-nav .next { text-align: right; margin-left: auto; }

/* ---- Gallery hierarchy index ---- */
.gallery-tree ul { list-style: none; padding-left: 1.1rem; }
.gallery-tree > ul { padding-left: 0; }
.gallery-tree .count { color: #777; font-size: .85em; }

/* ---- Gallery carousel + thumbnail strip (built by lightbox.js) ---- */
.gallery { margin-top: 1rem; }
.feature { position: relative; text-align: center; background: #14213d; margin-bottom: 6px; }
.feature .feat-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; cursor: zoom-in; }
.feat-prev, .feat-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.4); color: #fff; border: 0; cursor: pointer;
  font-size: 2rem; line-height: 1; width: 40px; height: 64px;
}
.feat-prev { left: 0; } .feat-next { right: 0; }
.feat-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  background: rgba(0,0,0,.5); color: #fff; padding: 4px 8px; font-size: .85rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.gallery .photos {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; overflow-x: auto; scroll-behavior: smooth;
}
.gallery .photos li { flex: 0 0 auto; margin: 0; line-height: 0; }
.gallery .photos a { display: block; }
.gallery .photos img { height: 64px; width: auto; display: block; opacity: .65; }
.gallery .photos a.active img, .gallery .photos a:hover img { opacity: 1; outline: 2px solid #db511e; }

/* Fallback grid (no JS): show thumbnails as a wrapped grid */
.no-js .gallery .photos { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); overflow: visible; }
.no-js .gallery .photos img { height: auto; width: 100%; opacity: 1; }

/* ---- Footer ---- */
#footer-wrapper { background: #292929; padding: 30px 5px; margin-top: 30px; }
#footer { width: 940px; margin: 0 auto; color: #fffeff; text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; }

/* ---- Floating back-to-top (JS-toggled, fixed bottom-left) ---- */
.backtotop {
  /* sit in the gutter just left of the content column */
  position: fixed; left: max(10px, calc(50% - 300px)); bottom: 14px;
  z-index: 100; display: none;
  background: #b11b1f; color: #fff; border: 0; border-radius: 6px;
  padding: 7px 12px; cursor: pointer; font-size: .85em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.backtotop:hover { background: #db511e; }
.backtotop.show { display: block; }

/* ---- Lightbox: colorbox style — dimmed, page visible behind ---- */
.lb-dialog {
  border: 0; padding: 0; margin: 0; background: transparent;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; overflow: hidden;
}
.lb-dialog::backdrop { background: rgba(0,0,0,.55); }
.lb-dialog[open] { display: flex; align-items: center; justify-content: center; }
.lb-frame {
  position: relative; background: #fff; border: 1px solid #222; padding: 6px;
  box-shadow: 0 6px 30px rgba(0,0,0,.6);
}
.lb-img { display: block; max-width: 84vw; max-height: 82vh; }
/* Each arrow is a wide invisible hover-zone over its half of the image;
   a small chevron fades in only while hovering that half. */
.lb-prev, .lb-next {
  position: absolute; top: 0; bottom: 0; width: 38%;
  background: transparent; border: 0; outline: none; cursor: pointer;
  display: flex; align-items: center;
  color: #fff; font-size: 1.4rem; line-height: 1;
  text-shadow: 0 0 4px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .15s;
}
.lb-prev { left: 6px; justify-content: flex-start; }
.lb-next { right: 6px; justify-content: flex-end; }
.lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close {
  position: absolute; top: 2px; right: 6px; background: transparent;
  color: #444; border: 0; outline: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; text-shadow: 0 0 3px rgba(255,255,255,.9);
}
.lb-close:hover { color: #000; }
.lb-cap, .lb-count {
  position: absolute; bottom: 6px; margin: 0; color: #fff;
  background: rgba(0,0,0,.55); padding: 2px 8px; font-size: .8rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lb-cap { left: 6px; max-width: 70%; }
.lb-count { right: 6px; }