/*
Theme Name: Forgeren Tactical
Theme URI: https://forgeren.com/themes/forgeren-tactical
Author: Max, Forgeren
Author URI: https://forgeren.com
Description: A dark, mobile first classic WordPress theme for page based sites. Top menu with a burger on small screens, header, body and footer sections, no blog furniture. Self hosted webfonts, no third party requests.
Version: 2.3.0
Requires at least: 6.2
Tested up to: 6.8
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: forgeren-tactical
Tags: one-column, custom-menu, custom-logo, dark, accessibility-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   FORGEREN TACTICAL - MASTER STYLESHEET
   Version: 2.3.0

   CHANGELOG (newest first)
   2.3.0 - 2026-07-30 - Section 17 converted to camelCase class names. All
           other sections remain snake_case.
   2.2.0 - 2026-07-30 - Renamed section 17 from copy_field to codeField.
   2.1.0 - 2026-07-30 - Added section 17, codeField. Copyable single line
           value box with adjacent date.
   2.0.0 - 2026-07-30 - Rebuilt as a WordPress classic theme stylesheet. Added
           theme header, site header with burger navigation, page hero, prose
           content styles for core blocks, footer, forms, WordPress core class
           support. Removed game specific slot, quest and attribute components.
   1.0.0 - 2026-07-30 - Initial design system extracted from reference screens.

   NAMING
   Custom classes use snake_case. Classes required by WordPress core keep their
   own hyphenated names, for example screen-reader-text, alignwide, sub-menu.

   TABLE OF CONTENTS
   01. settings_tokens
   02. base_reset
   03. typography_scale
   04. layout_containers
   05. site_header
   06. nav_menu
   07. page_hero
   08. content_prose
   09. site_footer
   10. button_set
   11. panel_card
   12. form_elements
   13. wordpress_core
   14. utility_helpers
   15. responsive_rules
   16. accessibility_rules
   17. codeField
   ========================================================================== */


/* ==========================================================================
   01. settings_tokens
   Single source of truth. Change a value here, it applies site wide.
   ========================================================================== */

:root {

  /* colour - surfaces */
  --colour_bg_base: #12151c;
  --colour_bg_raised: #1b202b;
  --colour_panel: #242a36;
  --colour_panel_alt: #2b3240;
  --colour_row_hover: #3c4453;

  /* colour - gold accent */
  --colour_gold_deep: #5f4820;
  --colour_gold_mid: #9b7738;
  --colour_gold: #c19a51;
  --colour_gold_light: #e7cb8d;
  --colour_text_gold: #f3ddae;

  /* colour - action blue */
  --colour_blue_fill: rgba(157, 205, 233, 0.82);
  --colour_blue_fill_hover: rgba(190, 226, 246, 0.95);
  --colour_blue_border: #7cc3e9;
  --colour_blue_text: #10314a;

  /* colour - text */
  --colour_text: #dfe4ea;
  --colour_text_strong: #ffffff;
  --colour_text_muted: #98a2b0;
  --colour_text_dark: #2b2107;

  /* colour - status */
  --colour_danger: #c1503f;
  --colour_warning: #d9a13a;
  --colour_success: #6fae5a;

  /* colour - lines and shade */
  --colour_line: rgba(255, 255, 255, 0.09);
  --colour_line_strong: rgba(255, 255, 255, 0.18);

  /* gradient */
  --gradient_gold_bar: linear-gradient(180deg, #a8823f 0%, #7c5f2b 100%);
  --gradient_gold_bright: linear-gradient(180deg, #e2c281 0%, #b78f4a 100%);

  /* typography - families */
  --font_display: "Oswald", "Arial Narrow", sans-serif;
  --font_ui: "Barlow Semi Condensed", "Segoe UI", sans-serif;
  --font_body: "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  /* typography - fluid scale, mobile first with a controlled desktop ceiling */
  --size_xs: 0.75rem;
  --size_sm: 0.875rem;
  --size_md: 1rem;
  --size_lg: 1.125rem;
  --size_xl: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --size_2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --size_3xl: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --size_4xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);

  /* typography - weight and rhythm */
  --weight_regular: 400;
  --weight_medium: 500;
  --weight_semibold: 600;
  --weight_bold: 700;
  --line_tight: 1.15;
  --line_snug: 1.3;
  --line_normal: 1.65;
  --track_wide: 0.06em;
  --track_wider: 0.14em;

  /* spacing scale */
  --space_1: 4px;
  --space_2: 8px;
  --space_3: 12px;
  --space_4: 16px;
  --space_5: 24px;
  --space_6: 32px;
  --space_7: 48px;
  --space_8: 72px;

  /* radius */
  --radius_sm: 3px;
  --radius_md: 5px;
  --radius_lg: 10px;
  --radius_pill: 999px;

  /* borders */
  --border_thin: 1px;
  --border_thick: 2px;

  /* shadow */
  --shadow_panel: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow_header: 0 2px 12px rgba(0, 0, 0, 0.6);
  --shadow_glow_blue: 0 0 10px rgba(124, 195, 233, 0.4);

  /* layout widths, matched by theme.json for the block editor */
  --width_content: 720px;
  --width_wide: 1140px;
  --gutter: var(--space_4);
  --height_header: 60px;

  /* motion */
  --speed_fast: 120ms;
  --speed_base: 220ms;
  --ease_out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* z-index scale */
  --layer_base: 0;
  --layer_raised: 10;
  --layer_header: 100;
  --layer_drawer: 200;
  --layer_overlay: 1000;
}


/* ==========================================================================
   02. base_reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--height_header) + var(--space_4));
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--colour_bg_base);
  color: var(--colour_text);
  font-family: var(--font_body);
  font-size: var(--size_md);
  line-height: var(--line_normal);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* set by the navigation script while the mobile drawer is open */
body.nav_is_open {
  overflow: hidden;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  padding-left: var(--space_5);
}

hr {
  height: 1px;
  margin: var(--space_6) 0;
  border: 0;
  background-color: var(--colour_line_strong);
}

a {
  color: var(--colour_gold_light);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--speed_fast) var(--ease_out);
}

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


