/* Cookie consent banner — Evan & Natalia Simon Photography
 *
 * ⛔ REJECT AND ACCEPT ARE THE SAME BUTTON, DRAWN THE SAME WAY. The AEPD's
 * cookie guide (edition of May 2024) requires the refusal to be offered
 * "al mismo tiempo, al mismo nivel y con la misma visibilidad" as the
 * acceptance — same layer, same prominence, same number of clicks. So there is
 * exactly one .cc-btn rule and both buttons use it. Do not give either one a
 * fill, a heavier weight or a larger size: that is the single change that turns
 * a lawful banner into an unlawful one.
 *
 * ⛔ NO BOLD ANYWHERE. The design system caps weight at 400 and earns hierarchy
 * from size, tracking, case and italic — see assets/engraving2.css.
 *
 * Two layouts live here. `.cc--bar` is a full-width strip along the bottom;
 * `.cc--card` is a small card in the bottom-left corner. Both are drawn from
 * the same palette and the same button rule.
 */

.cc {
  position: fixed;
  z-index: 9999;
  background: #E8E8E0;                      /* --paper */
  color: #2E3842;                           /* --ink-black */
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-weight: 400;
  box-shadow: 0 -2px 24px rgba(46,56,66,0.14);
}

.cc[hidden] { display: none; }

.cc p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.cc p:last-child { margin-bottom: 0; }

.cc-title {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3D5266;                           /* --seal-blue */
}

.cc a { color: #3D5266; text-decoration: none; border-bottom: 1px solid rgba(61,82,102,0.45); }
.cc a:hover { border-bottom-color: #3D5266; }

/* ⛔ ONE RULE FOR BOTH ANSWERS. See the header above. */
.cc-btn {
  flex: 1 1 0;
  min-width: 132px;
  padding: 11px 18px;
  background: transparent;
  border: 1px solid #3D5266;
  color: #3D5266;
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.cc-btn:hover { background: #3D5266; color: #E8E8E0; }
.cc-btn:focus-visible { outline: 2px solid #3D5266; outline-offset: 3px; }

.cc-acts { display: flex; gap: 10px; }

/* ── A: the bar ─────────────────────────────────────────────────────── */
.cc--bar {
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(61,82,102,0.35);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.cc--bar .cc-body { flex: 1 1 auto; max-width: 76ch; }
.cc--bar .cc-acts { flex: 0 0 auto; }

/* ── B: the card ────────────────────────────────────────────────────── */
.cc--card {
  left: 24px; bottom: 24px;
  width: min(380px, calc(100vw - 48px));
  border: 1px solid rgba(61,82,102,0.35);
  padding: 22px 24px;
}
.cc--card .cc-acts { margin-top: 16px; }

/* ── the phone. Both layouts become the same full-width sheet ───────── */
@media (max-width: 820px) {
  .cc--bar, .cc--card {
    left: 0; right: 0; bottom: 0;
    width: auto;
    display: block;
    border: 0;
    border-top: 1px solid rgba(61,82,102,0.35);
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  }
  .cc-acts { margin-top: 14px; }
  .cc-btn { min-width: 0; }
}