/*
Theme Name: RJH Digital
Theme URI: https://rjhdigital.co.uk
Description: RJH Digital's own site, built as a reusable client starter. GeneratePress child theme — design tokens in theme.json, sections as block patterns. To re-skin for a client: change the palette + fonts in theme.json, swap the logo, replace the content. Change "Template:" to match the parent theme installed.
Author: RJH
Template: generatepress
Version: 1.0.5
Text Domain: rjh-digital
*/

/* ============================================================
   TOKENS  (mirrors theme.json; used by the scoped CSS below.
   Re-skin a client by editing these + theme.json to match.)
   ============================================================ */
:root{
  --ink:#15150F; --ink-soft:#1B1B14;
  --paper:#F4F2EA; --paper2:#FFFFFF;
  --hivis:#FFE400; --hivis-deep:#D9BE00;
  --text:#1A1A12; --muted:#6B6B5E; --muted-dark:#9E9E90;
  --line:#E2DFD2; --line-dark:#2E2E23;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

/* ============================================================
   BASE (scoped to .rjh-section so it never fights the parent)
   ============================================================ */
.rjh-section{ font-family:var(--body); color:var(--text); line-height:1.55; }
.rjh-section h1,.rjh-section h2,.rjh-section h3{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.02;
}
.rjh-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.rjh-hl{
  background:var(--hivis); box-decoration-break:clone; -webkit-box-decoration-break:clone;
  padding:0 .08em; border-radius:2px;
}
.rjh-hazard{ height:12px; background:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--hivis) 14px 28px); }

/* Buttons */
.rjh-section .wp-block-button__link{
  font-family:var(--display); font-weight:700; font-size:16px; padding:15px 26px;
  border-radius:2px; border:2px solid var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.rjh-btn-hivis .wp-block-button__link{ background:var(--hivis); color:var(--ink); }
.rjh-btn-hivis .wp-block-button__link:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.rjh-btn-dark .wp-block-button__link{ background:var(--ink); color:var(--paper); }
.rjh-btn-dark .wp-block-button__link:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--hivis-deep); }
.rjh-btn-ghost .wp-block-button__link{ background:transparent; color:var(--ink); }
.rjh-btn-ghost .wp-block-button__link:hover{ background:var(--ink); color:var(--paper); }
.rjh-section a:focus-visible,.rjh-section .wp-block-button__link:focus-visible{ outline:3px solid var(--hivis-deep); outline-offset:3px; }

/* ============================================================
   FULL-BLEED  (baked in from the start — sections span the
   viewport, content held at 1080px; no container fighting)
   ============================================================ */
html,body{ overflow-x:clip; }
.rjh-fullbleed #page{ max-width:100% !important; width:100% !important; }
.rjh-fullbleed #content,
.rjh-fullbleed #primary,
.rjh-fullbleed .site-main,
.rjh-fullbleed article,
.rjh-fullbleed .inside-article,
.rjh-fullbleed .entry-content{ padding:0 !important; margin:0 !important; max-width:100% !important; }
.rjh-fullbleed article,
.rjh-fullbleed .inside-article{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.rjh-fullbleed .entry-header{ display:none; }
.rjh-section.alignfull{
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}

/* ============================================================
   HEADER  (light, sticky, brand mark + nav quote button)
   ============================================================ */
.site-header{ background:var(--paper) !important; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; }
.site-header .inside-header{ padding-top:12px !important; padding-bottom:12px !important; align-items:center; }
.main-title a,.site-title a{ font-family:var(--display) !important; font-weight:800 !important; color:var(--ink) !important; letter-spacing:-.03em; }
.site-title a::before{
  content:""; display:inline-block; width:12px; height:12px; background:var(--hivis);
  border:2px solid var(--ink); border-radius:2px; transform:rotate(45deg); margin-right:10px; vertical-align:baseline;
}
.main-navigation,.main-navigation .inside-navigation{ background:var(--paper) !important; }
.main-navigation .main-nav ul li a{ color:var(--muted) !important; font-family:var(--body) !important; font-weight:500; }
.main-navigation .main-nav ul li a:hover{ color:var(--ink) !important; }
.menu-toggle,.menu-toggle .gp-icon,.menu-toggle svg{ color:var(--ink) !important; fill:var(--ink) !important; }
/* add CSS class "rjh-navquote" to the "Get a quote" menu item */
.main-navigation .rjh-navquote a{
  background:var(--hivis) !important; color:var(--ink) !important; border:2px solid var(--ink);
  border-radius:2px; padding:9px 16px !important; font-family:var(--display); font-weight:700;
}
.main-navigation .rjh-navquote a:hover{ background:var(--hivis-deep) !important; color:var(--ink) !important; }

/* ============================================================
   HERO
   ============================================================ */
.rjh-hero{ padding:76px 0 40px; }
/* Hero top space: override the block's baked-in inline padding-top (76px) and make it
   responsive. Without !important the inline value wins and the mobile rule never applies. */
.rjh-hero{ padding-top:clamp(28px,5vw,44px) !important; }
.rjh-hero h1{ font-size:clamp(48px,9vw,104px); letter-spacing:-.04em; }
.rjh-hero .rjh-sub{ font-size:clamp(18px,2.2vw,22px); color:var(--muted); max-width:560px; line-height:1.45; }
.rjh-hero .rjh-sub strong{ color:var(--text); font-weight:600; }
.rjh-tags{ display:flex; gap:10px; flex-wrap:wrap; }
.rjh-tag{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.04em; border:1.5px solid var(--ink); border-radius:2px; padding:7px 12px; display:inline-flex; align-items:center; gap:7px; }
.rjh-tag::before{ content:""; width:7px; height:7px; background:var(--hivis-deep); border-radius:50%; }

/* ============================================================
   THE USUAL OPTIONS
   ============================================================ */
.rjh-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:26px; }
.rjh-opt{ border:1.5px solid var(--line); border-radius:3px; padding:26px; background:var(--paper2); }
.rjh-opt .k{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; }
.rjh-opt h3{ font-size:20px; margin-bottom:8px; }
.rjh-opt p{ font-size:14.5px; color:var(--muted); }
.rjh-opts-foot{ font-family:var(--display); font-weight:800; font-size:clamp(24px,3.4vw,34px); letter-spacing:-.02em; }