/* ==========================================================================
   03. typography_scale
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space_4);
  font-family: var(--font_display);
  font-weight: var(--weight_bold);
  line-height: var(--line_tight);
  letter-spacing: var(--track_wide);
  color: var(--colour_text_gold);
  text-transform: uppercase;
}

h1 { font-size: var(--size_4xl); }
h2 { font-size: var(--size_3xl); }
h3 { font-size: var(--size_2xl); }

/* smaller headings drop the display face, condensed reads better at size */
h4, h5, h6 {
  font-family: var(--font_ui);
  letter-spacing: var(--track_wide);
  color: var(--colour_text_strong);
}

h4 { font-size: var(--size_xl); }
h5 { font-size: var(--size_lg); }
h6 { font-size: var(--size_md); color: var(--colour_text_muted); }

p {
  margin: 0 0 var(--space_4);
}

strong { font-weight: var(--weight_bold); color: var(--colour_text_strong); }
small { font-size: var(--size_sm); color: var(--colour_text_muted); }

.eyebrow {
  display: block;
  margin-bottom: var(--space_2);
  font-family: var(--font_ui);
  font-size: var(--size_sm);
  font-weight: var(--weight_bold);
  letter-spacing: var(--track_wider);
  text-transform: uppercase;
  color: var(--colour_gold);
}

.text_lead {
  font-size: var(--size_lg);
  color: var(--colour_text);
}

.text_muted { color: var(--colour_text_muted); }
.text_gold { color: var(--colour_text_gold); }
.text_center { text-align: center; }


/* ==========================================================================
   04. layout_containers
   ========================================================================== */

.site_wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site_main {
  flex: 1 1 auto;
}

.container {
  width: 100%;
  max-width: var(--width_content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container_wide {
  max-width: var(--width_wide);
}

.section_block {
  padding-block: var(--space_7);
}

.section_block.is_tight { padding-block: var(--space_5); }
.section_block.is_raised { background-color: var(--colour_bg_raised); }
.section_block.is_panel { background-color: var(--colour_panel); }


/* ==========================================================================
   05. site_header
   Sticky top bar holding the brand and the primary navigation.
   ========================================================================== */

.site_header {
  position: sticky;
  top: 0;
  z-index: var(--layer_header);
  background-color: var(--colour_bg_raised);
  border-bottom: var(--border_thin) solid var(--colour_gold_deep);
  box-shadow: var(--shadow_header);
}

/* thin gold rule reading as the gold bar from the reference screens */
.site_header::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--gradient_gold_bar);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space_4);
  min-height: var(--height_header);
  max-width: var(--width_wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site_brand {
  display: flex;
  align-items: center;
  gap: var(--space_3);
  min-width: 0;
}

.brand_logo img {
  max-height: 40px;
  width: auto;
}

.brand_name {
  margin: 0;
  font-family: var(--font_display);
  font-size: var(--size_xl);
  font-weight: var(--weight_bold);
  letter-spacing: var(--track_wide);
  text-transform: uppercase;
  line-height: var(--line_tight);
}

.brand_name a {
  color: var(--colour_text_gold);
  text-decoration: none;
}

.brand_tagline {
  display: none;
  font-family: var(--font_ui);
  font-size: var(--size_sm);
  color: var(--colour_text_muted);
}

/* burger, visible below the desktop breakpoint only */
.nav_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: var(--border_thin) solid var(--colour_line_strong);
  border-radius: var(--radius_sm);
  background-color: var(--colour_panel);
  transition: background-color var(--speed_fast) var(--ease_out);
}

