/* The cookie bar, and the footer's control that reopens it.
   The bar is drawn by footer.php and its choice is kept by the behaviour
   runtime's consent behaviour, so this sheet carries only what the bar looks
   like: where it sits, how the copy and the three buttons are laid out, and the
   one checkbox that is the advertising category. The runtime's own sheet keeps
   a hidden element hidden, so nothing here has to hide the bar itself.

   It is read on every page of the site, in every language, so every rule is
   written in logical properties: Arabic reads it right to left with no mirror
   in rtl.css. */

.cookie-bar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  /* Over the phone quick bar's drawer (65) and the quick actions (55): a
     visitor who opens the menu before answering can still answer. */
  z-index:80;
  border-block-start:1px solid var(--color-line);
  background:var(--color-surface);
  box-shadow:0 -10px 30px rgba(18,48,74,.14);
}

.cookie-bar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2) var(--space-3);
  padding:var(--space-2) var(--gutter);
  font-size:14px;
}

.cookie-bar__copy{flex:1 1 360px;min-width:0}

.cookie-bar__title{
  margin:0;
  color:var(--color-heading);
  font-size:15px;
  font-weight:700;
}

.cookie-bar__note{
  margin:6px 0 0;
  max-width:74ch;
  color:var(--color-muted);
}

.cookie-bar__choice{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-block-start:10px;
  color:var(--color-text);
  cursor:pointer;
}

.cookie-bar__choice input{
  flex:none;
  inline-size:18px;
  block-size:18px;
  margin-block-start:2px;
  accent-color:var(--color-accent);
}

.cookie-bar__more{margin:6px 0 0}
.cookie-bar__more a{color:var(--color-accent)}

.cookie-bar__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

/* The bar carries three actions rather than the page's one, so they are one
   size down from a page button: the bar is a notice, not the call to action. */
.cookie-bar__actions .btn{
  min-height:44px;
  padding:10px 18px;
  font-size:14px;
}

/* A phone and a tablet read the quick actions as the bar along the bottom edge,
   and at those widths the consent notice is the compact strip below: one tight
   block, the advertising category and the policy link on one line, and the three
   answers across the width. The whole notice stays on the strip — the category,
   the explanation, the policy link and all three buttons — because a notice the
   visitor cannot read is not a notice.

   The strip is sticky rather than fixed. It is the last element in the body, so
   it reserves its own height at the foot of the document instead of covering the
   page with it: the page's content ends above the strip, which is why the
   inquiry form and its Send Inquiry button can always be scrolled clear of it.
   That is the same space the page already keeps for the quick bar, and the strip
   sits above that bar rather than over it.

   Only the notice's own controls take a tap. The strip's background belongs to
   the page underneath: a tap aimed at a control the strip happens to be over
   still reaches it, so the notice can never swallow a submission the visitor
   believes they sent. */
@media (max-width:1100px){
  .cookie-bar{
    position:sticky;
    inset-inline:auto;
    inset-block-end:var(--quickbar-height);
    border-radius:0;
    pointer-events:none;
  }

  .cookie-bar a,
  .cookie-bar button,
  .cookie-bar input,
  .cookie-bar label{pointer-events:auto}

  .cookie-bar__inner{
    padding:10px var(--gutter) 12px;
    gap:8px var(--space-2);
    font-size:13px;
  }

  .cookie-bar__copy{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:2px 12px;
  }

  .cookie-bar__title{
    grid-column:1 / -1;
    font-size:13px;
  }

  .cookie-bar__note{
    grid-column:1 / -1;
    margin-block-start:2px;
    max-width:none;
    font-size:12px;
    line-height:1.35;
  }

  .cookie-bar__choice{
    grid-column:1;
    margin-block-start:4px;
    gap:6px;
    font-size:12px;
  }

  .cookie-bar__choice input{
    inline-size:16px;
    block-size:16px;
  }

  .cookie-bar__more{
    grid-column:2;
    margin:0;
    font-size:12px;
  }

  .cookie-bar__actions{
    inline-size:100%;
    flex-wrap:wrap;
    gap:8px;
  }

  .cookie-bar__actions .btn{
    flex:1 1 auto;
    min-height:44px;
    padding:8px 12px;
    font-size:12.5px;
  }

  /* The quick bar steps aside while an inquiry form's own submit button is on
     screen; the strip takes that place at the bottom edge rather than leaving a
     bar's worth of empty space under itself. */
  body:has(.quick-actions.is-aside) .cookie-bar{inset-block-end:env(safe-area-inset-bottom,0px)}
}

/* Above the phone the quick actions keep to the bottom corner, so the bar
   becomes a panel in the other corner and the site's own action stays
   reachable while the choice is outstanding. */
@media (min-width:1101px){
  .cookie-bar{
    inset-inline-start:var(--gutter);
    inset-inline-end:auto;
    inset-block-end:var(--space-3);
    max-inline-size:min(640px,calc(100vw - 2 * var(--gutter)));
    border:1px solid var(--color-line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-panel);
  }
}

/* The footer's control: it reads as one of the two links beside it, and is a
   button only because it opens the bar instead of a page. */
.footer-bottom__consent{
  padding:0;
  border:0;
  background:none;
  color:#dbe5ed;
  font:inherit;
  cursor:pointer;
}

.footer-bottom__consent:hover{text-decoration:underline}
.footer-bottom__consent:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}