/*
 * gethelp.ie
 *
 * SELF-HOSTED, NO CDN. The page this replaces pulled Bootstrap and Font Awesome
 * from jsdelivr and rendered nothing until they arrived. A page somebody opens
 * in a bad moment should not depend on three other companies being up.
 *
 * CONTRAST IS A REQUIREMENT HERE, NOT A PREFERENCE. Every colour below was
 * measured against the surface it sits on and clears 4.5:1. The values in the
 * design it came from did not: the placeholder was 2.64:1, the small print on
 * cream 4.43:1, the helpline numbers 4.00:1. Someone distressed, outdoors, on a
 * cracked phone in daylight, is not reading grey on cream. If you change a
 * colour, measure it again.
 */

:root {
  --navy: #1b3a5c;          /* 11.6:1 on white, 10.7:1 on cream */
  --navy-deep: #15304d;
  --navy-soft: #2a5a7a;
  --heading: #2a4a6b;       /*  9.2:1 on white */
  --cream: #fbf4ea;
  --ink: #1c1f24;           /* 15.1:1 on cream */
  --body: #4a5160;          /*  8.0:1 on white */
  --muted: #5a606e;         /*  5.8:1 on cream, more on white */
  --placeholder: #70757e;   /*  4.6:1 on white */
  --rust: #a94b26;          /*  5.2:1 on cream */
  --eyebrow: #8a5131;       /*  5.8:1 on cream */
  --accent: #e0744a;        /* decoration only, never text */
  --error: #b3261e;         /*  6.5:1 on white */
  --error-ink: #7a2318;     /*  9.1:1 on its own panel */
  --error-bg: #fdf1ef;
  --error-edge: #f1cfc9;
  --line: #d7d9de;
}

/* Figtree is the house face. To use it, drop figtree.woff2 beside this file
   and uncomment. Not loaded from Google Fonts: a third-party request from a
   crisis page is both a delay and a disclosure.
@font-face { font-family: Figtree; src: url(figtree.woff2) format('woff2');
             font-weight: 400 700; font-display: swap; }
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream) radial-gradient(ellipse 90% 60% at 50% -10%, #ffe3c9 0%, rgba(255, 227, 201, 0) 70%) no-repeat;
  font-family: Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }
a:hover { color: var(--navy-deep); }

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 40px;
}

.column {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Helplines and the message preview travel together: stacked under the card on
   a phone, beside it from 760px. */
.side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.is-hidden { display: none; }

/* ---- The YSPI bar -------------------------------------------------------
   THE NAME IS TEXT, NOT THE LOGO FILE. The only artwork supplied is the
   reversed wordmark at 1968x1243 with its drop shadow baked into the pixels:
   at a 52px header height it renders about 82px wide and the three lines are
   unreadable, and the shadow cannot sit on the cream background at all. Set as
   text it is legible at every width, reflows on a narrow phone, and is read
   correctly aloud. ---------------------------------------------------------- */

.brand {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius: 24px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand__name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

/* The supplied artwork, when assets/logo_white.png is present.
   CAPPED ON BOTH AXES. The white wordmark we were given is 1968x1243 and three
   lines deep, so a height alone leaves it a few dozen pixels wide and unreadable
   on a phone; a width alone lets a wide lockup push the 999 link off the bar.
   Both, plus object-fit, means any sensible file lands somewhere legible. */
.brand__logo {
  display: block;
  height: auto;
  max-height: 56px;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
}

.brand__mark {
  flex: none;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
}

.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 13px;
  border-radius: 999px;
  min-height: 44px;
  white-space: nowrap;
}
.pill:hover { color: var(--navy-deep); }

.pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- The card ---------------------------------------------------------- */

.card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 12px 32px rgba(224, 116, 74, .10);
}

.card h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--heading);
  text-wrap: pretty;
}

.lead {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}

form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.field__hint {
  font-weight: 400;
  color: var(--muted);
}

.field input {
  font: inherit;
  font-size: 17px;              /* 17px or more, or iOS zooms on focus */
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  min-height: 52px;
}

.field input::placeholder { color: var(--placeholder); }

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(224, 116, 74, .18);
}

.field input[aria-invalid="true"] { border-color: var(--error); }

.field__error {
  font-size: 14px;
  line-height: 1.4;
  color: var(--error);
}
.field__error:empty { display: none; }

