/* PorchOS "OS refresh" layer, v1.1 (MIG-WO-2, 2026-11-12; v1.1 MIG-WO-2b: medium section rhythm, header rule). Shared by every Total-to-PorchOS Level 1 facelift.
   Reads tokens only (tokens.css of the site theme: --color-*, --font-*, --fs-*, --space-*, --radius,
   --content-width, --text-width, --porch-control-*). No brand literal in this file. A site adds its own
   sections in site.css; it never edits this file in place. Source: docs/total-to-porchos/site/shared/os-refresh.css.
   Covers: type scale, reading width, one container, block content flow, buttons (primary + secondary),
   form controls (one shared set, also Gravity Forms and Easy Digital Downloads markup), header, mobile menu,
   footer, focus, reduced motion, and one optional reveal. FACELIFT-GUIDE.md sections 4, 6 and 7. */

/* ---- Base type -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-variant-emoji: text;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-2);
  background: var(--color-surface-1);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.h1, .h2, .h3 {
  margin: 0;
  color: var(--color-text-1);
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  line-height: var(--lh-heading);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1, .h1 { font-size: var(--fs-display); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lead); }

p, ul, ol, blockquote, figure { margin: 0; }
p { text-wrap: pretty; }

a {
  color: var(--color-link);
  text-decoration: var(--link-decoration);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover { color: var(--color-link-hover); }

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

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

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -10rem;
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface-1);
  color: var(--color-text-1);
}

.skip-link:focus { top: var(--space-xs); }

/* ---- Containers ------------------------------------------------------- */
.wrap {
  width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width)));
  margin-inline: auto;
}

.wrap--text { width: min(100% - 2 * var(--gutter), var(--text-width)); }

.section { padding-block: var(--section-pad); }
/* v1.1: a second rhythm step so sections do not all share one padding (FACELIFT-GUIDE 5.1). Falls back to --section-pad. */
.section--md { padding-block: var(--section-pad-md, var(--section-pad)); }

/* ---- Block content flow ----------------------------------------------- */
/* Page and post content: one rhythm. Full-width groups (alignfull) carry their own padding. */
.entry-content > :where(:not(.alignfull):not(.alignwide)) {
  width: min(100% - 2 * var(--gutter), var(--text-width));
  margin-inline: auto;
}

.entry-content > .alignwide {
  width: var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width)));
  margin-inline: auto;
}

.entry-content > .alignfull { width: 100%; }

/* Real specificity (one class) so the flow beats "p { margin: 0 }". */
.entry-content > * + *,
.wp-block-group > * + *,
.wp-block-column > * + *,
.wp-block-quote > * + * { margin-top: 1em; }
.entry-content > * + :is(h2, h3, h4),
.wp-block-group > * + :is(h2, h3, h4),
.wp-block-column > * + :is(h2, h3, h4) { margin-top: 1.6em; }
.entry-content > * + .alignfull,
.entry-content > .alignfull + * { margin-top: 0; }
.entry-content > .alignfull + :not(.alignfull),
.entry-content > :first-child:not(.alignfull) { margin-top: var(--section-pad); }
.entry-content > :last-child:not(.alignfull) { margin-bottom: var(--section-pad); }

/* Floated photos in a text column: they sit at the edge of the 760 px column and text wraps round them. */
.entry-content > .alignright,
.entry-content > .alignleft { width: auto; max-width: min(40%, 22rem); }
.entry-content > .alignright { float: right; margin: 0.35em max(var(--gutter), (100% - var(--text-width)) / 2) var(--space-sm) var(--space-md); }
.entry-content > .alignleft { float: left; margin: 0.35em var(--space-md) var(--space-sm) max(var(--gutter), (100% - var(--text-width)) / 2); }
.entry-content::after { content: ""; display: table; clear: both; }

.entry-content ul,
.entry-content ol { padding-left: 1.25em; }

.entry-content li + li { margin-top: 0.35em; }

.wp-block-image img,
.entry-content img { border-radius: var(--radius); }

.wp-block-image figcaption,
.wp-caption-text {
  margin-top: var(--space-xs);
  color: var(--color-text-3);
  font-size: var(--fs-small);
}

.alignleft { float: left; margin: 0.35em var(--space-md) var(--space-sm) 0; }
.alignright { float: right; margin: 0.35em 0 var(--space-sm) var(--space-md); }
.aligncenter { margin-inline: auto; }

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
}

