/* ============================================================
   Design refresh — layered on top of style.css.
   Everything here is an override, easy to tweak or drop.

   Knobs you'll most likely touch:
     --bg      : which ocean image (ocean-calm / ocean-cyan / ocean-wave)
     --accent  : the single accent colour
   ============================================================ */
:root {
  --bg:          url("/theme/img/ocean-calm.jpg");
  --accent:      #2a3d46;   /* slate that matches the footer background */
  --accent-dark: #1e2c33;
  --ink:         #464e54;   /* body/headings — a hair darker than the theme's #555f66 */
  --heading:     #464e54;   /* kept equal to --ink; used by the .dark safety net */
  --light:       #e7e7e7;   /* light text on dark — lifted from #d5d5d5 */
  --panel:       rgba(255, 255, 255, 0.88);  /* translucent panel (no blur → clean seams) */
  --panel-dark:  rgba(18, 32, 40, 0.82);     /* footer glass */
}

/* --- The ocean background (fonts left as the theme's original) ------- */
body {
  background-image: var(--bg);   /* cover / fixed / center already set in style.css */
  color: var(--ink);
}

/* --- Small contrast bump: dark text a hair darker, light text lighter --- */
h1, h2, h3, h4, h5, h6,
.card .card-title { color: var(--ink); }

header.main-header,
footer.main-footer,
.dark-text, .dark { color: var(--light) !important; }

/* --- One light panel behind all content (heading → main → footer) ----
   The <main> carries the light background + a single soft shadow. The
   individual sections are just transparent spacing containers, so there are
   no per-section shadows meeting and no seams. */
.main-panel {
  background: var(--panel);
  box-shadow: 0 0 28px rgba(20, 40, 55, 0.20);
}
section:not(.hero) {
  background: transparent;   /* overrides the theme's #f9f2f2 */
  box-shadow: none;          /* overrides the theme's heavy black shadow */
  margin: 0;
}
/* Safety net: if any section still carries .dark, keep it on the light panel */
section.dark:not(.hero) {
  background: transparent !important;
  color: var(--ink) !important;
}
section.dark h1, section.dark h2, section.dark h3,
section.dark h4, section.dark h5, section.dark h6,
section.dark .card .card-title { color: var(--heading) !important; }
section.dark a { color: var(--accent) !important; }

/* Top of the page (nav bar + hero) gets one flat 20% black overlay so the
   light text reads over the ocean. The two elements are stacked flush, so
   matching backgrounds make a single continuous band. */
header.main-header {
  background: rgba(0, 0, 0, 0.2);
}
header.main-header nav {
  font-size: 0.82em;
}

/* Inner pages (no hero): extend the light panel up into the nav bar and
   switch the nav text to dark. The header sits above the panel's top shadow. */
.page-plain header.main-header {
  position: relative;
  z-index: 1;
  background: var(--panel);
}
.page-plain header.main-header,
.page-plain header.main-header a,
.page-plain header.main-header .dark-text {
  color: var(--ink) !important;
  text-shadow: none;
}

.hero {
  padding: 6rem 0 8rem 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
  border: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero h2, .hero p {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 10, 18, 0.5);
}

/* Footer links: drop the text underline (the ul.alt dividers stay) */
footer.main-footer a,
footer.main-footer a:hover {
  text-decoration: none;
}

/* Footer: frosted dark, flush with the last section */
footer.main-footer {
  background: var(--panel-dark) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 -6px 30px rgba(20, 40, 55, 0.18);
  margin: 0;
}

/* Footer link lists (Navigate + Other sites) — a small icon in front of each */
footer.main-footer .link-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
footer.main-footer .link-logo {
  flex: 0 0 auto;
  width: 1.25em;
  text-align: center;
  opacity: 0.85;
}
footer.main-footer .link-list a:hover .link-logo { opacity: 1; }
/* The Nanobyte "nb" mark (CMU Typewriter) — tinted to match the icon font via mask.
   The theme's .fa icons carry margin: .25rem .25rem .25rem 0; match it so the label
   lines up with the GitHub/RSS labels. */
