/* ChangeFluent Support
   Brand values are declared on the wrapper so the support area looks right
   whether or not the site plugin is active. */

/* Colours and type are inherited from the ChangeFluent Site plugin when it is
   active, using its own custom properties. The literal values are fallbacks for
   a site without it. A brand change therefore only has to happen in one place. */
.cfs{
  --cfs-ink:var(--ink,#0E3A4A);
  --cfs-blue:var(--blue,#007398);
  --cfs-blue-lift:var(--blue-lift,#1795BC);
  --cfs-red:var(--red,#CD545B);
  --cfs-paper:var(--paper,#F2F4F3);
  --cfs-slate:var(--slate,#5B7480);
  --cfs-line:color-mix(in srgb, var(--cfs-ink) 14%, transparent);
  --cfs-display:var(--display,"Archivo",ui-sans-serif,system-ui,sans-serif);
  --cfs-body:var(--body,"Public Sans",ui-sans-serif,system-ui,sans-serif);
  --cfs-mono:var(--mono,"IBM Plex Mono",ui-monospace,monospace);

  font-family:var(--cfs-body);
  color:var(--cfs-ink); line-height:1.6; max-width:900px; margin-inline:auto;
}
.cfs *{box-sizing:border-box}

.cfs-h{font-family:var(--cfs-display); font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .2rem; color:var(--cfs-ink)}
.cfs-sub{margin:0; color:var(--cfs-slate); font-size:.92rem}
.cfs-help{color:var(--cfs-slate); font-size:.86rem; margin:.4rem 0 0}
.cfs-back{margin:0 0 1rem; font-size:.9rem}
.cfs-back a{color:var(--cfs-blue); text-decoration:none}
.cfs-back a::before{content:"\2190"; margin-right:.4rem}

.cfs-bar{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  justify-content:space-between; margin-bottom:1.4rem;
}

.cfs-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--cfs-blue); color:#fff; text-decoration:none;
  font-weight:600; font-size:.95rem; padding:.7rem 1.3rem;
  border:0; border-radius:999px; cursor:pointer; transition:background .2s ease;
}
.cfs-btn:hover{background:var(--cfs-ink); color:#fff}
.cfs-btn-ghost{background:transparent; color:var(--cfs-ink); box-shadow:inset 0 0 0 1px var(--cfs-line)}
.cfs-btn-ghost:hover{background:var(--cfs-paper); color:var(--cfs-ink)}
.cfs-btn-small{padding:.5rem .95rem; font-size:.86rem}

.cfs-search{display:flex; gap:.5rem; margin-bottom:1.4rem}
.cfs-search input{
  flex:1; padding:.7rem .9rem; border:1px solid var(--cfs-line);
  border-radius:8px; font-size:.95rem; background:#fff; color:var(--cfs-ink);
}

.cfs-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--cfs-line)}
.cfs-item{border-bottom:1px solid var(--cfs-line)}
.cfs-item a{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  justify-content:space-between; padding:1rem .2rem; text-decoration:none; color:inherit;
}
.cfs-item a:hover{background:rgba(0,115,152,.04)}
.cfs-item-main{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.cfs-item-meta{display:flex; align-items:center; gap:.8rem; flex:none}
.cfs-ref{font-family:var(--cfs-mono); font-size:.72rem;
  letter-spacing:.08em; color:var(--cfs-blue)}
.cfs-subject{font-weight:600}
.cfs-time{color:var(--cfs-slate); font-size:.82rem}

.cfs-status{
  display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.03em;
  padding:.28rem .7rem; border-radius:999px; white-space:nowrap;
  background:rgba(14,58,74,.08); color:var(--cfs-ink);
}
.cfs-status.is-new{background:rgba(205,84,91,.14); color:#9c3138}
.cfs-status.is-open{background:rgba(0,115,152,.14); color:#005f7d}
.cfs-status.is-waiting_on_client{background:rgba(214,158,46,.18); color:#8a6014}
.cfs-status.is-resolved,.cfs-status.is-closed{background:rgba(26,127,55,.13); color:#1a7f37}

.cfs-empty{
  text-align:center; padding:2.6rem 1.4rem; border:1px dashed var(--cfs-line);
  border-radius:12px; background:var(--cfs-paper);
}
.cfs-empty h2,.cfs-empty h3{margin:0 0 .5rem; color:var(--cfs-ink)}
.cfs-empty p{margin:0 auto .8rem; max-width:46ch; color:var(--cfs-slate)}

.cfs-form{margin-top:1.2rem}
.cfs-field{margin-bottom:1.3rem}
.cfs-field label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem}
.cfs-field input[type=text],.cfs-field textarea,.cfs-field select{
  width:100%; padding:.75rem .9rem; border:1px solid var(--cfs-line);
  border-radius:8px; font-size:.95rem; font-family:inherit;
  background:#fff; color:var(--cfs-ink);
}
.cfs-field textarea{resize:vertical; min-height:120px}
.cfs-field input:focus,.cfs-field textarea:focus,.cfs-field select:focus{
  outline:2px solid var(--cfs-blue); outline-offset:1px; border-color:transparent;
}

.cfs-radios{display:grid; gap:.6rem}
.cfs-radio{
  display:flex; gap:.7rem; align-items:flex-start; padding:.85rem 1rem;
  border:1px solid var(--cfs-line); border-radius:10px; cursor:pointer; font-weight:400;
}
.cfs-radio:hover{background:var(--cfs-paper)}
.cfs-radio input{margin-top:.25rem; flex:none}
.cfs-radio span{display:flex; flex-direction:column; gap:.1rem}
.cfs-radio strong{font-size:.95rem}
.cfs-radio em{font-style:normal; font-size:.84rem; color:var(--cfs-slate)}

.cfs-check{display:flex; gap:.5rem; align-items:center; font-size:.9rem; margin-bottom:.9rem}
.cfs-actions{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap}

.cfs-ticket-head{
  display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; padding-bottom:1.1rem; border-bottom:1px solid var(--cfs-line);
}

.cfs-controls{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end;
  padding:1rem; margin:1.2rem 0; background:var(--cfs-paper); border-radius:10px;
}
.cfs-controls label{display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; font-weight:600}
.cfs-controls select{padding:.5rem .7rem; border:1px solid var(--cfs-line); border-radius:7px; background:#fff}

.cfs-thread{list-style:none; margin:1.6rem 0; padding:0; display:grid; gap:1rem}
.cfs-msg{padding:1rem 1.2rem; border-radius:12px; background:var(--cfs-paper);
  border-left:3px solid var(--cfs-line)}
.cfs-msg.is-team{background:rgba(0,115,152,.06); border-left-color:var(--cfs-blue)}
.cfs-msg.is-internal{background:rgba(205,84,91,.07); border-left-color:var(--cfs-red)}
.cfs-msg-head{display:flex; gap:.7rem; align-items:center; margin-bottom:.4rem; font-size:.84rem}
.cfs-msg-head time{color:var(--cfs-slate); margin-left:auto}
.cfs-msg-body{font-size:.95rem}
.cfs-tag{font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:4px; background:var(--cfs-red); color:#fff}

.cfs-note{padding:.9rem 1.1rem; border-radius:10px; font-size:.93rem; margin:0 0 1.2rem}
.cfs-note.is-ok{background:rgba(26,127,55,.1); color:#14602a}
.cfs-note.is-bad{background:rgba(205,84,91,.12); color:#9c3138}

.cfs-tabs{display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1.2rem;
  border-bottom:1px solid var(--cfs-line); padding-bottom:.6rem}
.cfs-tabs a{
  font-size:.86rem; padding:.4rem .8rem; border-radius:999px;
  text-decoration:none; color:var(--cfs-slate);
}
.cfs-tabs a:hover{background:var(--cfs-paper); color:var(--cfs-ink)}
.cfs-tabs a.is-on{background:var(--cfs-ink); color:#fff}
.cfs-count{font-size:.72rem; opacity:.75; margin-left:.25rem}

.cfs-table{width:100%; border-collapse:collapse; font-size:.9rem; margin-top:.6rem}
.cfs-table th,.cfs-table td{text-align:left; padding:.7rem .8rem;
  border-bottom:1px solid var(--cfs-line); vertical-align:top}
.cfs-table thead th{
  font-family:var(--cfs-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--cfs-blue);
}
.cfs-table tbody tr:hover{background:rgba(0,115,152,.03)}
.cfs-table a{color:var(--cfs-blue); text-decoration:none;
  font-family:var(--cfs-mono); font-size:.8rem}

.cfs-insight{
  padding:.85rem 1.1rem; border-radius:10px; margin-bottom:1.2rem; font-size:.9rem;
  background:rgba(0,115,152,.07); color:var(--cfs-ink);
}
.cfs-insight a{color:var(--cfs-blue); margin-left:.4rem}

.cfs-panel{padding:1.3rem; border:1px solid var(--cfs-line); border-radius:12px; margin-bottom:1.6rem}
.cfs-panel h3{margin:0 0 .3rem; font-size:1.05rem}

@media (max-width:640px){
  .cfs-item a{flex-direction:column; align-items:flex-start}
  .cfs-item-meta{width:100%; justify-content:space-between}
  .cfs-controls{flex-direction:column; align-items:stretch}
  .cfs-table{display:block; overflow-x:auto}
}

.cfs-account{font-size:.84rem; color:var(--cfs-slate); margin:0 0 1.2rem}
.cfs-account a{color:var(--cfs-blue); text-decoration:none}
.cfs-account a:hover{text-decoration:underline}

.cfs-invite{max-width:520px; margin-inline:auto; padding:2rem 1.6rem;
  border:1px solid var(--cfs-line); border-radius:14px; background:#fff}
.cfs-invite .cfs-h{margin-bottom:.3rem}
.cfs-field input:disabled{background:var(--cfs-paper); color:var(--cfs-slate)}


/* ============================================================
   Inside the site shell
   ------------------------------------------------------------
   Our markup sits in the site plugin's .band and .shell, whose
   prose and layout rules would otherwise claim our elements.
   The class is doubled so these settle it without !important.
   ============================================================ */

.cf-site .cfs.cfs{max-width:940px}

.cf-site .cfs.cfs p,
.cf-site .cfs.cfs li,
.cf-site .cfs.cfs label,
.cf-site .cfs.cfs td,
.cf-site .cfs.cfs th{font-family:var(--cfs-body); letter-spacing:normal}

.cf-site .cfs.cfs h2,
.cf-site .cfs.cfs h3{font-family:var(--cfs-display); letter-spacing:-.02em}

/* The site's button styling is richer than ours, so where the two meet, ours
   simply steps out of the way rather than competing. */
.cf-site .cfs.cfs .cfs-btn{
  font-family:var(--cfs-body); text-decoration:none; letter-spacing:normal;
}
.cf-site .cfs.cfs a{text-decoration:none}
.cf-site .cfs.cfs .cfs-item a:hover{background:color-mix(in srgb,var(--cfs-blue) 5%, transparent)}

/* The reveal wrapper on the site's templates starts hidden until its script
   runs. Nothing in the support area should ever depend on that. */
.cf-site .cfs.cfs{opacity:1; transform:none}

/* A hero of our own, sized like the site's page heroes. */
.hero-support .hero-grid{align-items:center}

/* ============================================================
   Compact hero for the support pages
   ------------------------------------------------------------
   The site's page hero is sized for marketing pages, where a
   large opening is the point. On the support pages the point is
   the thing underneath it, so the hero gives way: less padding,
   a smaller heading, a smaller motif, and far less space before
   the content starts.
   ============================================================ */

.hero-support{
  /* Full height, using svh so a mobile browser's disappearing toolbar does not
     leave a strip of the next section showing at rest. */
  min-height:100svh;
  /* Grid with align-content, not flex. A flex item stretches and loses the
     shell's own max-width and side padding, which put the copy against the
     left edge of the window. */
  display:grid; align-content:center;
  padding-top:clamp(104px,10vw,132px);
  padding-bottom:clamp(40px,5vw,72px);
}
.hero-support h1{
  font-size:clamp(2.2rem,4vw,3.4rem);
  letter-spacing:-.03em; line-height:1.05;
}
.hero-support .lede{font-size:clamp(1rem,1.25vw,1.15rem)}
.hero-support .hero-copy>*+*{margin-top:1.1rem}

/* The photograph carries the right hand side, so the motif would compete.
   One or the other, never both. */
.hero-support .motif{display:none}
.hero-support .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-support .hero-copy{max-width:34rem}

/* the band beneath starts sooner */
.cf-page-support .band,
.cf-page-support-team .band{
  padding-block:clamp(32px,3.6vw,52px);
}

/* On desktop the background photograph does the work. */
.hero-photo{display:none}

@media (max-width:860px){
  .hero-support{
    /* Height comes from the content, including the photograph, rather than from
       a reserved percentage. Mixing svh for the height with vh for the padding
       is what pushed the image below the fold: on a phone those two units are
       deliberately different, one measuring the viewport with the browser
       toolbar showing and one without. */
    /* Everything is constrained to the small viewport height, the one measured
       with the phone browser's toolbar showing. The copy takes what it needs,
       the photograph takes what is left, and the two are pushed apart. Nothing
       is sized by a percentage guess, so nothing can end up behind the toolbar. */
    min-height:100svh;
    /* stretch, not space-between. The only grid row here is the shell, so
       distributing rows on the hero itself does nothing. The shell has to fill
       the height and distribute its own children. */
    align-content:stretch;
    padding-top:clamp(88px,19vw,112px);
    padding-bottom:.9rem;
    background-image:none !important;
    background:var(--abyss,#06212C);
  }
  .hero-support .shell{display:flex; flex-direction:column}
  /* Flex column rather than relying on grid align-content, which the site's own
     hero-grid rules were quietly winning against. Copy at the top, photograph at
     the bottom, whatever height is left in between. */
  .hero-support .hero-grid{
    display:flex; flex-direction:column; justify-content:space-between;
    flex:1; gap:1rem;
  }
  .hero-support .hero-copy{flex:0 0 auto}
  .hero-support .hero-photo{flex:0 1 auto; display:flex; align-items:flex-end; justify-content:center; min-height:0}
  .hero-support .hero-copy>*+*{margin-top:.75rem}
  .hero-support .lede{font-size:1rem; line-height:1.5}
  .hero-support .hero-note{margin-top:.7rem}
  .hero-support h1{font-size:clamp(1.9rem,7vw,2.4rem)}
  .hero-support .hero-copy{max-width:none}
  .hero-support .hero-cta{width:100%}
  .hero-support .hero-cta .btn{flex:1 1 auto; justify-content:center}

  /* The photograph, whole, in the flow. */
  .hero-photo{display:block; min-height:0}
  .hero-photo img{
    display:block;
    /* Bounded by the space left over, and never cropped. The image scales to
       whichever constraint it meets first, so the whole person is always in
       view whatever the screen height. */
    width:auto; max-width:100%;
    height:auto; max-height:34svh;
    margin-inline:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
  }
}

/* A short screen has no room for a full height hero and a usable form, so the
   height requirement is dropped rather than forcing a scroll to reach a button. */
@media (max-height:620px){
  .hero-support{min-height:0; padding-bottom:clamp(28px,5vh,48px)}
  .hero-support{background-size:cover, auto 60%}
}

/* Adjacent buttons need a gap of their own. The markup separates them with
   whitespace, which is not reliable once the elements are inline-flex. */
.cfs-btn + .cfs-btn{margin-left:.7rem}
.cfs-empty p{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; align-items:center}
.cfs-empty p:not(:has(.cfs-btn)){display:block}
.cfs-empty .cfs-help{display:block}

/* A short line rather than a large box, when the hero already carries the
   sign in action. */
.cfs-quiet{
  text-align:center; font-size:.94rem; color:var(--slate,#5B7480);
  margin:0; padding:.4rem 0;
}
.cfs-quiet a{color:var(--blue,#007398)}

/* Defensive. Empty blocks left behind by a previous plugin, and the theme's own
   content padding, can leave a large gap between the hero and the first useful
   thing on the page. Neither belongs on a utility page. */
.cf-page-support .band > .shell > p:empty,
.cf-page-support-team .band > .shell > p:empty,
.cf-page-support .band > .shell > div:empty,
.cf-page-support-team .band > .shell > div:empty{display:none}

.cf-page-support .band > .shell > *:first-child,
.cf-page-support-team .band > .shell > *:first-child{margin-top:0}
.cf-page-support .band > .shell > *:last-child,
.cf-page-support-team .band > .shell > *:last-child{margin-bottom:0}

/* The hero action row, matching the site's own spacing. */
.hero-support .hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.hero-support .hero-note{margin-top:.9rem; font-size:.86rem}
.hero-support .hero-note a{color:var(--mist,#CFDCE0); text-decoration:underline; text-underline-offset:3px}
.hero-support .hero-note a:hover{color:#fff}