.wp-block-column { flex: 1 1 0; min-width: 0; }

@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
  .alignleft, .alignright { float: none; margin: 0 0 var(--space-sm); }
}

.wp-block-quote {
  margin: 0;
  padding: 0 0 0 var(--space-md);
  border-left: 3px solid var(--color-accent);
}

.wp-block-quote cite {
  display: block;
  font-size: var(--fs-small);
  font-style: normal;
  font-weight: 600;
}

/* ---- Buttons: one primary, one secondary ------------------------------ */
.button,
.wp-block-button__link,
.wp-element-button,
input[type="submit"],
button[type="submit"],
.gform_button,
.edd-submit,
.edd-submit.button.blue,
#edd-purchase-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: 0.65rem var(--btn-pad-x);
  border: 2px solid var(--color-accent);
  border-radius: var(--btn-radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-transform);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.gform_button:hover,
.edd-submit:hover,
.edd-submit.button.blue:hover,
#edd-purchase-button:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.button--secondary,
.is-style-outline > .wp-block-button__link {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.button--secondary:hover,
.is-style-outline > .wp-block-button__link:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---- Form controls: one shared set (PORCH_RULES "Form controls match") -- */
input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="search"], [type="date"]),
select,
textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--porch-control-height);
  padding: 0.6rem var(--porch-control-pad-x);
  border: var(--porch-control-border);
  border-radius: var(--porch-control-radius);
  background-color: var(--porch-control-bg);
  color: var(--porch-control-color);
  font: var(--porch-control-font);
  letter-spacing: normal;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="search"], [type="date"]),
select { height: var(--porch-control-height); }

textarea { min-height: 9rem; resize: vertical; }

::placeholder { color: var(--porch-control-placeholder); opacity: 1; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: var(--select-chevron-size) var(--select-chevron-size), var(--select-chevron-size) var(--select-chevron-size);
  background-position:
    calc(100% - var(--field-padding-x) - 2 * var(--select-chevron-size)) center,
    calc(100% - var(--field-padding-x) - var(--select-chevron-size)) center;
  padding-right: calc(var(--field-padding-x) + 2 * var(--select-chevron-size) + var(--select-chevron-gap));
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0 0.5rem 0 0;
  accent-color: var(--color-focus);
  vertical-align: -0.15em;
}

label,
legend,
.gfield_label,
.gform-field-label--type-sub {
  color: var(--color-text-1);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Gravity Forms markup (public output classes only; no vendor file is touched). */
.gform_wrapper .gform_fields { display: grid; gap: var(--space-md); padding: 0; margin: 0; list-style: none; border: 0; }
.gform_wrapper fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.gform_wrapper .gfield_label { display: block; margin-bottom: 0.4rem; }
.gform_wrapper .ginput_complex { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.gform_wrapper .ginput_complex > span { flex: 1 1 12rem; display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.gform_wrapper .gform-field-label--type-sub { font-weight: 400; color: var(--color-text-3); }
.gform_wrapper .gfield_required { color: var(--color-error); margin-left: 0.15em; }
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox { display: grid; gap: 0.5rem; }
.gform_wrapper .gchoice { display: flex; align-items: center; }
.gform_wrapper .gchoice label { font-weight: 400; color: var(--color-text-2); font-size: var(--fs-body); }
.gform_wrapper .gform_footer { margin-top: var(--space-md); }
.gform_wrapper .gfield_description { font-size: var(--fs-small); color: var(--color-text-3); }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--color-error); }
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors,
.edd-alert-error,
.edd_errors {
  color: var(--color-error);
  font-size: var(--fs-small);
}
.gform_wrapper .gform_validation_errors,
.edd-alert-error {
  padding: var(--space-sm);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}
.gform_confirmation_message,
.edd-alert-success {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-success);
  border-left-width: 4px;
  border-radius: var(--radius);
  color: var(--color-text-1);
}
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container { display: none !important; }