.nav_toggle:hover {
  background-color: var(--colour_row_hover);
}

.nav_toggle_bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--colour_text_gold);
  transition: background-color var(--speed_fast) var(--ease_out);
}

.nav_toggle_bars::before,
.nav_toggle_bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: var(--colour_text_gold);
  transition: transform var(--speed_base) var(--ease_out);
}

.nav_toggle_bars::before { top: -6px; }
.nav_toggle_bars::after { top: 6px; }

/* burger turns into a cross while the drawer is open */
.nav_toggle[aria-expanded="true"] .nav_toggle_bars {
  background-color: transparent;
}

.nav_toggle[aria-expanded="true"] .nav_toggle_bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav_toggle[aria-expanded="true"] .nav_toggle_bars::after {
  transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   06. nav_menu
   Mobile drawer by default, horizontal bar from the desktop breakpoint up.
   ========================================================================== */

.primary_nav {
  position: fixed;
  top: var(--height_header);
  left: 0;
  right: 0;
  z-index: var(--layer_drawer);
  max-height: calc(100vh - var(--height_header));
  padding: var(--space_3) var(--gutter) var(--space_6);
  background-color: var(--colour_bg_raised);
  border-bottom: var(--border_thin) solid var(--colour_line_strong);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed_base) var(--ease_out),
              transform var(--speed_base) var(--ease_out),
              visibility var(--speed_base) var(--ease_out);
}

.primary_nav.is_open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* without JavaScript the drawer stays in flow and readable */
.no_js .primary_nav {
  position: static;
  max-height: none;
  transform: none;
  opacity: 1;
  visibility: visible;
}

.no_js .nav_toggle {
  display: none;
}

.primary_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary_nav li {
  border-bottom: var(--border_thin) solid var(--colour_line);
}

.primary_nav a {
  display: block;
  padding: var(--space_3) var(--space_2);
  font-family: var(--font_ui);
  font-size: var(--size_lg);
  font-weight: var(--weight_semibold);
  letter-spacing: var(--track_wide);
  color: var(--colour_text);
  text-decoration: none;
}

.primary_nav a:hover,
.primary_nav a:focus-visible {
  color: var(--colour_text_gold);
}

/* current page marker, WordPress supplies these class names */
.primary_nav .current-menu-item > a,
.primary_nav .current_page_item > a,
.primary_nav .current-menu-ancestor > a {
  color: var(--colour_text_gold);
}

/* second level, indented on mobile */
.primary_nav .sub-menu {
  padding-left: var(--space_4);
  border-left: var(--border_thin) solid var(--colour_gold_deep);
}

.primary_nav .sub-menu a {
  font-size: var(--size_md);
  color: var(--colour_text_muted);
}

/* submenu disclosure button injected by the navigation script */
.submenu_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--colour_gold_light);
}

.submenu_toggle svg {
  transition: transform var(--speed_fast) var(--ease_out);
}

.submenu_toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.menu_item_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space_2);
}

.menu-item-has-children > .sub-menu[hidden] {
  display: none;
}


/* ==========================================================================
   07. page_hero
   Title band at the top of every page, echoing the gold header strip.
   ========================================================================== */

.page_hero {
  padding-block: var(--space_6) var(--space_5);
  background-color: var(--colour_bg_raised);
  border-bottom: var(--border_thin) solid var(--colour_line);
}

.page_hero_title {
  margin: 0;
  font-size: var(--size_3xl);
}

.page_hero_intro {
  max-width: 46ch;
  margin: var(--space_3) 0 0;
  color: var(--colour_text_muted);
}

.page_hero.is_front {
  padding-block: var(--space_8);
  text-align: center;
}

