/*
Theme Name: Study Hall
Template: organic-farm
Description: Design layer for tvgtaproom.com.
Version: 1.0
*/

/* tvgtaproom.com — refero "Quizlet" language (child theme "Study Hall")
   Tokens taken from styles.refero.design/style/528eb1d4: iris #4255ff on a
   chalk canvas, white cards, lilac wash for highlights, 8px base spacing,
   pill primary buttons, geometric sans, one shadow token — never stacked.
   Nothing is imported from Quizlet; only the visual language is reproduced.
   Parent: organic-farm (bootstrap grid, .postbox cards). */

:root {
  --q-iris:    #4255ff;
  --q-iris-dk: #3444d9;
  --q-ink:     #282e3e;
  --q-body:    #2e3856;
  --q-muted:   #586380;   /* 5.9:1 on chalk — AA */
  --q-canvas:  #f6f7fb;
  --q-surface: #ffffff;
  --q-lilac:   #edefff;
  --q-border:  #d9dde8;
  --q-shadow-m: rgba(40, 46, 62, 0.1) 0 4px 16px 0;
  --q-shadow-s: rgba(40, 46, 62, 0.1) 0 2px 4px 0;
  --q-geo: "Avenir Next", "Century Gothic", Futura, "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --q-measure: 70ch;
}

body {
  background: var(--q-canvas);
  color: var(--q-body);
  font-family: var(--q-geo);
  font-size: 16px;
  line-height: 1.63;
}

/* ---------- header ---------- */
.top_header,
.site-header,
header.site-header {
  background: var(--q-surface);
  box-shadow: var(--q-shadow-m);
  border-bottom: 0;
}
.site-title,
.site-title a {
  font-family: var(--q-geo);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--q-ink);
}
.site-description { color: var(--q-muted); font-size: .9rem; line-height: 1.5; }

/* ---------- nav: pill hover, iris active ---------- */
.gb_nav_menu ul li a,
#menu-navigation li a,
.mobile_nav li a {
  font-family: var(--q-geo);
  font-size: .95rem;
  font-weight: 600;
  color: var(--q-ink);
  padding: .5rem 1rem;
  border-radius: 200px;
  line-height: 1.5;
  transition: background .15s, color .15s;
}
.gb_nav_menu ul li a:hover,
#menu-navigation li a:hover { background: var(--q-lilac); color: var(--q-iris); }
.gb_nav_menu ul li.current-menu-item > a,
#menu-navigation li.current-menu-item > a { background: var(--q-iris); color: #fff; }

/* ---------- page/section titles ---------- */
.page-title,
.page-header .page-title,
h1.page-title,
h2.page-title {
  font-family: var(--q-geo);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--q-ink);
  letter-spacing: -0.01em;
}

/* ---------- story cards ---------- */
.postbox {
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: 8px;
  box-shadow: none;
  padding: 16px;
  transition: box-shadow .15s ease;
  overflow: hidden;
}
.postbox:hover { box-shadow: var(--q-shadow-m); }
.postbox .box-content img,
.wrap_figure img {
  border-radius: 8px;
  display: block;
  width: 100%;
  height: auto;
}
.postbox h3 {
  font-family: var(--q-geo);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 16px 0 8px;
  text-align: left;
}
.postbox h3 a { color: var(--q-ink); }
.postbox h3 a:hover { color: var(--q-iris); }
.postbox .overlay,
.postbox .box-content { text-align: left; }
.postbox .date-box,
.postbox .entry-author,
.postbox .entry-comments,
.postbox .date-box span {
  font-size: .75rem;
  font-weight: 600;
  color: var(--q-muted);
  line-height: 1.4;
}
.postbox p {
  font-size: 1rem;
  line-height: 1.63;
  color: var(--q-body);
  max-width: var(--q-measure);
  margin: 0 0 16px;
}