.notice {
  background: var(--error-bg);
  border: 1px solid var(--error-edge);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--error-ink);
  text-wrap: pretty;
}
.notice strong { display: block; margin-bottom: 2px; }
.notice a { color: var(--error-ink); font-weight: 600; }

.submit {
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 14px;
  min-height: 56px;
  padding: 0 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  box-shadow: 0 6px 16px rgba(27, 58, 92, .2);
}
.submit:hover { background: var(--navy-deep); }
.submit[disabled] { cursor: default; opacity: .85; }

.submit__spinner { display: none; }
.submit.is-sending .submit__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .submit.is-sending .submit__spinner { animation: none; }
}

.privacy {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.tick {
  margin: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fde9dd;
  color: var(--rust);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.state--sent h1 { margin: 14px 0 10px; color: var(--heading); }
.state--sent .lead { margin-bottom: 8px; }

.again {
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
  padding: 10px 0;
}

/* ---- Helplines, on the landing state ----------------------------------- */

.helplines h2,
.preview h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

.helplines { padding: 8px 8px 0; }

.helplines ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.helplines ul a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #f2dfcf;
  border-radius: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--ink);
  min-height: 56px;
}
.helplines ul a:hover { border-color: var(--accent); }

.helpline__name {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 15px;
}

.helpline__note {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}

.helpline__number {
  font-weight: 700;
  font-size: 16px;
  color: var(--rust);
  white-space: nowrap;
}

.helplines__foot,
.preview__foot {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- What the text says ------------------------------------------------ */

.preview { padding: 8px 8px 0; }

.bubble {
  margin: 0;
  background: #fff;
  border: 1px solid #f2dfcf;
  border-radius: 18px 18px 18px 6px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 92%;
  text-wrap: pretty;
}

/* ---- Footer ------------------------------------------------------------ */

.foot {
  padding: 16px 8px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.foot p { margin: 2px 0; }
.foot a { font-weight: 600; }

@media (max-width: 480px) {
  /* Side by side, the name and the pill fight over about 66px and the wordmark
     breaks onto four lines. Stacked, the name reads on two and the 999 link
     becomes a full-width target, which is the right order of importance. */
  .brand { flex-direction: column; align-items: stretch; gap: 12px; }
  .pill { justify-content: center; min-height: 48px; font-size: 15px; }

  /* Stacked, the logo has the whole bar rather than whatever the 999 link
     leaves it, so the height cap is what holds it back instead of the width.
     Raised, and centred over the full-width pill beneath it. */
  .brand__logo { max-height: 84px; max-width: 280px; margin: 0 auto; }
}

@media (max-width: 380px) {
  .card { padding: 24px 18px; }
  .card h1 { font-size: 25px; }
}

/* ---- Bigger than a phone -----------------------------------------------
   THE PAGE WAS BUILT FROM A 440px MOCK AND STOPPED THERE. On a tablet or a
   laptop that left a narrow strip down the middle of an empty page, with the
   helplines pushed below the fold on a screen with room for everything. The
   person who most needs a number should not have to scroll for it on a 1440px
   display any more than on a phone.

   So from 760px the column becomes two: the form on the left, the helplines and
   the message beside it, with the bar and the footer spanning both. Nothing is
   added or taken away at any width, only placed. ----------------------------- */

@media (min-width: 560px) {
  .column { max-width: 520px; }
  .card { padding: 32px 30px; }
  .card h1 { font-size: 30px; }
}

@media (min-width: 760px) {
  .page { padding: 24px 24px 48px; justify-content: center; }

  .column {
    max-width: 920px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas:
      "brand brand"
      "card  side"
      "foot  foot";
    gap: 16px;
    align-items: start;
  }

  .brand { grid-area: brand; }
  .card { grid-area: card; }
  .side { grid-area: side; }
  .foot { grid-area: foot; }

  /* The right-hand column stacks inside its own cell. */
  .side { display: flex; flex-direction: column; gap: 16px; }
  .helplines, .preview { padding: 0; }
  .helplines ul { gap: 10px; }

  .bubble { max-width: none; }
}

@media (min-width: 1100px) {
  .column { max-width: 1000px; gap: 20px; }
  .card { padding: 40px 36px; }
  .card h1 { font-size: 34px; line-height: 1.12; }
  .lead { font-size: 17px; }
  .brand__name { font-size: 17px; }
  .brand__mark { font-size: 17px; padding: 7px 10px; }
  .brand__logo { max-height: 64px; }
}