footer.main-footer .nb-logo {
  display: inline-block;
  height: 0.82em;
  margin: 0.25rem 0.25rem 0.25rem 0;
  background-color: currentColor;
  -webkit-mask: url("/theme/img/nb-logo.svg") no-repeat center / contain;
  mask: url("/theme/img/nb-logo.svg") no-repeat center / contain;
}

/* Bottom licence line — centred, like the old copyright line. The CC badges are
   the official icons with the white disc stripped, tinted via mask so they read
   as outline glyphs in the same colour as the icon font. */
footer.main-footer .footer-license-line {
  margin-top: 2.25rem;
  font-size: 0.9em;
  opacity: 0.72;
}
footer.main-footer .footer-license-line a {
  color: inherit !important;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
footer.main-footer .footer-license-line a:hover { text-decoration: none; opacity: 1; }
.cc-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.2em;
  margin-right: 0.35em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cc-icon:last-of-type { margin-right: 0.6em; }
.cc-cc { -webkit-mask-image: url("/theme/img/cc/cc.svg"); mask-image: url("/theme/img/cc/cc.svg"); }
.cc-by { -webkit-mask-image: url("/theme/img/cc/by.svg"); mask-image: url("/theme/img/cc/by.svg"); }
.cc-nc { -webkit-mask-image: url("/theme/img/cc/nc.svg"); mask-image: url("/theme/img/cc/nc.svg"); }
.cc-sa { -webkit-mask-image: url("/theme/img/cc/sa.svg"); mask-image: url("/theme/img/cc/sa.svg"); }

/* --- Card grids: equal-height cards, uniform thumbnails, aligned buttons --
   Turns the floated column row into a flex row so every card in a section is
   the same height, thumbnails share one shape, and buttons sit on one line. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.card-grid > [class^="col"] {
  display: flex;            /* let the card stretch to the tallest in the row */
}
.card-grid .card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.card-grid .fit-image { display: block; }
.card-grid .card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;   /* all thumbnails cropped to the same shape */
  object-fit: cover;
}
.card-grid .card-actions {
  margin-top: auto;        /* pin the button to the bottom, aligned across cards */
}
/* Placeholder for cards without a cover image — keeps the grid aligned */
.card-grid .card-ph .fit-image {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(36, 54, 61, 0.20), rgba(36, 54, 61, 0.34));
}
.card-grid .card-ph .fit-image::after {
  font-family: "FontAwesome";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.25rem;
  color: rgba(255, 255, 255, 0.55);
}
.card-grid .card-ph-blog .fit-image::after    { content: "\f15c"; }  /* file-text */
.card-grid .card-ph-project .fit-image::after { content: "\f121"; }  /* code */

/* --- Partial, muted-gray hr between stacked sections ----------------- */
section:not(.hero) + section:not(.hero) {
  position: relative;
}
section:not(.hero) + section:not(.hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 90%);               /* matches the content container */
  height: 1px;
  background: rgba(85, 95, 102, 0.2);    /* dim muted gray */
}

/* --- Links, buttons, cards ------------------------------------------ */
a {
  color: var(--accent);
  transition: color .15s ease;
}
a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* Buttons: outline by default. On hover the fill wipes up from the bottom with
   a hard edge (a ::before that grows from height 0 → 100%) and the text flips
   to the opposite colour.
     · light style (default, on the panel): accent outline → accent fill, text → white
     · dark style (.dark, over the ocean): white outline → white fill, text → accent */
.btn, button,
input[type="submit"], input[type="reset"], input[type="button"] {
  position: relative;
  overflow: hidden;
  z-index: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--accent);
  background: transparent !important;
  border: 1px solid var(--accent);
  transition: color .3s ease;
}
.btn::before, button::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--accent);
  transition: height .3s ease;
  z-index: -1;
}
.btn:hover, button:hover,
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
  color: #fff !important;
  background: transparent !important;   /* let the ::before fill show, not the theme tint */
}
.btn:hover::before, button:hover::before {
  height: 100%;
}

