/*
Theme Name: CVWW
Theme URI: https://example.org/
Author: CVWW Organizing Committee
Description: A theme for the Computer Vision Winter Workshop. Content is edited in Appearance > Customize; news items are regular posts.
Version: 3.9
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cvww
*/

/* ==========================================================================
   Design tokens
   Cold winter-lake palette. Change these ten values to re-theme the site.
   ========================================================================== */

:root {
  --ink:         #14283C;
  --ink-soft:    #4C6076;
  --paper:       #EEF2F5;
  --paper-dim:   #DDE6EC;
  --accent:      #1F5C8B;
  --accent-deep: #16456A;
  --brass:       #9A7736;
  --teal:        #2E7B7E;
  --line:        #C3D2DD;
  --on-ink-link: #8FB8D6;
  --on-ink-mute: #8FA3B5;

  --font-display: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure: 68ch;
  --radius: 3px;
  /* One source of truth for the page gutter. The mobile nav panel and
     anything else reaching to the screen edge references this, so they
     can never drift out of sync with .wrap. */
  --gutter: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Column layout so the footer sits at the bottom even when a page has
     very little content. 100dvh accounts for mobile browser chrome. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* rem, not px, so the site respects a visitor's browser text-size
     setting instead of overriding it. 1.0625rem == 17px by default. */
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter, 28px); }

@media (max-width: 560px) {
  :root { --gutter: 18px; }
}

/* Nothing should ever make the page scroll horizontally. */
html, body { max-width: 100%; overflow-x: clip; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

img { max-width: 100%; height: auto; }

#main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; max-width: var(--measure); }
body, p, li, td, h1, h2, h3, h4 { overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.header-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}

.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.wordmark-mark { color: var(--accent); display: inline-flex; }
.wordmark-logo { max-height: 40px; width: auto; display: block; flex-shrink: 0; }
.wordmark-text { white-space: nowrap; }

/* The header must never be wider than the screen. Below the desktop
   breakpoint the title is allowed to wrap and shrink instead of forcing
   the whole page to scroll sideways. */
@media (max-width: 860px) {
  .wordmark { min-width: 0; font-size: 1.05rem; gap: 8px; }
  .wordmark-text { white-space: normal; overflow-wrap: break-word; }
  .wordmark-logo { max-height: 32px; }
  .header-row { gap: 12px; padding-top: 8px; padding-bottom: 8px; }
}

/* On very narrow screens, show the logo only and hide the text */
@media (max-width: 420px) {
  .wordmark-text { display: none; }
}

.primary-nav ul {
  list-style: none; display: flex; gap: 0;
  margin: 0; padding: 0;
}
.primary-nav > ul { align-items: stretch; min-height: 64px; }
.primary-nav > ul > li { position: relative; display: flex; }

/* Top-level links fill the header's full height. This removes the gap
   between the item and its dropdown, which is what made the menu close
   while the cursor was moving towards it. */
.primary-nav > ul > li > a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--ink); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
}
.primary-nav a {
  display: block; padding: 10px 12px;
  color: var(--ink); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
  border-radius: var(--radius);
}
.primary-nav a:hover { color: var(--accent); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
  color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px;
}

.primary-nav > ul > li:last-child .sub-menu,
.primary-nav > ul > li:nth-last-child(2) .sub-menu { left: auto; right: 0; }

.primary-nav .sub-menu {
  list-style: none;
  position: absolute; top: 100%; left: 0;
  min-width: 230px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  margin: 0;
  box-shadow: 0 8px 20px rgba(20,40,60,0.12);
  display: flex;
  flex-direction: column;
  /* Hidden with visibility rather than display, so the delay below can
     give you a moment to reach the submenu without it vanishing. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s .25s;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .12s ease, transform .12s ease, visibility 0s 0s;
}
.primary-nav .sub-menu a { padding: 10px 12px; white-space: nowrap; }
.primary-nav .sub-menu a:hover { background: var(--paper-dim); color: var(--accent); }

.nav-toggle {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: none; padding: 8px; cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }

.hero-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 48px; align-items: center;
}

.hero-eyebrow { color: var(--accent); font-weight: 600; margin-bottom: 14px; }
.hero h1 { margin-bottom: 18px; }
.hero .meta { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 30px; }
.hero .meta strong { color: var(--ink); font-weight: 600; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600; text-decoration: none; font-size: 0.98rem;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-deep); color: var(--paper); }
.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.hero-art {
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, #CFDDE8 0%, #9FBAD0 38%, #5D89AC 58%, #1F4260 100%);
  position: relative;
}
.hero-art svg,
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 64px 0; border-bottom: 1px solid var(--line); }
.section-dim { background: var(--paper-dim); }
.section-head { margin-bottom: 34px; max-width: 640px; }
.section-head p { color: var(--ink-soft); }

.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
}

/* News */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: grid; grid-template-columns: 130px 1fr; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-date { color: var(--brass); font-weight: 600; font-size: 0.92rem; padding-top: 2px; }

.news-empty { color: var(--ink-soft); }

/* Dates timeline */
.timeline {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--brass); margin-top: 8px;
}
.timeline-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 20px 0 18px;
  border-left: 2px solid var(--brass);
  position: relative;
}
.timeline-step:first-child { border-left: none; padding-left: 0; }
/* WordPress turns newlines in the editor into <br>. Ignore them here so
   the gap above is the only thing controlling spacing. */