/* pill primary button — the signature shape */
.quote-btn,
.quote-btn a,
a.quote-btn,
.postbox .btn,
.more-link,
a.more-link {
  display: inline-block;
  background: var(--q-iris);
  color: #fff;
  font-family: var(--q-geo);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 10px 20px;
  border: 0;
  border-radius: 200px;
  box-shadow: var(--q-shadow-s);
  text-decoration: none;
  transition: background .15s;
}
.quote-btn:hover,
a.quote-btn:hover,
a.more-link:hover { background: var(--q-iris-dk); color: #fff; }

/* ---------- single post ---------- */
.single .postbox,
.single .site-main,
.single .content-area {
  background: var(--q-surface);
  border-radius: 8px;
}
.single .entry-title,
.single h1.entry-title,
.single .page-title {
  font-family: var(--q-geo);
  font-size: clamp(1.75rem, 3.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--q-ink);
  max-width: 26ch;
}

.entry-content {
  font-size: 1rem;
  line-height: 1.63;
  color: var(--q-body);
  max-width: var(--q-measure);
}
.entry-content > * { max-width: var(--q-measure); }
.entry-content p { margin: 0 0 24px; }
.entry-content h2 {
  font-family: var(--q-geo);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.33;
  color: var(--q-ink);
  margin: 40px 0 16px;
}
.entry-content h3 {
  font-family: var(--q-geo);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--q-ink);
  margin: 32px 0 12px;
}
.entry-content h2 + p,
.entry-content h3 + p { margin-top: 0; }
.entry-content ul,
.entry-content ol { margin: 0 0 24px 24px; }
.entry-content li { margin-bottom: 8px; line-height: 1.63; }
.entry-content a { color: var(--q-iris); text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 32px 0;
}
.entry-content blockquote {
  background: var(--q-lilac);
  border: 0;
  border-radius: 8px;
  margin: 32px 0;
  padding: 20px 24px;
  color: var(--q-ink);
  font-style: normal;
  line-height: 1.6;
}
.entry-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 32px 0;
  font-size: .95rem;
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: 8px;
  overflow: hidden;
}
.entry-content table th {
  background: var(--q-lilac);
  color: var(--q-ink);
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  line-height: 1.4;
  border-bottom: 1px solid var(--q-border);
}
.entry-content table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--q-border);
  line-height: 1.5;
}
.entry-content table tr:last-child td { border-bottom: 0; }

/* ---------- author box: lilac panel, rounded avatar ---------- */
.pbn-author {
  display: flex;
  gap: 16px;
  align-items: center;
  max-width: var(--q-measure);
  margin: 40px 0 0;
  padding: 24px;
  background: var(--q-lilac);
  border-radius: 24px;
}
.pbn-author__avatar img {
  width: 72px;
  height: 72px;
  border-radius: 200px;
  display: block;
  margin: 0;
  border: 3px solid var(--q-surface);
}
.pbn-author__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--q-ink);
  line-height: 1.4;
  margin: 0 0 2px;
}
.pbn-author__role {
  font-size: .78rem;
  font-weight: 600;
  color: var(--q-iris);
  line-height: 1.4;
  margin: 0 0 8px;
}
.pbn-author__bio {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--q-body);
  margin: 0;
}

/* ---------- sidebar ---------- */
.widget,
#secondary .widget,
.sidebar .widget {
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.widget-title,
.widget h2,
.widget .wp-block-group h2,
.widget label.wp-block-search__label {
  font-family: var(--q-geo);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--q-ink);
  background: transparent;
  margin: 0 0 16px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--q-border);
}
.widget a { color: var(--q-body); font-size: .95rem; line-height: 1.55; }
.widget a:hover { color: var(--q-iris); }
.widget li { padding: 6px 0; }
.widget input[type="search"],
.widget .wp-block-search__input {
  border: 1px solid var(--q-border);
  border-radius: 4px;
  background: var(--q-canvas);
  padding: 8px 12px;
  color: var(--q-ink);
  font-family: var(--q-geo);
}
.widget .wp-block-search__button,
.widget input[type="submit"],
.search-submit {
  background: var(--q-iris);
  color: #fff;
  border: 0;
  border-radius: 200px;
  font-family: var(--q-geo);
  font-weight: 600;
  font-size: .88rem;
  padding: 8px 20px;
}

/* ---------- footer ---------- */
.site-footer { background: var(--q-surface); border-top: 1px solid var(--q-border); }
.pbn-colophon {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  font-family: var(--q-geo);
  color: var(--q-muted);
  font-size: .92rem;
  line-height: 1.63;
}
.pbn-colophon__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.pbn-colophon h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--q-ink);
  margin: 0 0 16px;
  line-height: 1.4;
}
.pbn-colophon ul { list-style: none; margin: 0; padding: 0; }
.pbn-colophon li { margin-bottom: 8px; }
.pbn-colophon a { color: var(--q-body); text-decoration: none; }
.pbn-colophon a:hover { color: var(--q-iris); text-decoration: underline; }
.pbn-colophon p { margin: 0 0 12px; max-width: 48ch; }
.pbn-colophon__base {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--q-border);
  font-size: .85rem;
  color: var(--q-muted);
}

a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 2px solid var(--q-iris); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