.page_hero.is_front .page_hero_intro {
  margin-inline: auto;
}


/* ==========================================================================
   08. content_prose
   Styles for editor output. Scoped so it never leaks into header or footer.
   ========================================================================== */

.content_prose > * + * {
  margin-top: var(--space_4);
}

.content_prose h2,
.content_prose h3,
.content_prose h4 {
  margin-top: var(--space_6);
}

.content_prose ul,
.content_prose ol {
  padding-left: var(--space_5);
}

.content_prose li + li {
  margin-top: var(--space_2);
}

.content_prose blockquote {
  margin: var(--space_5) 0;
  padding: var(--space_3) var(--space_4);
  border-left: 3px solid var(--colour_gold);
  background-color: var(--colour_panel);
  color: var(--colour_text_strong);
  font-size: var(--size_lg);
}

.content_prose blockquote cite {
  display: block;
  margin-top: var(--space_2);
  font-size: var(--size_sm);
  font-style: normal;
  color: var(--colour_text_muted);
}

.content_prose code,
.content_prose kbd {
  padding: 2px 5px;
  border-radius: var(--radius_sm);
  background-color: var(--colour_bg_base);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--colour_gold_light);
}

.content_prose pre {
  padding: var(--space_4);
  border: var(--border_thin) solid var(--colour_line);
  border-radius: var(--radius_md);
  background-color: var(--colour_bg_base);
  overflow-x: auto;
}

.content_prose img {
  border-radius: var(--radius_md);
}

.content_prose figure {
  margin: var(--space_5) 0;
}

.content_prose figcaption {
  margin-top: var(--space_2);
  font-size: var(--size_sm);
  color: var(--colour_text_muted);
  text-align: center;
}

/* tables scroll rather than break the layout on narrow screens */
.content_prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size_sm);
}

.content_prose th,
.content_prose td {
  padding: var(--space_2) var(--space_3);
  border: var(--border_thin) solid var(--colour_line);
  text-align: left;
}

.content_prose th {
  background-color: var(--colour_panel_alt);
  font-family: var(--font_ui);
  color: var(--colour_text_gold);
}

.table_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   09. site_footer
   ========================================================================== */

.site_footer {
  margin-top: var(--space_8);
  padding-block: var(--space_6) var(--space_5);
  background-color: var(--colour_bg_raised);
  border-top: var(--border_thin) solid var(--colour_gold_deep);
  font-size: var(--size_sm);
}

.footer_inner {
  display: grid;
  gap: var(--space_5);
  max-width: var(--width_wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.footer_brand_name {
  margin: 0 0 var(--space_2);
  font-family: var(--font_display);
  font-size: var(--size_lg);
  letter-spacing: var(--track_wide);
  text-transform: uppercase;
  color: var(--colour_text_gold);
}

.footer_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space_2) var(--space_4);
}

.footer_nav a {
  color: var(--colour_text_muted);
  text-decoration: none;
  font-family: var(--font_ui);
  letter-spacing: var(--track_wide);
}

.footer_nav a:hover {
  color: var(--colour_text_gold);
}

.footer_meta {
  padding-top: var(--space_4);
  border-top: var(--border_thin) solid var(--colour_line);
  color: var(--colour_text_muted);
}


/* ==========================================================================
   10. button_set
   ========================================================================== */

.button,
.wp-block-button__link,
.content_prose .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space_2);
  min-height: 44px;
  padding: 0 var(--space_5);
  border: var(--border_thin) solid var(--colour_blue_border);
  border-radius: var(--radius_sm);
  background-color: var(--colour_blue_fill);
  color: var(--colour_blue_text);
  font-family: var(--font_ui);
  font-size: var(--size_lg);
  font-weight: var(--weight_bold);
  letter-spacing: var(--track_wide);
  text-decoration: none;
  box-shadow: var(--shadow_glow_blue);
  transition: background-color var(--speed_fast) var(--ease_out),
              transform var(--speed_fast) var(--ease_out);
}

.button:hover,
.wp-block-button__link:hover {
  background-color: var(--colour_blue_fill_hover);
  color: var(--colour_blue_text);
}

.button:active {
  transform: translateY(1px);
}

.button_secondary {
  background: var(--gradient_gold_bar);
  border-color: var(--colour_gold_light);
  color: var(--colour_text_gold);
  box-shadow: none;
}

.button_secondary:hover {
  background: var(--gradient_gold_bright);
  color: var(--colour_text_dark);
}

