/*
Theme Name: VicReturn
Theme URI: https://gitea.hosting-cloud.net/dreamit/vr-wordpress
Author: DreamIT Host
Author URI: https://dreamithost.com.au
Description: Base block theme for the VicReturn concept demonstration. Carries the shared palette and typography used across the VicReturn demo family. This is an unofficial concept and is not operated or endorsed by VicReturn or CDS Vic.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vicreturn
*/

/*
 * Design tokens.
 *
 * theme.json already emits --wp--preset--* for the editor. These --vr-* aliases
 * are the names the plugins are written against, so a plugin never has to know
 * the WordPress preset naming and never hardcodes a hex value. Change a colour
 * once, in theme.json, and it flows through both.
 */
:root {
  --vr-navy: var(--wp--preset--color--navy, #052e5e);
  --vr-navy-deep: var(--wp--preset--color--navy-deep, #031d3d);
  --vr-blue: var(--wp--preset--color--blue, #0057b8);
  --vr-electric: var(--wp--preset--color--electric, #087de0);
  --vr-orange: var(--wp--preset--color--orange, #ff7a1a);
  --vr-orange-light: var(--wp--preset--color--orange-light, #ffb85c);
  --vr-pale: var(--wp--preset--color--pale, #d9f1fb);
  --vr-cream: var(--wp--preset--color--cream, #f7f5ed);
  --vr-ink: var(--wp--preset--color--ink, #102b42);
  --vr-muted: var(--wp--preset--color--muted, #60727a);

  /* Verdict colours. Not in the editor palette: they carry meaning rather than
     being an authoring choice, and both are paired with words wherever used. */
  --vr-success: #1b7f4b;
  --vr-success-bg: #e6f4ec;
  --vr-danger: #b3261e;
  --vr-danger-bg: #fbeae9;

  --vr-display: var(--wp--preset--font-family--display, 'Barlow Condensed', sans-serif);
  --vr-body: var(--wp--preset--font-family--body, 'Source Sans 3', sans-serif);

  --vr-radius: 3px;
  --vr-control-height: 52px;
  --vr-shell: min(1240px, calc(100% - 48px));
  --vr-shadow: 0 18px 40px rgba(5, 46, 94, 0.13);
  --vr-border: 1px solid rgba(16, 43, 66, 0.16);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--vr-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/*
 * A single focus treatment for the whole site, including anything a plugin
 * renders. Plugins are told not to override it.
 */
:focus-visible {
  outline: 3px solid #ffb300;
  outline-offset: 4px;
}

/* Honour a reduced-motion preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.vr-shell {
  width: var(--vr-shell);
  margin-inline: auto;
}

.vr-skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
  background: #fff;
  color: var(--vr-navy);
  padding: 12px 18px;
  border-radius: var(--vr-radius);
  font-weight: 700;
  text-decoration: none;
}
.vr-skip-link:focus { transform: none; }

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

/* ---------------------------------------------------------------- header --- */

.vr-header {
  background: var(--vr-navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.vr-header a { color: inherit; }

.vr-header__inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-block: 12px;
}

.vr-brand {
  font-family: var(--vr-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vr-brand__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vr-orange);
  color: var(--vr-navy-deep);
  font-size: 1.05rem;
  letter-spacing: 0;
}

.vr-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  flex-wrap: wrap;
}
.vr-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
}
.vr-nav a:hover { color: var(--vr-orange-light); }

.vr-pill {
  background: var(--vr-orange);
  color: var(--vr-navy-deep);
  padding: 7px 13px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* --------------------------------------------------------------- notices --- */

/*
 * The demonstration disclaimer. It is deliberately part of the design rather
 * than an afterthought, because a plausible-looking government-adjacent site
 * that does not say what it is would be actively misleading.
 */
.vr-disclaimer {
  background: var(--vr-navy-deep);
  color: var(--vr-pale);
  font-size: 0.87rem;
  padding: 10px 0;
  text-align: center;
}
.vr-disclaimer strong { color: var(--vr-orange-light); }

/* ---------------------------------------------------------------- footer --- */

.vr-footer {
  background: var(--vr-navy-deep);
  color: #c7d8e8;
  padding: 56px 0 32px;
  margin-top: 80px;
}
.vr-footer a { color: #fff; }
.vr-footer h2 {
  font-family: var(--vr-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 14px;
}
.vr-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 40px;
}
.vr-footer ul { list-style: none; margin: 0; padding: 0; }
.vr-footer li { margin-bottom: 9px; }
.vr-footer__legal {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  color: #93aac0;
}

/* ------------------------------------------------------------ page shell --- */

.vr-page-header {
  background: var(--wp--preset--gradient--hero, radial-gradient(circle at 74% 40%, #0b68bd 0%, #074780 26%, #052e5e 52%, #031d3d 100%));
  color: #fff;
  padding: 72px 0 64px;
}
.vr-page-header h1 { margin: 0 0 16px; max-width: 20ch; }
.vr-page-header p {
  max-width: 62ch;
  font-size: 1.2rem;
  color: #d9e7f4;
  margin: 0;
}
.vr-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--vr-pale);
  margin: 0 0 8px;
}

.vr-prose { padding-block: 56px; }
.vr-prose h2 { margin-top: 2.2em; }
.vr-prose h2:first-child { margin-top: 0; }
.vr-prose h3 {
  font-family: var(--vr-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  margin: 1.8em 0 0.5em;
}

/* Shared card grid used by the eligibility guidance content. */
.vr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.vr-card {
  background: #fff;
  border: var(--vr-border);
  border-radius: var(--vr-radius);
  padding: 22px;
  border-top: 4px solid var(--vr-electric);
}
.vr-card--no { border-top-color: var(--vr-danger); }
.vr-card h3 { margin-top: 0; }
.vr-card p { margin: 0; color: var(--vr-muted); }

@media (max-width: 780px) {
  .vr-header__inner { gap: 16px; }
  .vr-nav { width: 100%; margin-left: 0; gap: 18px; }
  .vr-page-header { padding: 48px 0 40px; }
}