/* Dark variant — used over the ocean (e.g. the hero button) */
.btn.dark {
  color: #fff;
  border-color: #fff;
}
.btn.dark::before {
  background: #fff;
}
.btn.dark:hover {
  color: var(--accent) !important;
  background: transparent !important;
}

/* --- Blog + projects: two-column list + sidebar --------------------- */
.blog-layout {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  text-align: left;
}
.blog-main { flex: 1 1 auto; min-width: 0; }
.blog-sidebar { flex: 0 0 250px; order: -1; }   /* sidebar sits on the left */
@media (max-width: 768px) {
  .blog-layout { flex-direction: column; gap: 2rem; }
  .blog-sidebar { flex-basis: auto; width: 100%; order: 0; }  /* main content first when stacked */
}

.blog-preview {
  padding: 2.75rem 0;
  border-bottom: 1px solid rgba(20, 40, 55, 0.1);
}
.blog-preview:first-child { padding-top: 0; }
.blog-preview:last-of-type { border-bottom: none; }  /* last article — the .pager div follows it, so :last-child won't match */
.blog-preview .blog-title { margin: 0 0 0.6rem; }
.blog-preview .blog-title a { color: var(--ink); }
.blog-preview .blog-title a:hover { color: var(--accent); text-decoration: none; }
.blog-preview .blog-subtitle { display: block; margin-bottom: 0.6rem; opacity: 0.7; }
.blog-preview .blog-summary { margin: 0 0 1rem; }
.blog-preview .blog-summary p { margin: 0 0 0.75rem; }
.blog-preview .blog-summary p:last-child { margin-bottom: 0; }
.blog-preview .blog-summary img { max-width: 100%; border-radius: 0.5rem; }
.blog-preview .blog-summary iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 0.5rem;
}

.blog-sidebar .sidebar-block { margin-bottom: 2rem; }
.blog-sidebar h4 { margin: 0 0 0.5rem; }
/* Subtle sidebar nav — shared by the projects switcher and the taxonomy tree.
   Muted links, no underlines or dividers; soft hover + accent active state. */
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.nav-list a {
  display: block;
  padding: 0.34rem 0.55rem;
  border-radius: 6px;
  color: rgba(70, 78, 84, 0.7);        /* muted ink */
  text-decoration: none;
  line-height: 1.35;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-list a:hover {
  background: rgba(42, 61, 70, 0.07);
  color: var(--accent-dark);
  text-decoration: none;
}
.nav-list a.active {
  background: rgba(42, 61, 70, 0.1);
  color: var(--accent);
  font-weight: 600;
}

/* --- Sidebar search ------------------------------------------------- */
.sidebar-search { position: relative; }
.site-search { position: relative; display: flex; align-items: center; }
.site-search .search-icon {
  position: absolute;
  left: 0.7rem;
  font-size: 0.85em;
  color: var(--accent);
  opacity: 0.6;
  pointer-events: none;
}
.search-input {
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.7rem 0.5rem 2.1rem;
  font-size: 0.9em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 40, 55, 0.18);
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 61, 70, 0.12);
}
.search-results {
  margin-top: 0.5rem;
  background: #fff;
  border: 1px solid rgba(20, 40, 55, 0.12);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(20, 40, 55, 0.14);
  overflow: hidden;
}
.search-hit {
  display: block;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(20, 40, 55, 0.07);
  color: var(--ink);
  text-decoration: none;
}
.search-hit:last-child { border-bottom: none; }
.search-hit:hover { background: rgba(42, 61, 70, 0.06); text-decoration: none; }
.search-hit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.search-hit-title { font-weight: 600; color: var(--accent-dark); }
.search-hit-type {
  flex: 0 0 auto;
  font-size: 0.68em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
}
.search-hit-snippet {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82em;
  line-height: 1.4;
  opacity: 0.72;
}
.search-empty { margin: 0; padding: 0.7rem; font-size: 0.85em; opacity: 0.6; }

