/* ==========================================================================
   Cookie consent

   One surface: .se-consent, a persistent region rather than a modal. It sits
   above the footer and never blocks the page, because a visitor is not required
   to act before continuing. Marking it aria-modal would hide the page behind it
   while promising nothing, so it is not a dialog.

   Brand colours only. Nothing here introduces a new colour.

   What this file used to also carry
   ---------------------------------
   The Hire a Developer promotion and the exit-intent feedback modal, with their
   own dialog styles (.se-modal and .se-exitform), an .se-dialog-open scroll lock
   and the focus-trap affordances that went with them. Those rules are gone with
   the features.

   Removing them also removes a latent collision. components.css already styles
   .se-modal__panel, .se-modal__close and .se-modal__title for the portfolio
   project's detail dialog, and consent.css is enqueued after it, so this sheet's
   rules were overriding that dialog's panel width, padding, background and
   shadow with values meant for a marketing popup. The portfolio dialog now
   renders from its own stylesheet alone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cookie consent
   -------------------------------------------------------------------------- */
.se-consent{
  position:fixed;
  inset:auto 0 0 0;
  z-index:120;
  background:var(--se-navy);
  color:#fff;
  border-top:3px solid var(--se-orange);
  box-shadow:0 -8px 32px rgba(6,20,84,.22);
  transform:translateY(100%);
  transition:transform .3s var(--se-ease);
}
.se-consent.is-visible{transform:translateY(0)}
/* No transition before the class lands, or it slides in on every page load
   before the script decides whether it should be visible at all. */
.se-consent[hidden]{display:none}
.se-consent:not(.is-visible){pointer-events:none}

.se-consent__inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px 34px;
  padding-block:20px;
}
.se-consent__copy{flex:1 1 380px;min-width:0}
.se-consent__title{
  margin:0 0 6px;
  font-family:var(--se-font-head);
  font-size:1.0625rem;font-weight:800;
  color:#fff;
}
.se-consent__desc{
  margin:0;
  font-size:.875rem;line-height:1.6;
  color:#C7D2E8;
  max-width:70ch;
}
.se-consent__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  flex:none;
}
.se-consent.is-busy .se-btn{opacity:.6;pointer-events:none}
.se-consent[data-error] .se-consent__desc{color:#ffb27a}

/* --------------------------------------------------------------------------
   Buttons

   The three base button shapes already exist on the site, so the banner reuses
   them rather than defining a fourth. Only the arrangement is local here.

   These rules were unscoped, which was a site-wide defect rather than a banner
   style. consent.css is enqueued after main.css and hero.css, so an equal-
   specificity `.se-btn` here wins over the `.se-btn` in main.css — meaning every
   button on every page was rendering at this sheet's 0.875rem and 0.7em/1.25em
   padding instead of the site's own 1.1875rem. Measured on the hero that was a
   14px label in a 52px-tall, 159px-wide button where the design asked for 15px
   and 30px of horizontal padding.

   It also leaked two variants that only make sense on a dark panel:
   `.se-btn--ghost` paints white text on a transparent fill, which is invisible on
   a white section, and `.se-btn--quiet` dims a label to 72% opacity.

   Scoping to the banner keeps the smaller button, which is right for a compact
   strip, and hands every other button on the site back to main.css.

   The `.se-btn` entry in the reduced-motion block below is deliberately left
   unscoped: disabling transitions on every button is correct everywhere.
   -------------------------------------------------------------------------- */
.se-consent .se-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--se-font-head);
  font-size:.875rem;font-weight:700;
  padding:.7em 1.25em;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s var(--se-ease),color .15s var(--se-ease),border-color .15s var(--se-ease);
}
.se-consent .se-btn--primary{background:var(--se-orange);color:#fff}
.se-consent .se-btn--primary:hover{background:#e2560f;color:#fff}
/* On the navy banner a ghost button is a white outline rather than a grey one,
   or it disappears. */
.se-consent .se-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.se-consent .se-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.se-consent .se-btn--quiet{
  background:transparent;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
  padding:.7em .5em;
}
.se-consent .se-btn--quiet:hover{opacity:.72}
/*
 * The focus ring, scoped for the same reason as the button above.
 *
 * Unscoped it replaced main.css's global 3px orange ring with a 2px one on every
 * button on the site, and it also out-ranked hero.css's own 3px rule because
 * consent.css is loaded later. Keyboard focus was still visible, so no assertion
 * caught it; the ring was just thinner than the design specifies everywhere.
 */
.se-consent .se-btn:focus-visible{
  outline:2px solid #ffb27a;outline-offset:2px;border-radius:999px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:820px){
  .se-consent__inner{flex-direction:column;align-items:flex-start;padding-block:16px}
  .se-consent__copy{flex:1 1 auto}
  .se-consent__actions{width:100%}
  .se-consent__actions .se-btn{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   Reduced motion

   The slide is decorative. With the preference set it is removed rather than
   shortened, because a 100ms transition is still a movement the visitor asked
   not to see.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .se-consent,
  .se-btn{transition:none}
}