/* Easy Digital Downloads forms (checkout, login, profile). EDD's own no-JS fallback button stays hidden when JS runs. */
.edd-js .edd-submit.edd-no-js,
body.edd-js input.edd-no-js.edd-submit { display: none; }
#edd_checkout_form_wrap input.edd-input,
#edd_checkout_form_wrap select.edd-select {
  height: var(--porch-control-height);
  padding: 0.6rem var(--porch-control-pad-x);
  font: var(--porch-control-font);
}
#edd_checkout_form_wrap select.edd-select {
  padding-right: calc(var(--field-padding-x) + 2 * var(--select-chevron-size) + var(--select-chevron-gap));
}
#edd_checkout_form_wrap fieldset,
#edd_login_form fieldset,
#edd_profile_editor_form fieldset {
  margin: 0 0 var(--space-lg);
  padding: 0;
  border: 0;
}
#edd_checkout_form_wrap legend,
#edd_login_form legend,
#edd_profile_editor_form legend {
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
}
#edd_checkout_form_wrap p,
#edd_login_form p,
#edd_profile_editor_form p { margin-bottom: var(--space-sm); }
#edd_checkout_form_wrap label,
#edd_login_form label,
#edd_profile_editor_form label { display: block; margin-bottom: 0.4rem; }
.edd-description { font-size: var(--fs-small); color: var(--color-text-3); }
#edd_checkout_cart,
.edd-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}
#edd_checkout_cart th,
#edd_checkout_cart td,
.edd-table th,
.edd-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

/* ---- Header ----------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--color-surface-3);
  color: var(--color-on-band);
  border-bottom: 1px solid var(--color-rule-on-band, transparent); /* v1.1: thin separator, LocalCan principle */
}

.site-header.is-overlay {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 5.5rem;
  padding-block: var(--space-sm);
}

.site-header__brand { flex: none; display: block; }
.site-header__brand img { width: auto; height: 4.5rem; }

.site-header__menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-nav ul,
.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.site-header__actions a {
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-transform);
  text-decoration: none;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); color: inherit; }

.site-header__actions { gap: var(--space-sm); }
.site-header__actions .button { min-height: 2.75rem; padding-inline: 1.1rem; }
.site-header__actions .button--text { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: 0.5rem; }
.site-header__actions .button--text:hover { color: var(--color-accent); }
.site-header .button--secondary { color: var(--color-on-band); }

.site-header__toggle {
  display: none;
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: 700 var(--fs-ui) / 1 var(--font-display);
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-transform);
  cursor: pointer;
}

.site-header__toggle svg { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; vertical-align: -0.25rem; }

@media (max-width: 1023px) {
  .js .site-header__toggle { display: inline-flex; align-items: center; }
  .site-header__brand img { height: 3.75rem; }
  .js .site-header__menu {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md) var(--gutter) var(--space-lg);
    background: var(--color-surface-3);
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--color-surface-3) 30%, transparent);
  }
  .js .site-header.is-open .site-header__menu { display: flex; }
  .site-header__inner { flex-wrap: wrap; }
  .site-header__menu { flex-wrap: wrap; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav a { display: block; padding-block: 0.75rem; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
  .js .site-header__actions { justify-content: flex-start; }
}

/* ---- Footer ----------------------------------------------------------- */
.site-footer { color: var(--color-text-2); }
.site-footer p { margin: 0; }
.site-footer__bar {
  padding-block: var(--space-sm);
  background: var(--color-band);
  color: var(--color-on-band);
  font-size: var(--fs-small);
  text-align: center;
}
.site-footer__bar a { color: inherit; }
.site-footer__bar p + p { margin-top: 0.25rem; }
.site-footer__credit span[aria-hidden] { color: var(--color-accent); }

/* ---- Post lists ------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-xl) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-grid--two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }
.post-header { display: grid; gap: var(--space-sm); }
.post-header__image { width: 100%; border-radius: var(--radius); margin-bottom: var(--space-sm); }
.entry-content--post > :first-child { margin-top: var(--space-xl); }
.post-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.post-card img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: var(--radius); }
.post-card h2, .post-card h3 { font-size: var(--fs-h3); }
.post-card h2 a, .post-card h3 a { color: var(--color-text-1); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--color-link); text-decoration: underline; }
.post-card__more { font-weight: 600; }
.post-card__more::after { content: " \2192\FE0E"; }
.post-meta { color: var(--color-text-3); font-size: var(--fs-small); }

/* ---- Optional reveal: one fade, 10 px rise, once. Content stays visible without JS. */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}