/* Search results page (/search/) */
.search-page-form { max-width: 480px; margin: 0 auto 1rem; }
.search-page-form .search-input { font-size: 1em; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.search-status { margin: 0 0 1.5rem; opacity: 0.65; }
.search-page-results { max-width: 640px; margin: 0 auto; }
.search-page-results .search-hit { border-radius: 8px; padding: 0.8rem 0.9rem; }
.search-page-results .search-hit-title { font-size: 1.08em; }

/* --- Sidebar taxonomy accordion (categories / archive) --------------
   Same subtle language as .nav-list: muted rows, soft hover, small dates,
   no dividers. */
.cat-tree { list-style: none; margin: 0; padding: 0; }

.cat-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: rgba(70, 78, 84, 0.8);
  transition: background 0.15s ease, color 0.15s ease;
}
.cat-summary:hover { background: rgba(42, 61, 70, 0.07); color: var(--accent-dark); }
.cat-summary::-webkit-details-marker { display: none; }
.cat-summary::before {
  content: "\f0da";               /* FontAwesome caret-right */
  font-family: "FontAwesome";
  font-size: 0.75em;
  width: 0.8em;
  text-align: center;
  color: var(--accent);
  opacity: 0.65;
  transition: transform 0.2s ease;
}
details[open] > .cat-summary::before { transform: rotate(90deg); }
.cat-name { flex: 1 1 auto; }
.cat-summary .count { font-size: 0.78em; opacity: 0.45; }

.cat-body { padding: 0.1rem 0 0.5rem 1.1rem; }
.cat-articles { list-style: none; margin: 0; padding: 0; }
.cat-articles li { margin: 0; }
.cat-articles a {
  display: block;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  color: rgba(70, 78, 84, 0.72);
  text-decoration: none;
  line-height: 1.3;
  transition: background 0.15s ease, color 0.15s ease;
}
.cat-articles a:hover { background: rgba(42, 61, 70, 0.07); color: var(--accent-dark); text-decoration: none; }
.cat-articles a .art-title { display: block; }
.cat-articles a time { display: block; font-size: 0.72em; opacity: 0.5; margin-top: 0.05rem; }

.cat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.2rem 0 0 0.55rem;
}
.cat-actions .show-more {
  padding: 0;
  border: none;
  background: none !important;
  font-size: 0.8em;
  color: var(--accent);
  cursor: pointer;
  overflow: visible;
}
.cat-actions .show-more::before { display: none; }
.cat-actions .show-more:hover { color: var(--accent-dark) !important; text-decoration: underline; }
.cat-all { font-size: 0.8em; opacity: 0.75; }

/* --- Button rows (project links, resume) ---------------------------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.button-row .btn .fa { margin-right: 0.4em; }

/* Card hover: no lift — the thumbnail zooms gently inside a clipped frame,
   and the title picks up the accent colour. */
.card-grid .card-image {
  overflow: hidden;
  border-radius: 0.5rem;
}
.card-grid .card-image img {
  transition: transform .45s ease;
}
.card-grid .card:hover .card-image img {
  transform: scale(1.06);
}
.card-grid .card:hover .card-title a {
  color: var(--accent);
}

/* Section "all projects / all posts" link under the card grid.
   Echoes the uppercase, letter-spaced language of the section headings. */
.section-more {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.section-more a {
  display: inline-block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity .2s ease, color .2s ease;
}
.section-more a .arrow {
  display: inline-block;
  margin-left: 0.15em;
  transition: transform .2s ease;
}
.section-more a:hover {
  opacity: 1;
  color: var(--accent-dark);
}
.section-more a:hover .arrow {
  transform: translateX(0.2em);
}