.button_ghost {
  background-color: transparent;
  border-color: var(--colour_line_strong);
  color: var(--colour_text);
  box-shadow: none;
}

.button_ghost:hover {
  background-color: var(--colour_row_hover);
  color: var(--colour_text_strong);
}

.button_small {
  min-height: 36px;
  padding: 0 var(--space_4);
  font-size: var(--size_md);
}

.button_block {
  display: flex;
  width: 100%;
}

.button:disabled,
.button.is_disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}


/* ==========================================================================
   11. panel_card
   Generic dark container for grouped content.
   ========================================================================== */

.panel_card {
  padding: var(--space_4);
  background-color: var(--colour_panel);
  border: var(--border_thin) solid var(--colour_line);
  border-radius: var(--radius_md);
  box-shadow: var(--shadow_panel);
}

.panel_heading {
  margin: calc(var(--space_4) * -1) calc(var(--space_4) * -1) var(--space_4);
  padding: var(--space_2) var(--space_4);
  background: var(--gradient_gold_bar);
  font-family: var(--font_ui);
  font-size: var(--size_lg);
  font-weight: var(--weight_bold);
  letter-spacing: var(--track_wide);
  color: var(--colour_text_gold);
}

.card_grid {
  display: grid;
  gap: var(--space_4);
  grid-template-columns: 1fr;
}


/* ==========================================================================
   12. form_elements
   ========================================================================== */

label {
  display: block;
  margin-bottom: var(--space_1);
  font-family: var(--font_ui);
  font-size: var(--size_sm);
  letter-spacing: var(--track_wide);
  color: var(--colour_text_muted);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space_2) var(--space_3);
  background-color: var(--colour_bg_base);
  border: var(--border_thin) solid var(--colour_line_strong);
  border-radius: var(--radius_sm);
  color: var(--colour_text_strong);
  transition: border-color var(--speed_fast) var(--ease_out);
}

textarea {
  min-height: 140px;
  line-height: var(--line_normal);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--colour_blue_border);
  outline: none;
}

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

.field_row + .field_row {
  margin-top: var(--space_4);
}

.field_error {
  margin-top: var(--space_1);
  color: var(--colour_danger);
  font-size: var(--size_sm);
}


/* ==========================================================================
   13. wordpress_core
   Class names WordPress outputs. Names are fixed by core, not by this theme.
   ========================================================================== */

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

.screen-reader-text:focus {
  position: fixed !important;
  top: var(--space_2);
  left: var(--space_2);
  z-index: var(--layer_overlay);
  width: auto;
  height: auto;
  padding: var(--space_2) var(--space_4);
  clip: auto;
  background-color: var(--colour_gold);
  color: var(--colour_text_dark);
  border-radius: var(--radius_sm);
  font-family: var(--font_ui);
  font-weight: var(--weight_bold);
}

.alignleft {
  float: left;
  margin: 0 var(--space_4) var(--space_3) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--space_3) var(--space_4);
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

/* wide and full width blocks, paired with the widths in theme.json */
.content_prose .alignwide {
  max-width: var(--width_wide);
  margin-inline: auto;
}

.content_prose .alignfull {
  max-width: none;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: var(--size_sm);
  color: var(--colour_text_muted);
  text-align: center;
}

.custom-logo-link {
  display: inline-flex;
}

.wp-block-separator {
  border-color: var(--colour_line_strong);
}


/* ==========================================================================
   14. utility_helpers
   ========================================================================== */

.is_hidden { display: none !important; }
.full_width { width: 100%; }
.flex_row { display: flex; align-items: center; gap: var(--space_3); }
.flex_between { display: flex; align-items: center; justify-content: space-between; gap: var(--space_3); }
.flex_wrap { flex-wrap: wrap; }
.truncate_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack_2 > * + * { margin-top: var(--space_2); }
.stack_3 > * + * { margin-top: var(--space_3); }
.stack_4 > * + * { margin-top: var(--space_4); }
.stack_5 > * + * { margin-top: var(--space_5); }


/* ==========================================================================
   15. responsive_rules
   Mobile first. 900px is the point where the menu fits on one line.
   ========================================================================== */

