/*
Theme Name: ordflyer
Theme URI: https://ordflyer.com
Author: ordflyer.com
Description: Block theme for the ordflyer.com citizen campaign. Fixed navy sidebar with navigation and key figures; white content column; Chicago-star markers.
Version: 1.0.5
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ordflyer
*/

/* ---------- Layout: sidebar + main ---------- */
.of-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100vh; max-width: none !important; }
.of-sidebar { background: var(--wp--preset--color--navy); color: #fff; padding: 2.25rem 2rem; position: sticky; top: 0; height: 100vh; overflow: auto; }
.of-main { min-width: 0; }
@media (max-width: 900px) {
  .of-layout { grid-template-columns: 1fr; }
  .of-sidebar { position: static; height: auto; padding: 1.25rem 1.25rem 1rem; }
  .of-sidebar .of-stats { display: none; }
}

/* ---------- Sidebar ---------- */
.of-sidebar a { color: inherit; text-decoration: none; }
.of-brand { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: .01em; }
.of-brand small { display: block; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: .8rem; color: var(--wp--preset--color--sidebar-muted); margin-top: .4rem; }
.of-sidebar .wp-block-navigation { margin-top: 2.5rem; }
.of-sidebar .wp-block-navigation ul { display: flex; flex-direction: column; gap: .35rem; }
.of-sidebar .wp-block-navigation-item a { display: block; padding: .35rem 0 .35rem .75rem; border-left: 3px solid transparent; color: var(--wp--preset--color--sidebar-muted); font-size: 1.05rem; }
.of-sidebar .wp-block-navigation-item a:hover,
.of-sidebar .wp-block-navigation-item.current-menu-item a { color: #fff; border-left-color: var(--wp--preset--color--red); }
@media (max-width: 900px) {
  .of-sidebar .wp-block-navigation { margin-top: 1rem; }
  .of-sidebar .wp-block-navigation ul { flex-direction: row; flex-wrap: wrap; gap: .25rem 1rem; }
  .of-sidebar .wp-block-navigation-item a { padding: .25rem 0; border-left: 0; border-bottom: 2px solid transparent; font-size: .95rem; }
  .of-sidebar .wp-block-navigation-item.current-menu-item a { border-bottom-color: var(--wp--preset--color--red); }
}
.of-stats { margin-top: 3rem; }
.of-stat { border-top: 1px solid var(--wp--preset--color--sidebar-rule); padding: 1.25rem 0; }
.of-stat b { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 3.6rem; line-height: 1; color: var(--wp--preset--color--sky); }
.of-stat.is-red b { color: var(--wp--preset--color--red); }
.of-stat span { font-size: .85rem; color: var(--wp--preset--color--sidebar-muted); }

/* ---------- Main column ---------- */
.of-main > * { padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); }
.of-hero { padding-top: 3.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--wp--preset--color--rule); }
.of-stars { color: var(--wp--preset--color--red); letter-spacing: .5em; font-size: 1.15rem; margin-bottom: .75rem; }
.of-hero h1 { max-width: 16em; }
.of-lede { font-size: 1.2rem; color: var(--wp--preset--color--soft); max-width: 40em; }
.of-routebox { background: var(--wp--preset--color--wash); border-bottom: 1px solid var(--wp--preset--color--rule); padding-top: 2.25rem; padding-bottom: 2.25rem; }
.of-routebox svg { width: 100%; max-width: 760px; height: auto; display: block; }
.of-section { padding-top: 3rem; padding-bottom: 1rem; }
.of-section h2 { margin-top: 0; }
.entry-content, .of-page { padding-top: 3rem; padding-bottom: 3rem; }
.of-main .wp-block-post-title { margin-top: 0; }