.timeline-step br { display: none; }
.timeline-step::before {
  content: ''; position: absolute; top: -7px; left: -6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--brass);
}
.timeline-step:first-child::before { left: -5px; }
.timeline-step .step-date { font-weight: 600; color: var(--accent); }
.timeline-step .step-label { color: var(--ink-soft); font-size: 0.95rem; }

/* Topics */
.topics { columns: 2; column-gap: 40px; list-style: none; padding: 0; margin: 0; }
.topics li { padding: 7px 0; border-top: 1px solid var(--line); break-inside: avoid; }

/* Keynote */
.keynote-card { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: start; }
.keynote-portrait {
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--paper-dim); border: 1px solid var(--line);
  object-fit: cover;
}
.keynote-card .name { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 2px; }
.keynote-card .affil { color: var(--ink-soft); margin-bottom: 14px; }

/* Venue */
.venue-address { font-style: normal; color: var(--ink-soft); margin-bottom: 18px; }
.venue-address strong { color: var(--ink); display: block; font-size: 1.1rem; margin-bottom: 4px; }

/* ==========================================================================
   Page + post content
   ========================================================================== */

.page-hero { padding: 48px 0 40px; border-bottom: 1px solid var(--line); }
.page-hero p { color: var(--ink-soft); margin-top: 10px; }

.entry-content { padding-top: 48px; padding-bottom: 72px; }

/* Text pages read better in a narrower column than the full page width.
   Everything is constrained to the measure; tables and images are allowed
   to run wider because they need the room. */
.entry-content > * { max-width: var(--measure); }
.entry-content > table,
.entry-content > figure,
.entry-content > .wp-block-table,
.entry-content > .wp-block-image { max-width: 100%; }

.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content p { margin: 0 0 1.15em; }

/* Generous space above a heading, tight below it, so each heading groups
   with the text it introduces rather than floating between blocks. */
.entry-content h2 { margin: 2em 0 0.5em; }
.entry-content h3 { margin: 1.7em 0 0.4em; }
.entry-content h4 { margin: 1.5em 0 0.35em; font-size: 1.05rem; }

.entry-content ul, .entry-content ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.entry-content li { margin-bottom: 7px; }
.entry-content li:last-child { margin-bottom: 0; }
.entry-content li > ul, .entry-content li > ol { margin: 7px 0 0; }

.entry-content hr {
  border: none; border-top: 1px solid var(--line);
  margin: 2.5em 0; max-width: var(--measure);
}

/* Tables scroll inside their own box rather than widening the page. */
.entry-content table { border-collapse: collapse; width: 100%; margin: 1.6em 0; }
.entry-content .wp-block-table { overflow-x: auto; margin: 1.6em 0; }
.entry-content th, .entry-content td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.entry-content thead th { border-bottom: 2px solid var(--line); font-weight: 600; }

.entry-content blockquote {
  border-left: 3px solid var(--brass);
  margin: 1.8em 0; padding: 4px 0 4px 22px; color: var(--ink-soft);
  border-radius: 0; font-style: normal;
}

.entry-content img { border-radius: var(--radius); }
.entry-content figure { margin: 1.8em 0; }
.entry-content .wp-caption-text,
.entry-content figcaption {
  color: var(--ink-soft); font-size: 0.9rem; margin-top: 8px;
}

