/* ==========================================================================
   Housing Options Scotland — Get Help form
   Stage 1 brand overrides

   Drop this in AFTER bootstrap.css and style.css and it will do most of the
   visual lift on its own. Nothing here needs the HTML to change, with two
   exceptions that are called out in the notes: the logo file, and the
   background image.

   Selectors were read off the live page at
   /hem/hos-gh-form-pages.php on 5 August 2026. If a class name has moved
   since, the block will just do nothing — no harm done. Adjust to suit.

   Colours come from the signed-off brand and its accessibility ramp. The
   short version: white is the reading surface, dark red is the action
   colour, and the bright brand colours are for small accents only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Typeface
   Barlow is the brand typeface and it is a free Google Font, so no licence
   to worry about. Put this in the <head> before the stylesheets:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink */
  --hos-heading:      #2f3031;   /* headings */
  --hos-body:         #58595b;   /* body text — the brand's 80% black */

  /* Surfaces */
  --hos-white:        #ffffff;   /* the reading surface. Default to this. */
  --hos-warmgrey:     #faf8f6;   /* very light warm grey for banding */
  --hos-rule:         #ece9e6;   /* hairline borders */
  --hos-field-border: #d6d1cc;   /* input borders */

  /* Actions */
  --hos-action:       #b14325;   /* dark red — primary buttons, links */
  --hos-action-hover: #8e3520;
  --hos-alt:          #284947;   /* dark blue-green — secondary, focus rings */
  --hos-alt-hover:    #1b3231;

  /* Brand colours — accents and large display only, never small white text */
  --hos-red:          #f15a29;
  --hos-green:        #75c37c;
  --hos-orange:       #f79421;
  --hos-blue:         #6cc8c3;

  /* Light tints — safe backgrounds for dark text at any size */
  --hos-tint-red:     #fcc9ad;
  --hos-tint-green:   #c9e5c7;
  --hos-tint-orange:  #fed0a0;
  --hos-tint-blue:    #c5e7e4;

  --hos-radius:       12px;
  --hos-radius-sm:    8px;
}


/* --------------------------------------------------------------------------
   2. Page shell

   NOTE — the background image. The repeating houses illustration behind the
   form panels needs to come off. It sits behind small text, it fights the
   panels, and it is the single biggest thing making the form read as the old
   brand. The rule below neutralises it if it is applied in CSS; if it is an
   <img> or a wrapping element in the markup, that element can simply be
   deleted. White behind a long form is the right answer here — the audience
   is largely disabled and older people, and a busy backdrop costs them
   reading effort for no gain.
   -------------------------------------------------------------------------- */
body {
  background-color: var(--hos-white) !important;
  background-image: none !important;
  color: var(--hos-body);
  font-family: Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Kill the houses backdrop wherever it is hung */
.bgbannerspacer {
  background-image: none !important;
  background-color: transparent !important;
}
/* .bgbannerspacer { min-height: 0 !important; height: 0 !important; } */




/* --------------------------------------------------------------------------
   3. Header and the old dark blue

   The old identity was a heavy navy (#2d318a) with yellow. Both are retired.
   The new header is white, with the full-colour logo and a hairline under it.

   MARKUP CHANGE — swap the logo file for logos/HOS_Colour.png. The old logo
   is a white-and-yellow mark built for a dark background, so it cannot be
   reused on white.
   -------------------------------------------------------------------------- */
.bluebg,
.bluebg50h-form {
  background-color: var(--hos-white) !important;
  border-bottom: 1px solid var(--hos-rule);
  color: var(--hos-body) !important;
}

/* Logo sizing — the new mark is wide, so give it room */
.bluebg img[src*="logo"],
header img[src*="logo"] {
  width: clamp(190px, 22vw, 240px);
  height: auto;
}

/* The "Housing enquiry" strip. Was yellow on mid-blue. Now plain and quiet —
   the page heading does the work, the strip does not need to shout. */
.section-main-heading {
  background-color: var(--hos-warmgrey) !important;
  color: var(--hos-heading) !important;
  border-bottom: 1px solid var(--hos-rule);
  padding: 14px 0;
}
.section-main-heading h1,
.section-main-heading h2,
.section-main-heading .section-title {
  color: var(--hos-heading) !important;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0;
  text-transform: none;   /* sentence case is a brand rule */
}


/* --------------------------------------------------------------------------
   4. Typography
   Sentence case throughout. Larger base size than usual on purpose.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5,
.section-title {
  color: var(--hos-heading) !important;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.625rem, 2.8vw, 2.125rem); }
h3 { font-size: clamp(1.375rem, 2.2vw, 1.625rem); }

p { 
  color: var(--hos-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
 }

a {
  color: var(--hos-action);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover, a:focus {
  color: var(--hos-action-hover);
  text-decoration-thickness: 3px;
}

/* Utility classes already on the page */
.btext   { color: var(--hos-heading) !important; }
.lighttxt{ color: var(--hos-body) !important; }
.red     { color: var(--hos-action) !important; }   /* required-field asterisks */
.whitebg { background-color: var(--hos-white) !important; }


/* --------------------------------------------------------------------------
   5. Focus. Please keep this.
   A visible focus ring matters more on this form than on almost any other
   page these organisations run.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--hos-alt);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   6. Buttons
   Pill shape, 52px minimum height, generous padding. The height is a
   touch-target decision, not a style one.

   Only two colours take white text at small sizes: #b14325 and #284947.
   Everything else in the palette fails contrast with white. So those two are
   the button colours, and the rest of the palette stays out of buttons.
   -------------------------------------------------------------------------- */
.btn,
.continuebutton,
.sectionBtn,
.addBut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: Barlow, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }

/* Primary — Continue / Submit */
.continuebutton,
.btn-info,
.btn-danger {
  background-color: var(--hos-action) !important;
  border-color: var(--hos-action) !important;
  color: var(--hos-white) !important;
}
.continuebutton:hover,
.btn-info:hover,
.btn-danger:hover {
  background-color: var(--hos-action-hover) !important;
  border-color: var(--hos-action-hover) !important;
  color: var(--hos-white) !important;
}

/* Secondary — Previous. Outlined rather than solid grey, so that "back" reads
   as available but clearly not the thing we are nudging people towards. */
.btn-secondary {
  background-color: transparent !important;
  border-color: var(--hos-alt) !important;
  color: var(--hos-alt) !important;
}
.btn-secondary:hover {
  background-color: var(--hos-alt) !important;
  border-color: var(--hos-alt) !important;
  color: var(--hos-white) !important;
}

/* "Add more" style buttons — quieter still */
.addBut {
  background-color: var(--hos-tint-blue) !important;
  border-color: var(--hos-tint-blue) !important;
  color: var(--hos-alt) !important;
  min-height: 48px;
  font-size: 18px;
}
.addBut:hover {
  background-color: var(--hos-alt) !important;
  border-color: var(--hos-alt) !important;
  color: var(--hos-white) !important;
}

.btn-lg { min-height: 60px; padding: 18px 40px; font-size: 21px; }

.access {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 20px;
    border: 2px solid var(--alt) !important;
    border-radius: 999px !important;
    color: var(--alt) !important;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
}

.ghimage {
  float: left !important;
}
.ghtext {
    overflow: hidden;
}

/* #enableRecite img {
 filter: invert(1);
} */


/* --------------------------------------------------------------------------
   7. Form fields
   Bigger, calmer, with a real border. The current 1px light grey box is hard
   to see for anyone with low contrast sensitivity.
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: 28px; }

label,
.form-check-label {
  color: var(--hos-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
  margin-left: 10px;
}

/* Helper text sitting under a label */
label + small,
.form-group small,
label .small {
  display: block;
  color: var(--hos-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: -2px;
  margin-bottom: 10px;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--hos-field-border);
  border-radius: var(--hos-radius-sm);
  background-color: var(--hos-white);
  color: var(--hos-heading);
  font-family: Barlow, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  box-shadow: none;
  max-width: 520px;      /* short answers get short boxes */
}
textarea.form-control { min-height: 140px; max-width: 100%; }