/* ============================================================
   JOB SHEET (signature)
   ============================================================ */
.rjh-sheet{ background:var(--paper2); color:var(--ink); border-radius:4px; max-width:720px; margin:0 auto; box-shadow:10px 10px 0 var(--hivis-deep); border:2px solid var(--ink); }
.rjh-sheet-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 26px; border-bottom:2px dashed var(--line); }
.rjh-sheet-head .t{ font-family:var(--display); font-weight:800; font-size:20px; }
.rjh-sheet-head .no{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.rjh-sheet-body{ padding:8px 26px 26px; }
.rjh-line{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.rjh-line:last-child{ border-bottom:none; }
.rjh-line .tick{ flex:0 0 auto; width:22px; height:22px; background:var(--hivis); border:1.5px solid var(--ink); border-radius:2px; display:grid; place-items:center; font-size:13px; font-weight:800; margin-top:1px; }
.rjh-line .txt{ font-size:15.5px; font-weight:500; }
.rjh-sheet-foot{ background:var(--ink); color:var(--paper); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:22px 26px; }
.rjh-sheet-foot .lab{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--muted-dark); text-transform:uppercase; }
.rjh-sheet-foot .amt{ font-family:var(--display); font-weight:800; font-size:34px; line-height:1; color:var(--hivis); }
.rjh-sheet-foot .meta{ font-family:var(--mono); font-size:12px; color:var(--muted-dark); text-align:right; line-height:1.7; }
.rjh-stamp{ display:inline-block; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--hivis-deep); border:2px solid var(--hivis-deep); border-radius:4px; padding:8px 14px; transform:rotate(-4deg); margin-top:22px; }
.rjh-care{ text-align:center; font-size:14px; color:var(--muted-dark); margin-top:24px; font-family:var(--mono); }

/* ============================================================
   CASE STUDY
   ============================================================ */
.rjh-ba{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:28px; }
.rjh-panel{ border:1.5px solid var(--line); border-radius:3px; padding:24px; background:var(--paper2); }
.rjh-panel.after{ border-color:var(--ink); border-width:2px; }
.rjh-badge{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:2px; display:inline-block; margin-bottom:14px; }
.rjh-panel.before .rjh-badge{ background:var(--line); color:var(--muted); }
.rjh-panel.after .rjh-badge{ background:var(--hivis); color:var(--ink); }
.rjh-panel ul{ list-style:none; margin-top:6px; padding:0; }
.rjh-panel li{ font-size:14.5px; padding-left:20px; position:relative; margin-bottom:9px; color:var(--muted); }
.rjh-panel.after li{ color:var(--text); }
.rjh-panel.before li::before{ content:"\2715"; position:absolute; left:0; color:#B9433A; font-weight:700; }
.rjh-panel.after li::before{ content:"\2713"; position:absolute; left:0; color:var(--hivis-deep); font-weight:800; }
.rjh-shot{ border:2px solid var(--ink); border-radius:4px; overflow:hidden; background:var(--ink-soft); min-height:220px; display:grid; place-items:center; text-align:center; padding:30px; }
.rjh-shot .ph{ font-family:var(--mono); font-size:13px; color:var(--muted-dark); line-height:1.7; }
.rjh-quote-block{ border-left:4px solid var(--hivis-deep); padding:6px 0 6px 22px; margin-top:30px; max-width:640px; }
.rjh-quote-block p{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.6vw,26px); letter-spacing:-.01em; line-height:1.25; }
.rjh-quote-block .by{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:12px; }