.entry-content code {
  background: var(--paper-dim); padding: 2px 6px;
  border-radius: 3px; font-size: 0.9em;
}
.entry-content pre {
  background: var(--paper-dim); padding: 16px 18px;
  border-radius: var(--radius); overflow-x: auto; max-width: 100%;
}
.entry-content pre code { background: none; padding: 0; }

/* A page's first paragraph reads as a short intro. */
.entry-content > p:first-child { font-size: 1.1rem; color: var(--ink-soft); }

.post-meta { color: var(--brass); font-weight: 600; font-size: 0.92rem; }

.back-link { display: inline-block; margin-top: 32px; }


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--ink); color: var(--paper); padding: 52px 0 0; }
.site-footer h2 { color: var(--paper); font-size: 1.2rem; }
.site-footer a { color: var(--on-ink-link); }
.footer-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(238,242,245,0.18);
}
.footer-orgs-label { color: var(--on-ink-mute); margin-bottom: 10px; font-size: 0.9rem; }
.footer-logos { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.footer-logos img { max-height: 52px; width: auto; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px; padding-bottom: 18px;
  font-size: 0.88rem; color: var(--on-ink-mute);
}
.footer-bottom .to-top { color: var(--on-ink-mute); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .hero-grid, .two-col, .keynote-card { grid-template-columns: 1fr; }
  .hero-art { order: -1; aspect-ratio: 16/9; }
  .timeline { grid-template-columns: 1fr; border-top: none; }
  .timeline-step,
  .timeline-step:first-child {
    border-left: 2px solid var(--brass);
    padding: 14px 0 0 18px;
    gap: 2px;
  }
  .timeline-step:last-child { padding-bottom: 14px; }
  .timeline-step::before,
  .timeline-step:first-child::before { top: 18px; left: -6px; }
  .topics { columns: 1; }
  .footer-row { grid-template-columns: 1fr; }
  .keynote-portrait { width: 120px; height: 120px; }
}

@media (max-width: 860px) {
  .header-row { position: relative; }

  .primary-nav {
    /* The header row is the positioned ancestor, and its padding box edge
       already sits at the viewport edge — so 0 spans the full width. A
       negative offset here pushes the panel off-screen and swallows the
       links' left padding. */
    position: absolute; top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(20,40,60,0.10);
    display: none;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
  .primary-nav.is-open { display: block; }

  .primary-nav ul { flex-direction: column; gap: 0; padding: 0; }
  .primary-nav > ul { min-height: 0; align-items: stretch; }
  .primary-nav > ul > li { display: block; }

  /* Full-width rows with a 48px minimum height: comfortably tappable,
     and the whole row is the target rather than just the words. */
  .primary-nav li { width: 100%; }
  /* One rule for every row in the mobile menu, so nothing further up the
     stylesheet can win and leave an item flush against the edge. */
  .primary-nav a,
  .primary-nav > ul > li > a,
  .primary-nav .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: var(--gutter, 28px);
    padding-left: var(--gutter, 28px);
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    line-height: 1.3;
  }

  /* Top-level items sit slightly heavier than their children. The
     repeated class raises specificity above every desktop rule. */
  .primary-nav.primary-nav > ul > li > a {
    font-weight: 600;
    padding-left: var(--gutter, 28px);
    padding-right: var(--gutter, 28px);
  }
  .primary-nav > ul > li:last-child > a { border-bottom: none; }
  .primary-nav a:active { background: var(--paper-dim); }

  /* Submenus are always visible on mobile. Tapping a parent to reveal
     children is easy to get wrong on touch, so we just show everything. */
  .primary-nav .sub-menu {
    position: static;
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    background: var(--paper-dim);
  }
  .primary-nav .sub-menu a {
    padding-left: calc(var(--gutter, 28px) + 20px);
    font-weight: 400;
    font-size: 0.95rem;
    min-height: 46px;
  }

  .nav-toggle {
    display: flex;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }
  .nav-toggle span { transition: transform .18s ease, opacity .18s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .news-list li { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Home page written as page content
   The block editor wraps pasted HTML, so sections need to break out to
   full width. These rules let .hero and .section work inside a page.
   ========================================================================== */

.home-content > * { margin: 0; }
.home-content .hero,
.home-content .section { width: 100%; }

/* Block editor alignment support */
.alignwide { max-width: 1120px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }

/* Inside the editor, give sections a visible edge so they're easy to grab */
.block-editor-block-list__layout .section,
.block-editor-block-list__layout .hero { max-width: none; }