/* Athena Complaint Form
   Every rule is scoped to .ath-ccf so nothing here can reach the rest of the
   page, and nothing on the page reaches in. */

.ath-ccf,.ath-ccf *,.ath-ccf *::before,.ath-ccf *::after{box-sizing:border-box}

/* Breakdance lays a section out as a flex column that does not stretch its
   children, so the block is told to fill the section it sits in. */
.bde-code-block:has(> .ath-ccf){width:100%;align-self:stretch}

.ath-ccf{
  --f-ink:#0B0B0C; --f-gold:#FFC04A; --f-body:#3A3A42; --f-muted:#6C6C75;
  --f-line:#DAD8D0; --f-shade:#F7F7F5; --f-err:#B3261E;
  display:block;width:100%;background:#FFFFFF;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--f-ink);
}
.ath-ccf .f-in{max-width:1000px;margin:0 auto;padding:34px 40px 90px}

/* ------------------------------------------------------------- LAYOUT */
.ath-ccf .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.ath-ccf .f-full{grid-column:1 / -1}
.ath-ccf .f-row{margin:0 0 24px;min-width:0}

.ath-ccf .f-lab{display:block;font-size:15px;font-weight:600;letter-spacing:-.005em;
  line-height:1.4;margin:0 0 8px;color:var(--f-ink)}
.ath-ccf .f-req{color:var(--f-gold);margin-left:3px}
/* the old form hid the label on some fields and leaned on the note below.
   It is still here for anyone using a screen reader. */
.ath-ccf .f-lab--hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ath-ccf .f-help{font-family:Roboto,system-ui,sans-serif;font-size:13px;font-weight:400;
  line-height:1.6;color:var(--f-muted);margin:7px 0 0;padding:0}

.ath-ccf input[type=text],.ath-ccf input[type=email],.ath-ccf input[type=tel],
.ath-ccf input[type=date],.ath-ccf select,.ath-ccf textarea{
  width:100%;display:block;background:#FFFFFF;color:var(--f-ink);
  font-family:Roboto,system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.5;
  border:1px solid var(--f-line);border-radius:2px;padding:13px 14px;margin:0;
  transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none;
}
.ath-ccf textarea{min-height:150px;resize:vertical}
.ath-ccf textarea.f-sm{min-height:110px}
.ath-ccf select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:42px;
}
.ath-ccf input:focus,.ath-ccf select:focus,.ath-ccf textarea:focus{
  outline:none;border-color:var(--f-ink);box-shadow:0 0 0 3px rgba(255,192,74,.35);
}
.ath-ccf input::placeholder,.ath-ccf textarea::placeholder{color:#A9A9B2;opacity:1}
/* Safari draws a date field as shrink to fit unless it is told otherwise,
   and iOS gives it its own inner padding. Both are levelled here so the
   picker sits in a box the same size as every other field. */
.ath-ccf input[type=date]{min-height:51px;-webkit-appearance:none;appearance:none}
.ath-ccf input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.ath-ccf input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}
.ath-ccf input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
.ath-ccf .f-stack > * + *{margin-top:10px}
.ath-ccf .f-sub{font-family:Roboto,system-ui,sans-serif;font-size:13px;color:var(--f-muted);
  margin:6px 0 14px;display:block}