@media (max-width: 900px) {
  .pbn-colophon__cols { grid-template-columns: 1fr; gap: 24px; }
  .pbn-author { flex-direction: column; align-items: flex-start; padding: 20px; border-radius: 16px; }
}

/* ---------- v2: audit fixes on the live page ---------- */
/* organic-farm's bootstrap container is 15px wider than its row on desktop. */
#page, .site, .top_header, .menu_header, .wrap_figure { overflow-x: hidden; }

/* WP's own comment placeholder ships #7a7a7a — 4.29:1, just under AA. */
.no-comments,
.wp-block-latest-comments,
.wp-block-latest-comments__no-comments { color: var(--q-muted); }

/* Buttons inherit `line-height: normal` (~1.0) from the UA sheet. */
button, input[type="submit"], .wp-block-search__button,
.wp-element-button { line-height: 1.5; }
body, p, li, td, th, span, div, a, figcaption, label, input, select, textarea { line-height: 1.63; }
h1, h2, h3, h4, h5, h6 { line-height: 1.33; }
.screen-reader-text, .skip-link { line-height: 1.5; }

/* v3: organic-farm's Read More is an <a> whose own colour matched the pill fill. */
a.more-link, .more-link, .quote-btn, a.quote-btn { color: #ffffff; }
a.more-link:visited { color: #ffffff; }
body #post_section, body section#post_section, body .content_area, body #page { overflow-x: hidden; }


/* ---------------------------------------------------------------------------
   Stopgap before the from-scratch theme (plan-v3): the three defects that must
   not sit on a live site while the rebuild is decided.
   --------------------------------------------------------------------------- */
/* colormag ships html{font-size:10px}; every rem below was landing at 62.5%. */
html { font-size: 16px; }

/* The parent theme renders its own author card next to ours. */
.author-info, .author-bio, .author-description, .author-avatar,
.wp-post-author-meta, .entry-author-box, .cm-author-box, .about-author,
#author-info, .post-author-info { display: none; }

/* Flex was squashing a square avatar to 31x64. */
.pbn-author__avatar { flex: 0 0 auto; width: auto; }
.pbn-author__avatar img { width: 64px; height: 64px; object-fit: cover; max-width: none; }

/* Nothing under 14px on a reading site. */
body, p, li, td, th, a, span, div, figcaption { font-size: inherit; }
.entry-meta, .entry-meta a, .posted-on, .posted-on a, .cm-entry-header-meta,
.cm-entry-header-meta a, .cm-below-entry-meta, .cm-below-entry-meta a,
.byline, .byline a, .nav-subtitle, time, .date-box, .date-box span,
.pbn-author__role, .pbn-colophon__base, .widget label,
.wp-block-search__label, .cat-links, .cat-links a { font-size: 14px; }
.pbn-author__name { font-size: 16px; }
.pbn-author__bio { font-size: 15px; }
.postbox .date-box, .postbox .entry-author, .postbox .entry-comments { font-size: 14px; }
button, input, select, textarea, .wp-block-search__button { font-size: 15px; }
.cm-post-categories a, .morenews-categories, a.morenews-categories { font-size: 12.5px; }

/* Second pass on the 14px floor: chips, widget titles and footer headings were
   still landing at 12-12.8px. */
.cat-links, .cat-links a, .cm-post-categories a, .morenews-categories,
a.morenews-categories, .postbox .date-box, .postbox .date-box span,
span.nav-subtitle, .nav-links .nav-subtitle, label.wp-block-search__label,
.widget label, h2.wp-block-heading, .widget .wp-block-heading, .widget h2,
.widget-title, .cm-widget-title, .cm-widget-title span,
.pbn-colophon h3, .pbn-colophon a, .pbn-colophon li, .pbn-colophon p,
.pbn-colophon__base, .entry-meta, .entry-meta a, .posted-on, .posted-on a,
.cm-entry-header-meta, .cm-entry-header-meta a, .cm-below-entry-meta,
.cm-below-entry-meta a, time, .byline, .byline a { font-size: 14px; }

/* Final stopgap pass: these few selectors are outranked by the parent's own
   sizing, so the floor is enforced explicitly. The from-scratch theme removes
   the need for this entirely. */
.cat-links a, .cat-links, a.morenews-categories, .morenews-categories,
.category-color-1, label.wp-block-search__label, .wp-block-search__button,
.item-metadata, .posts-date, span.item-metadata, .entry-meta a, .author a,
a.url.fn.n, .pbn-author__role, .cm-post-categories a { font-size: 14px !important; }

/* charliewellbeing: the author card had no inner padding. */
.pbn-author { padding: 1.25rem; box-sizing: border-box; }