/* styles-v5.css — Retro Articles Theme (Fully Responsive Edition + Header Alignment Fix) */

:root {
  --paper: #f8f5ee;
  --ink: #222;
  --ink-light: #444;
  --muted: #777;
  --accent: #c26d39;
  --accent-hover: #a95d30;
  --border: #d7d1c3;
  --radius: 6px;
  --maxw: 1100px;
  --shadow: 2px 2px 0 rgba(0,0,0,0.12);
  --font-serif: "Georgia", "Times New Roman", serif;
  --font-sans: "Libre Franklin", "Inter", sans-serif;
  --font-mono: "Courier New", monospace;
}

/* Base */
*,
*::before,
*::after { box-sizing: border-box; } /* alignment stability */
body.v5-body {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }

/* Header */
.v5-header {
  background: #fefcf8;
  border-bottom: 2px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 30;
}
.v5-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v5-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--ink);
  letter-spacing: 0.05em;
}
.v5-logo img { width: 40px; height: 40px; border-radius: 50%; }

.v5-nav {
  display: flex;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
}
.v5-nav a {
  color: var(--ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.v5-nav a:hover { border-color: var(--accent); }

.v5-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  background: #fffdf9;
  border-radius: var(--radius);
  overflow: hidden;
}
.v5-search input {
  border: none;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-mono);
  background: transparent;
  color: var(--ink);
  outline: none;
}
.v5-search button {
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: 0.2s;
}
.v5-search button:hover { background: var(--accent-hover); }

/* Ticker */
.v5-ticker {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border-bottom: 2px solid #b45a2c;
  overflow: hidden;
}
.v5-ticker__track {
  display: flex;
  gap: 2rem;
  padding: 0.4rem 1.25rem;          /* align to page padding */
  max-width: var(--maxw);            /* keep same left/right edge as content */
  margin: 0 auto;                    /* center track */
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}
@keyframes ticker { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
.v5-ticker__track a { color: #fff; }
.v5-dot { opacity: 0.6; }

/* Breadcrumb */
.v5-breadcrumb {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.9rem;
  max-width: var(--maxw);
  margin: 1rem auto 0.5rem;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.v5-breadcrumb__sep { margin: 0 0.4rem; }
.v5-breadcrumb__item.is-current { color: var(--accent); }

/* Category Header — under breadcrumbs */
.v5-category-header {
  max-width: var(--maxw);
  margin: 0.5rem auto 0;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.v5-category-header h1 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--ink);
  margin: 0;
  padding: 0;
  text-transform: capitalize;
  border-bottom: 2px solid var(--border);
  display: inline-block;
  padding-bottom: 0.25rem;
}

/* Chips */
.v5-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
  max-width: var(--maxw);
  margin: 0.8rem auto 1.5rem;
  padding: 0 1.25rem;
}
.v5-chip {
  background: #fffdf9;
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius);
  transition: 0.2s;
}
.v5-chip:hover, .v5-chip.is-active {
  background: var(--accent);
  color: #fff;
}