/* ============================================================
   HOW IT WORKS (a real sequence -> numbering earns its place)
   ============================================================ */
.rjh-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.rjh-step{ border-top:3px solid var(--ink); padding-top:16px; }
.rjh-step .n{ font-family:var(--mono); font-weight:700; font-size:13px; color:var(--ink); background:var(--hivis); display:inline-block; padding:2px 8px; border-radius:2px; margin-bottom:12px; }
.rjh-step h3{ font-size:19px; margin-bottom:7px; }
.rjh-step p{ font-size:14.5px; color:var(--muted); }

/* ============================================================
   ABOUT (dark)
   ============================================================ */
.rjh-about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
.rjh-about-card{ border:1.5px solid var(--line-dark); border-radius:3px; padding:28px; }
.rjh-about-card .row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-dark); font-size:14.5px; }
.rjh-about-card .row:last-child{ border-bottom:none; }
.rjh-about-card .k{ font-family:var(--mono); color:var(--muted-dark); font-size:13px; }
.rjh-about-card .v{ font-weight:600; color:var(--paper); }

/* ============================================================
   CONTACT
   ============================================================ */
.rjh-contact{ text-align:center; }
.rjh-contact p.rjh-lead{ font-size:18px; color:var(--muted); max-width:520px; margin:20px auto 34px; }
.rjh-contact-lines{ font-family:var(--mono); font-size:14px; color:var(--muted); margin-top:34px; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.rjh-contact-lines a{ border-bottom:2px solid var(--hivis); }

/* ============================================================
   DARK SECTIONS — force legible text (GP ignores theme.json presets)
   ============================================================ */
.rjh-dark h1,.rjh-dark h2,.rjh-dark h3{ color:var(--paper2) !important; }
.rjh-dark p:not(.rjh-eyebrow){ color:var(--muted-dark) !important; }
.rjh-dark .rjh-eyebrow{ color:var(--muted-dark) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:820px){
  .main-navigation .rjh-navquote a{ display:inline-block; margin:6px 0; }
  .rjh-opts,.rjh-ba,.rjh-steps,.rjh-about-grid{ grid-template-columns:1fr; }
  .rjh-steps{ gap:24px; }
}
@media(prefers-reduced-motion:reduce){
  .rjh-section *{ transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   FIRST-RENDER FIXES (v1.0.1)
   ============================================================ */
/* highlighter: override any inline transparent background */
.rjh-hl{ background:var(--hivis) !important; }

/* button colours must beat GeneratePress's defaults */
.rjh-btn-hivis .wp-block-button__link{ background:var(--hivis) !important; color:var(--ink) !important; }
.rjh-btn-dark  .wp-block-button__link{ background:var(--ink)   !important; color:var(--paper) !important; }
.rjh-btn-ghost .wp-block-button__link{ background:transparent  !important; color:var(--ink) !important; }
.rjh-btn-ghost .wp-block-button__link:hover{ background:var(--ink) !important; color:var(--paper) !important; }
.rjh-btn-hivis .wp-block-button__link:hover{ background:var(--hivis) !important; }


/* nav "Get a quote": compact button, vertically centred (not full header height) */
.main-navigation .rjh-navquote{ display:flex; align-items:center; }
.main-navigation .rjh-navquote a{ padding:10px 18px !important; line-height:1 !important; height:auto !important; }

/* ============================================================
   ENQUIRY FORM (Fluent Forms, styled to match) (v1.0.3)
   ============================================================ */
.rjh-section .fluentform{ max-width:540px; margin:34px auto 0; text-align:left; }
.rjh-section .fluentform .ff-el-input--label label{ font-family:var(--body); font-weight:600; font-size:14px; color:var(--text); }
.rjh-section .fluentform input:not([type=submit]),
.rjh-section .fluentform textarea{
  font-family:var(--body); font-size:15px; width:100%;
  border:1.5px solid var(--line); border-radius:2px; padding:12px 14px;
  background:var(--paper2); color:var(--text);
}
.rjh-section .fluentform input:focus,
.rjh-section .fluentform textarea:focus{ border-color:var(--ink); outline:2px solid var(--hivis); outline-offset:0; }
.rjh-section .fluentform .ff-btn-submit{
  font-family:var(--display); font-weight:700; font-size:16px;
  background:var(--hivis) !important; color:var(--ink) !important;
  border:2px solid var(--ink); border-radius:2px; padding:14px 28px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.rjh-section .fluentform .ff-btn-submit:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }

/* placeholder slot shown in the pattern until the form shortcode is dropped in */
.rjh-formslot{ border:2px dashed var(--line); border-radius:4px; padding:30px; max-width:540px; margin:34px auto 0; font-family:var(--mono); font-size:13px; color:var(--muted); line-height:1.7; }
.rjh-contact .rjh-alt{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:30px; }

/* --- Introductory-offer subline on the package price (v1.0.5) --- */
.rjh-sheet-foot .rjh-introsub{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--hivis); margin-top:6px; }