@media (min-width: 600px) {

  .brand_tagline {
    display: block;
  }

  .card_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer_inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .footer_meta {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {

  :root {
    --gutter: var(--space_5);
    --height_header: 72px;
  }

  /* burger retires, menu becomes a horizontal bar */
  .nav_toggle {
    display: none;
  }

  .primary_nav {
    position: static;
    max-height: none;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .primary_nav > ul {
    display: flex;
    align-items: center;
    gap: var(--space_2);
  }

  .primary_nav li {
    position: relative;
    border-bottom: 0;
  }

  .primary_nav a {
    padding: var(--space_2) var(--space_3);
    font-size: var(--size_md);
    text-transform: uppercase;
  }

  /* dropdown for child pages, opened on hover or keyboard focus */
  .primary_nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--layer_drawer);
    min-width: 200px;
    padding: var(--space_2) 0;
    background-color: var(--colour_panel);
    border: var(--border_thin) solid var(--colour_line_strong);
    border-radius: var(--radius_sm);
    box-shadow: var(--shadow_panel);
  }

  .primary_nav .sub-menu[hidden] {
    display: none;
  }

  .primary_nav li:hover > .sub-menu,
  .primary_nav li:focus-within > .sub-menu {
    display: block;
  }

  .submenu_toggle {
    display: none;
  }

  .card_grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .page_hero {
    padding-block: var(--space_7) var(--space_6);
  }
}


/* ==========================================================================
   16. accessibility_rules
   17. codeField
   ========================================================================== */

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

@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;
  }
}

@media (prefers-contrast: more) {

  :root {
    --colour_text_muted: #c6ccd5;
    --colour_line: rgba(255, 255, 255, 0.24);
  }
}

@media print {

  body {
    background: #fff;
    color: #000;
  }

  .site_header,
  .site_footer,
  .nav_toggle,
  .primary_nav,
  .button {
    display: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}


/* ==========================================================================
   17. codeField
   Single line, read only value box that visitors copy from, with the date
   it was added shown alongside. Rendered by the [ftCode] shortcode.
   ========================================================================== */

.codeField {
  display: inline-flex;
  align-items: center;
  gap: var(--space_2);
  flex-wrap: wrap;
  vertical-align: middle;
}

/* two classes beat the input[type="text"] rule in section 12 */
.codeField .codeFieldInput {
  width: 200px;
  max-width: 100%;
  min-height: 40px;
  padding: var(--space_2) var(--space_3);
  background-color: #ffffff;
  border: var(--border_thin) solid var(--colour_line_strong);
  border-radius: var(--radius_lg);
  color: #16181d;
  font-family: var(--font_ui);
  font-size: var(--size_md);
  font-weight: 600;
  letter-spacing: var(--track_wide);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--speed_fast) var(--ease_out),
              box-shadow var(--speed_fast) var(--ease_out);
}

.codeField .codeFieldInput:focus {
  border-color: var(--colour_blue_border);
  box-shadow: var(--shadow_glow_blue);
  outline: none;
}

/* copy control sits outside the white box so it never obscures the value */
.codeFieldButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: var(--border_thin) solid var(--colour_line_strong);
  border-radius: var(--radius_sm);
  background-color: var(--colour_panel);
  color: var(--colour_text_gold);
  transition: background-color var(--speed_fast) var(--ease_out),
              color var(--speed_fast) var(--ease_out);
}

.codeFieldButton:hover {
  background-color: var(--colour_row_hover);
  color: var(--colour_text_strong);
}

.codeFieldDate {
  font-family: var(--font_ui);
  font-size: var(--size_sm);
  color: var(--colour_text_muted);
  white-space: nowrap;
}

/* confirmation bubble, text supplied by the script */
.codeField.isCopied .codeFieldButton,
.codeField.isFailed .codeFieldButton {
  position: relative;
}

.codeField.isCopied .codeFieldButton {
  border-color: var(--colour_success);
  color: var(--colour_success);
}

.codeField.isFailed .codeFieldButton {
  border-color: var(--colour_danger);
  color: var(--colour_danger);
}

.codeField[data-code-message] .codeFieldButton::after {
  content: attr(data-code-message);
  position: absolute;
  bottom: calc(100% + var(--space_1));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--layer_raised);
  padding: 2px var(--space_2);
  border-radius: var(--radius_sm);
  background-color: var(--colour_panel_alt);
  color: var(--colour_text);
  font-family: var(--font_ui);
  font-size: var(--size_xs);
  white-space: nowrap;
}

/* stack the date under the box on very narrow screens */
@media (max-width: 380px) {

  .codeField {
    width: 100%;
  }

  .codeFieldDate {
    flex-basis: 100%;
  }
}