/* Hero */
.v5-hero {
  max-width: var(--maxw);
  margin: 1.5rem auto;
  position: relative;
  border: 2px solid var(--border);
  background: #fffdf9;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 1.25rem;
}
/* keep hero edges aligned with content by removing inner padding on the media itself */
.v5-hero { padding: 0; } /* alignment fix; no visual change to image area */
.v5-hero img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: saturate(0.8);
}
.v5-hero__overlay {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  color: #fff;
  padding: 1.5rem;
}
.v5-hero__overlay h1 {
  font-size: 1.8rem;
  margin: 0.5rem 0 0;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

/* Tag */
.v5-tag {
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  padding: 0.25rem 0.6rem;
  text-transform: uppercase;
  border-radius: var(--radius);
}

/* Cards */
.v5-cardgrid {
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 0 1.25rem;
}
.v5-card {
  border: 2px solid var(--border);
  background: #fffdf9;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  transition: transform 0.25s ease;
}
.v5-card:hover { transform: translateY(-5px); }
.v5-card__imgwrap img {
  height: 180px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.v5-card__body { padding: 1rem; }
.v5-card__cat {
  color: var(--accent);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.v5-card__title {
  color: var(--ink);
  font-weight: bold;
  margin-top: 0.3rem;
  font-size: 1.05rem;
}

/* Category list */
.v5-list {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1.25rem;
}
.v5-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}
.v5-row__thumb img {
  width: 240px;
  height: 160px;
  object-fit: cover;
}
.v5-row__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
.v5-row__excerpt { color: var(--ink-light); }
.v5-row__meta {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Buttons */
.v5-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: 0.2s;
}
.v5-btn:hover { background: var(--accent-hover);color: #f59f15; }
.v5-btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.v5-btn--ghost:hover { background: var(--accent); color: #fff; }

/* Pager */
.v5-pager {
  text-align: center;
  margin: 3rem 0;
  font-family: var(--font-mono);
  max-width: var(--maxw);      /* align pager with page edges */
  padding: 0 1.25rem;
  margin-left: auto; margin-right: auto;
}
.v5-pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px; height: 34px;
  line-height: 34px;
  text-align: center;
  margin: 0 0.2rem;
  color: var(--ink);
  transition: 0.2s;
}
.v5-pill.is-active, .v5-pill:hover {
  background: var(--accent);
  color: #fff;
}

/* Article */
.v5-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  background: #fffdf9;
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.v5-article__head { text-align: center; margin-bottom: 1rem; }
.v5-article__head h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  margin: 0.4rem 0;
}
.v5-author {
  font-family: var(--font-mono);
  color: var(--muted);
}
.v5-heroimg img {
  border: 2px solid var(--border);
  width: 100%;
  height: 380px;
  object-fit: cover;
  filter: sepia(0.25);
  margin-bottom: 1rem;
  border-radius: var(--radius);
}
.v5-article__prose {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.75;
}
.v5-article__prose h2 {
  color: var(--accent);
  font-family: var(--font-serif);
  margin-top: 1.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}

/* Footer */
.v5-footer {
  background: #fefcf8;
  border-top: 2px solid var(--border);
  text-align: center;
  padding: 1.5rem;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.9rem;
}
/* keep footer content aligned to the same edges */
.v5-footer__links,
.v5-footer > small {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: block;
}
.v5-footer__links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.v5-footer__links a { color: var(--ink-light); }
.v5-footer__links a:hover { color: var(--accent); }

/* Static pages — centered white boxes (added, no visual impact elsewhere) */
.v5-static {
  max-width: var(--maxw);
  margin: 1.5rem auto 2rem;
  padding: 0 1.25rem;
}
.v5-prose {
  background: #fffdf9;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}

/* Responsive Layout Improvements */
@media (min-width: 1440px) {
  .v5-hero img { height: 520px; }
  .v5-article__prose { font-size: 1.1rem; }
  .v5-cardgrid { gap: 2rem; }
}

@media (max-width: 959px) {
  .v5-header__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  .v5-nav { flex-wrap: wrap; justify-content: center; }
  .v5-cardgrid { grid-template-columns: repeat(2, 1fr); }
  .v5-hero img { height: 360px; }
}

@media (max-width: 720px) {
  body.v5-body { font-size: 0.95rem; }
  .v5-header__inner { flex-direction: column; gap: 0.5rem; }
  .v5-logo { font-size: 1rem; }
  .v5-search { width: 100%; }
  .v5-nav {
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
  }
  .v5-nav::-webkit-scrollbar { display: none; }
  .v5-category-header, .v5-chips { justify-content: center; text-align: center; }
  .v5-category-header h1 { font-size: 1.4rem; }
  .v5-hero img { height: 260px; border-radius: 0; }
  .v5-cardgrid { grid-template-columns: 1fr; }
  .v5-row {
    flex-direction: column;
    border: 1px solid var(--border);
    padding: 0.75rem;
    border-radius: var(--radius);
  }
  .v5-article { margin: 0 0.5rem; border: none; box-shadow: none; }
  .v5-footer__links { flex-direction: column; gap: 0.25rem; }
}

@media (max-width: 480px) {
  .v5-hero img { height: 200px; }
  .v5-hero__overlay { padding: 1rem; }
  .v5-tag { font-size: 0.7rem; }
  .v5-hero__overlay h1 { font-size: 1.25rem; line-height: 1.3; }
  .v5-card__title { font-size: 1rem; }
  .v5-footer { font-size: 0.8rem; padding: 1rem; }
}

/* ────────────────────────────────────────────────────────────
   Search page (retro look to match the site)
   ────────────────────────────────────────────────────────── */

.v5-body--search {
  background: var(--paper);
}

.v5-searchpage {
  max-width: var(--maxw);
  margin: 2rem auto 3rem;
  padding: 0 1.25rem;
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

.v5-searchbrand {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--border);
  padding-bottom: .25rem;
}

.v5-searchbox {
  width: 100%;
  max-width: 820px;
  background: #fffdf9;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap; /* gracefully wraps on small screens */
}

.v5-searchbox input[type="text"] {
  flex: 1 1 420px;
  min-width: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: .6rem .8rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  outline: none;
}

.v5-searchbox input[type="text"]::placeholder {
  color: var(--muted);
}

.v5-searchbox .v5-btn {
  flex: 0 0 auto;
}

/* footer links area inside search page */
.v5-searchfoot {
  max-width: var(--maxw);
  width: 100%;
  margin-top: 1rem;
  padding: 0 1.25rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .9rem;
}

.v5-searchfoot a {
  color: var(--ink-light);
}
.v5-searchfoot a:hover {
  color: var(--accent);
}

/* responsive polish for very small screens */
@media (max-width: 480px) {
  .v5-searchpage { margin-top: 1rem; }
  .v5-searchbox { padding: .75rem; }
  .v5-searchbox input[type="text"] { flex-basis: 100%; }
}

/* Header search button → icon treatment */
.v5-search button {
  display: inline-grid;
  place-items: center;
  width: 38px;           /* compact, retro button cap */
  height: 34px;
  padding: 0;
}

/* White “old vibe” magnifier */
.v5-search .v5-ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;                  /* white icon */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* subtle ink-style edge for retro feel */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}
@media (min-width: 960px) {
  .v5-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between; /* keep edges aligned */
  }
  .v5-logo{ flex:0 0 auto; }
  .v5-nav{
    flex:1 1 auto;
    justify-content:center;
    min-width:0;          /* prevents pushing items */
    overflow:hidden;      /* avoids tiny horizontal shifts */
  }
  .v5-search{
    flex:0 0 auto;
    margin-left:auto;     /* pin to the right */
  }
}

/* tablet/mobile: stack neatly and keep search 100% width */
@media (max-width: 959px) {
  .v5-header__inner{
    flex-direction:column;
    align-items:stretch;
    gap:0.5rem;
  }
  .v5-logo{ align-self:center; }
  .v5-nav{
    justify-content:center;
    flex-wrap:wrap;
  }
  .v5-search{
    align-self:stretch;
    width:100%;
    max-width:var(--maxw);
  }
  .v5-search input{ width:100%; }
}

/* make the search button a fixed cap so it never looks off-center */
.v5-search button{
  display:inline-grid;
  place-items:center;
  height:34px;
  width:38px;
  padding:0;
}

/* if you used the CSS-only icon replacement (Option B), keep it centered */
.v5-search #qTopBtn{
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}

.v5-pager{
  max-width: var(--maxw);
  margin: 3rem auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;          /* vertical, horizontal */
  flex-wrap: wrap;            /* wrap only when needed */
  text-align: center;
  font-family: var(--font-mono);
}

.v5-pager .v5-btn{
  flex: 0 0 auto;             /* don't stretch */
  min-width: 120px;           /* keeps buttons same width */
  border-radius: 10px;        /* softer retro pill */
}

.v5-pills{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.v5-pill{
  display: inline-block;
  width: 34px; height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fffdf9;
  color: var(--ink);
  transition: .2s;
  box-shadow: var(--shadow);
}

.v5-pill.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.v5-pill:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* tiny screens: keep order, just give a bit more breathing room */
@media (max-width: 480px){
  .v5-pager{ gap: .5rem .75rem; }
  .v5-pager .v5-btn{ min-width: 110px; }
}