.ath-ccf .f-two{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.ath-ccf .f-two-item{min-width:0}

/* -------------------------------------------------------- YES NO PAIR */
.ath-ccf .f-yn{display:flex;gap:10px;flex-wrap:wrap}
.ath-ccf .f-yn label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;margin:0;
  border:1px solid var(--f-line);border-radius:2px;padding:11px 18px;
  font-family:Roboto,system-ui,sans-serif;font-size:15px;color:var(--f-body);
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.ath-ccf .f-yn input{accent-color:#0B0B0C;width:16px;height:16px;margin:0}
.ath-ccf .f-yn label:has(input:checked){border-color:var(--f-ink);background:var(--f-shade);color:var(--f-ink)}
.ath-ccf .f-yn label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(255,192,74,.35)}

/* ----------------------------------------------------------- DROP ZONE */
.ath-ccf .f-drop{
  position:relative;overflow:hidden;display:block;margin:0;
  border:1px dashed var(--f-line);border-radius:3px;background:var(--f-shade);
  padding:26px 22px;text-align:center;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.ath-ccf .f-drop:hover,.ath-ccf .f-drop.is-over{border-color:var(--f-gold);background:#FFFDF6}
.ath-ccf .f-drop:focus-within{border-color:var(--f-ink);box-shadow:0 0 0 3px rgba(255,192,74,.35)}
.ath-ccf .f-drop svg{width:24px;height:24px;color:var(--f-muted);display:block;margin:0 auto}
.ath-ccf .f-drop-t{display:block;font-size:15px;font-weight:600;margin-top:9px}
.ath-ccf .f-drop-p{display:block;font-family:Roboto,system-ui,sans-serif;font-size:13px;color:var(--f-muted);margin:5px 0 0}
.ath-ccf .f-drop-list{display:block;font-family:Roboto,system-ui,sans-serif;font-size:14px;color:var(--f-ink);margin:12px 0 0}
.ath-ccf .f-drop-list:empty{display:none}
.ath-ccf .f-drop-list span{display:inline-block;background:#FFF;border:1px solid var(--f-line);
  border-radius:2px;padding:7px 12px;margin:0 6px 6px 0}
.ath-ccf .f-drop input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}

/* ------------------------------------------------------------- ERRORS */
.ath-ccf .f-errors{border:1px solid var(--f-err);border-left-width:3px;border-radius:3px;
  background:#FDF4F3;padding:20px 24px;margin:0 0 30px}
.ath-ccf .f-errors-t{font-size:15px;font-weight:600;margin:0;color:var(--f-err)}
.ath-ccf .f-errors ul{font-family:Roboto,system-ui,sans-serif;font-size:15px;line-height:1.7;
  color:var(--f-body);margin:8px 0 0;padding-left:20px}
.ath-ccf .f-bad input,.ath-ccf .f-bad textarea,.ath-ccf .f-bad select{border-color:var(--f-err)}
.ath-ccf .f-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------ ACTIONS */
.ath-ccf .f-act{margin-top:6px}
.ath-ccf .f-btn{
  display:inline-block;padding:16px 38px;border-radius:2px;cursor:pointer;
  background:var(--f-gold);border:1px solid var(--f-gold);color:var(--f-ink);
  font-family:Poppins,system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1;
  transition:background-color .2s ease,border-color .2s ease;
}
.ath-ccf .f-btn:hover,.ath-ccf .f-btn:focus-visible{background:#FFD07A;border-color:#FFD07A;color:var(--f-ink)}
.ath-ccf .f-btn:focus-visible{outline:2px solid var(--f-gold);outline-offset:3px}
.ath-ccf .f-btn[disabled]{opacity:.6;cursor:default}

/* ------------------------------------------------------------- THANKS */
.ath-ccf .f-thanks{display:none;border:1px solid var(--f-line);border-top:3px solid var(--f-gold);
  border-radius:3px;background:var(--f-shade);padding:44px}
.ath-ccf .f-thanks.is-shown{display:block}
.ath-ccf .f-thanks:focus{outline:none}
.ath-ccf .f-tick{width:44px;height:44px;border-radius:50%;background:var(--f-gold);display:grid;place-items:center}
.ath-ccf .f-tick svg{width:22px;height:22px;color:var(--f-ink)}
.ath-ccf .f-thanks h3{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:20px 0 0;color:var(--f-ink)}
.ath-ccf .f-thanks p{font-family:Roboto,system-ui,sans-serif;font-size:16px;line-height:1.7;
  color:var(--f-body);margin:12px 0 0;max-width:62ch}
.ath-ccf .f-thanks a{color:var(--f-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.ath-ccf .f-thanks a:hover,.ath-ccf .f-thanks a:focus-visible{color:var(--f-ink);text-decoration-color:var(--f-gold)}
.ath-ccf .f-ref{display:inline-block;margin-top:20px;background:#FFFFFF;border:1px solid var(--f-line);
  border-radius:2px;padding:12px 18px;font-family:Roboto,system-ui,sans-serif;font-size:15px;color:var(--f-body)}
.ath-ccf .f-ref b{font-family:Poppins,sans-serif;font-weight:600;color:var(--f-ink);letter-spacing:.02em}

/* --------------------------------------------------------- CONDITIONAL */
.ath-ccf [data-when]{display:none}
.ath-ccf [data-when].is-shown{display:block}
/* Before the script runs, show nothing conditional rather than everything. */
.ath-ccf .f-form:not(.is-ready) [data-when]{display:none}

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:1023px){ .ath-ccf .f-in{padding:30px 32px 76px} }
@media (max-width:767px){
  .ath-ccf .f-in{padding:26px 24px 60px}
  .ath-ccf .f-grid,.ath-ccf .f-two{grid-template-columns:1fr;gap:0}
  .ath-ccf .f-btn{width:100%;text-align:center}
  /* 16px keeps iOS from zooming the page when a field is focused */
  .ath-ccf input,.ath-ccf select,.ath-ccf textarea{font-size:16px}
  /* a date field is easy to fat finger, so it gets the full width on a phone */
  .ath-ccf input[type=date]{width:100%}
  .ath-ccf .f-thanks{padding:30px 24px}
  .ath-ccf .f-thanks h3{font-size:22px}
}
@media (prefers-reduced-motion:no-preference){
  .ath-ccf [data-when].is-shown{animation:ccf-in .22s ease}
  @keyframes ccf-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}


/* ================================================= JUMP LINK OFFSET =====
   Added in 1.0.2.

   The Contact page links straight to this page's form with
   /consumer-complaint-policy-and-procedure/#complaint-form. Nothing carried
   an offset, so the browser put the top of the target at y=0, underneath the
   fixed header, and the page looked like it had scrolled past the form.

   The header is not one number. It measures 182px sitting at the top of the
   page and 118px once the page has scrolled, because the second bar collapses
   on scroll, and it is different again on a phone. So the real work is done by
   the script, which measures the header AFTER the jump has settled. These
   rules are the fallback for a reader with JavaScript turned off, and they
   deliberately use the taller of the two heights: landing a little low is a
   great deal better than landing underneath the header and seeing nothing. */
:root{--ac-hdr:182px}
#complaint-form,#ath-complaint-form,#ac-errors,#ac-thanks{
  scroll-margin-top:calc(var(--ac-hdr) + 24px);
}
@media (max-width:640px){
  :root{--ac-hdr:262px}
}