.form-control:hover { border-color: #b9b2ab; }

.form-control:focus {
  border-color: var(--hos-alt);
  outline: 3px solid var(--hos-alt);
  outline-offset: 2px;
  box-shadow: none;
}

/* Placeholders are a hint, never the only label. Keep them grey enough to
   read but clearly not real content. */
::placeholder { color: #8a8580; opacity: 1; }


/* --------------------------------------------------------------------------
   8. Radios and checkboxes
   These are the most-used controls on the form and currently the smallest
   things on the page. 24px control, 44px+ clickable row.
   -------------------------------------------------------------------------- */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0 8px 0;
  margin-bottom: 2px;
}
.form-check-inline { margin-right: 28px; }

.form-check-input,
input[type="radio"],
input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  accent-color: var(--hos-action);   /* modern browsers colour the control */
  cursor: pointer;
}

.form-check-label {
  margin-bottom: 0;
  margin-left: 2px;
  font-weight: 500;
  cursor: pointer;
}

/* If you want the fuller treatment, wrapping each option in a bordered,
   selectable card reads very well for Yes/No questions. That is a Stage 2
   job and needs a small markup change, so it is only sketched here. */


/* --------------------------------------------------------------------------
   9. Panels and section rhythm
   -------------------------------------------------------------------------- */
.section {
  background-color: var(--hos-white);
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}
.container { max-width: 1000px; }   /* long forms read better narrower */

/* Divider rules between question groups */
hr, .solid {
  border: 0;
  border-top: 1px solid var(--hos-rule);
  margin: 32px 0;
}


/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
  
#footer {
  background-color: var(--hos-white) !important;
  color: var(--hos-body) !important;
}
#footer a {
  color: var(--hos-body) !important;
}
.copyright {
  background-color: var(--hos-white) !important;
  border-top: 1px solid var(--hos-rule);
  color: var(--hos-body) !important;
  font-size: 17px;
  padding: 32px 0;
}
.copyright a { color: var(--hos-action); }


/* --------------------------------------------------------------------------
   11. Back-to-top
   -------------------------------------------------------------------------- */
.back-to-top {
  background-color: var(--hos-alt) !important;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  color: var(--hos-white) !important;
}
.back-to-top:hover { background-color: var(--hos-alt-hover) !important; }


/* --------------------------------------------------------------------------
   12. Progress bar
   There is a "Progress Bar Here" placeholder on every page. Here is a style
   for it whenever you get to building it — no framework needed.

   Suggested markup:
   <div class="hos-progress">
     <p class="hos-progress__label">Step 3 of 10 — Current housing</p>
     <div class="hos-progress__track"><span style="width:30%"></span></div>
   </div>
   -------------------------------------------------------------------------- */
.hos-progress { max-width: 420px; margin: 0 auto; text-align: center; }
.hos-progress__label {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--hos-body);
}
.hos-progress__track {
  height: 10px;
  border-radius: 999px;
  background-color: var(--hos-tint-red);
  overflow: hidden;
}
.hos-progress__track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: var(--hos-action);
  transition: width .3s ease;
}


/* --------------------------------------------------------------------------
   13. Reassurance callout
   For "the form will not time out", "our service is free" and similar. These
   small reassurances came straight out of user testing and carry a lot of
   weight, so they are worth a proper treatment rather than plain text.
   -------------------------------------------------------------------------- */
.hos-note {
  background-color: var(--hos-tint-blue);
  border-radius: var(--hos-radius);
  padding: 20px 24px;
  color: var(--hos-heading);
  font-size: 18px;
  line-height: 1.6;
}
.hos-note--warm { background-color: var(--hos-tint-orange); }


/* --------------------------------------------------------------------------
   14. Things to avoid with this palette
   - No white text on #75c37c, #f79421 or #6cc8c3. It fails contrast at every
     size. This is the easiest mistake to make here.
   - White on #f15a29 is fine at 24px+ only, so hero headlines yes, buttons no.
   - No large fields of brand colour behind body text. White is the surface.
   - Sentence case, not Title Case.
   - "Housing Options Scotland" in full, never "HOS", anywhere the public
     can see it.
   -------------------------------------------------------------------------- */


   
.hos-btn--outline {
    padding: 12px 18px;
    border-color: #666769!important;
    background: #ffffff;
    color: #2f3031;
}

.hos-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1.0625rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
}

/*progress bar*/
.wizard-progress {
    position: relative;
    display: block;
    width: 100%;
    height: 12px;
    background: #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    margin: 15px 0;
}

.wizard-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: #f1592a;
    border-radius: 6px;
    transition: width 0.3s ease;
}