/* ---------- Star list (ten arguments etc.) ---------- */
.of-starlist { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.of-starlist li { display: block; position: relative; padding: 1.1rem 0 1.1rem 2.75rem; border-top: 1px solid var(--wp--preset--color--rule); max-width: none; }
.of-starlist li::before { content: "\2726"; color: var(--wp--preset--color--red); font-size: 1.35rem; line-height: 1.2; position: absolute; left: .25rem; top: 1.05rem; }
.of-starlist li > *, .of-starlist strong, .of-starlist p { max-width: none; }
.of-starlist strong { display: block; font-size: 1.2rem; color: var(--wp--preset--color--navy); margin-bottom: .2rem; }
.of-starlist p { margin: 0; color: var(--wp--preset--color--soft); }

/* ---------- Callout (political relationships, notes) ---------- */
.of-callout { border-left: 4px solid var(--wp--preset--color--sky); background: var(--wp--preset--color--wash); padding: 1.25rem 1.5rem; margin: 2rem 0; }
.of-callout h3 { margin-top: 0; }
.of-callout p:last-child { margin-bottom: 0; }

/* ---------- Compare (Flyer vs alternatives) ---------- */
.of-compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--wp--preset--color--rule); margin: 1.5rem 0; }
.of-compare > div { padding: 1.5rem; }
.of-compare > div + div { border-left: 1px solid var(--wp--preset--color--rule); background: var(--wp--preset--color--wash); }
.of-compare h3 { margin-top: 0; }
@media (max-width: 720px) { .of-compare { grid-template-columns: 1fr; } .of-compare > div + div { border-left: 0; border-top: 1px solid var(--wp--preset--color--rule); } }

/* ---------- Venue cards (Be heard) ---------- */
.of-venue { border-top: 2px solid var(--wp--preset--color--navy); padding: 1.25rem 0; }
.of-venue h3 { margin: 0 0 .25rem; }
.of-venue .of-when { color: var(--wp--preset--color--steel); font-size: .95rem; margin: 0 0 .5rem; }

/* ---------- CTA band ---------- */
.of-cta { border: 3px solid var(--wp--preset--color--sky); padding: 1.75rem 2rem; margin: 2rem clamp(1.25rem, 5vw, 4rem) 3rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.of-cta h2 { margin: 0; font-size: 1.9rem; }

/* ---------- Buttons ---------- */
.wp-block-button__link { border-radius: 0; font-weight: 700; }
.is-style-outline .wp-block-button__link { border: 2px solid var(--wp--preset--color--sky); color: var(--wp--preset--color--navy); }

/* ---------- Footnotes ---------- */
.of-footnotes { font-size: .9rem; color: var(--wp--preset--color--soft); border-top: 1px solid var(--wp--preset--color--rule); padding: 1rem 0 0 1.5rem; margin: 2.5rem 0 0; }
.of-footnotes li { margin-bottom: .35rem; }
.of-footnotes li:target, .of-footnotes li.is-targeted, sup.fn a.is-targeted { background: var(--wp--preset--color--wash); }
.of-fn-back { text-decoration: none; margin-left: .25rem; }
.wp-block-footnotes { font-size: .9rem; color: var(--wp--preset--color--soft); border-top: 1px solid var(--wp--preset--color--rule); padding-top: 1rem; margin-top: 2.5rem; }
sup.fn a { color: var(--wp--preset--color--cyan); text-decoration: none; font-weight: 700; }
sup.fn .of-fn-sep { color: var(--wp--preset--color--cyan); font-weight: 700; }

/* ---------- Posts list ---------- */
.of-postcard { border-top: 1px solid var(--wp--preset--color--rule); padding: 1.25rem 0; }
.of-postcard .wp-block-post-date { color: var(--wp--preset--color--steel); font-size: .9rem; }
.of-postcard .wp-block-post-title { font-size: 1.35rem; margin: .2rem 0 .4rem; }

/* ---------- Footer ---------- */
.of-main .of-footer, .of-main .of-footer p { font-size: .8rem; font-style: italic; color: var(--wp--preset--color--soft); max-width: none; box-sizing: border-box; }
.of-main .of-footer { border-top: 1px solid var(--wp--preset--color--rule); padding-top: 1.5rem; padding-bottom: 2rem; }
.of-footer > * { max-width: none; }
.of-sidebar .of-stat a { color: var(--wp--preset--color--sky); text-decoration: underline; }

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible { outline: 3px solid var(--wp--preset--color--sky); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }