/* Site frame additions on top of components.css: Elementor wrappers, account menu, phone menu sheet,
   and the Complianz cookie banner in the design system's look. Reads tokens.css variables only. */

/* Elementor puts the shortcode inside its own location wrapper: make that wrapper the sticky element
   and remove the widget spacing, so the header sits flush at the top of every page. */
.elementor-location-header:has(.dts-header) { position: sticky; top: 0; z-index: 50; }
.admin-bar .elementor-location-header:has(.dts-header) { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header:has(.dts-header) { top: 0; } }
.dts-frame .dts-header { position: static; }
.elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .dts-frame),
.elementor-widget-shortcode:has(.dts-frame) .elementor-shortcode { margin: 0; padding: 0; }
.dts-frame { background: transparent; }

/* Long URLs and words in article text wrap instead of widening the page on phones
   (a pasted investor-relations link made a deep dive 488px wide). Links may break anywhere;
   ordinary text only when a word cannot fit a line on its own. */
.dts :is(p, li, dd, td, th, figcaption, blockquote) { overflow-wrap: break-word; }
.dts :is(p, li, dd, td, th, figcaption, blockquote) a { overflow-wrap: anywhere; }
.dts-frame .dts-footer { margin: 0; }
.dts .dts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* links in the frame: outrank the theme's site-wide link colour (.elementor-kit-N a) */
.dts-frame .dts-nav a { color: var(--dtc-body); }
.dts-frame .dts-nav a:hover { color: var(--dtc-ink); }
.dts-frame .dts-nav a[aria-current="page"] { color: var(--dtc-blue); }
.dts-frame a.dts-btn-primary, .dts-frame a.dts-btn-primary:hover { color: #fff; }
.dts-frame a.dts-btn-quiet, .dts-frame a.dts-btn-quiet:hover { color: var(--dtc-blue); }
.dts-frame .dts-footer a { color: var(--inverse-ink); }
.dts-frame .dts-footer a:hover { color: var(--inverse-link); }

/* buttons in the frame: outrank the theme's site-wide button style (.elementor-kit-N button) */
.dts-frame button.dts-menu-btn { background: var(--dtc-surface); color: var(--dtc-ink); border: 1px solid var(--dtc-line); border-radius: 8px;
  padding: 0; width: 44px; height: 44px; box-shadow: none; }
.dts-frame button.dts-menu-btn:hover, .dts-frame button.dts-menu-btn:focus { background: var(--dtc-soft); color: var(--dtc-ink); }
.dts-frame summary.dts-account { background: var(--dtc-surface); color: var(--dtc-ink); }
.dts-frame .dts-footer-base button { background: none; color: var(--inverse-ink); border: 0; padding: 0; font: inherit; text-transform: none; }

/* phones: brand and menu button only; Log in and Join Premium sit in the menu sheet */
@media (max-width: 560px) {
  .dts-frame .dts-header-in { gap: 12px; }
  .dts-frame .dts-header-actions > a.dts-btn { display: none; }
  .dts-frame .dts-header-actions .dts-account-menu { display: none; }
  .dts-frame .dts-brand { font-size: 1.05rem; }
}

/* account menu: a <details> so it works without JavaScript */
.dts-account-menu { position: relative; }
.dts-account-menu > summary { list-style: none; }
.dts-account-menu > summary::-webkit-details-marker { display: none; }
.dts-account-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--dtc-surface); border: 1px solid var(--dtc-line);
  border-radius: var(--dtc-radius); box-shadow: 0 12px 32px rgba(20,30,50,.12); padding: 6px; display: grid; z-index: 60; }
.dts-frame .dts-account-pop a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--dtc-ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.dts-frame .dts-account-pop a:hover { background: var(--dtc-soft); }

/* phone menu sheet (PhoneMenu design) */
.dts-mobile { position: fixed; inset: 0; z-index: 100000; background: var(--dtc-surface); display: flex; flex-direction: column; font-family: var(--font-sans); }
.dts-mobile[hidden] { display: none; }
.dts-mobile-top { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--dtc-line); }
.dts-mobile .dts-menu-btn { display: inline-grid; place-items: center; }
.dts-mobile-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.dts-frame a.dts-mobile-link { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px;
  text-decoration: none; color: var(--dtc-ink); font-weight: 600; font-size: 1.05rem; }
.dts-frame a.dts-mobile-link:hover { background: var(--dtc-soft); }
.dts-frame a.dts-mobile-link[aria-current="page"] { background: var(--dtc-tint); color: var(--dtc-blue); }
.dts-mobile-sep { height: 1px; background: var(--dtc-line); margin: 10px 16px; }
.dts-mobile-foot { padding: 16px; border-top: 1px solid var(--dtc-line); display: flex; align-items: center; gap: 12px; }
.dts-mobile-foot b { flex: 1 1 auto; color: var(--dtc-ink); }
.dts-mobile-foot a { font-weight: 600; font-size: .9rem; }
.dts-mobile-cta .dts-btn { flex: 1 1 0; }
html.dts-menu-open, html.dts-menu-open body { overflow: hidden; }

/* Complianz cookie banner in the design system's look (CookieConsent component) */
.cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--dtc-surface);
  --cmplz_banner_border_color: var(--dtc-line);
  --cmplz_banner_border_radius: 10px;
  --cmplz_text_color: var(--dtc-body);
  --cmplz_hyperlink_color: var(--dtc-blue);
  --cmplz_category_header_always_active_color: var(--dtc-blue);
  --cmplz_slider_active_color: var(--dtc-blue);
  --cmplz_button_accept_background_color: var(--dtc-blue);
  --cmplz_button_accept_border_color: var(--dtc-blue);
  --cmplz_button_accept_text_color: #fff;
  --cmplz_button_deny_background_color: var(--dtc-tint);
  --cmplz_button_deny_border_color: var(--dtc-tint);
  --cmplz_button_deny_text_color: var(--dtc-blue);
  --cmplz_button_settings_background_color: var(--dtc-surface);
  --cmplz_button_settings_border_color: var(--dtc-line);
  --cmplz_button_settings_text_color: var(--dtc-ink);
  --cmplz_button_border_radius: 8px;
  font-family: var(--font-sans);
  box-shadow: 0 12px 32px rgba(20,30,50,.16);
}
.cmplz-cookiebanner .cmplz-title { color: var(--dtc-ink); font-weight: 700; }
.cmplz-cookiebanner .cmplz-btn { font-weight: 700; min-height: 44px; }
/* phones: Complianz's three-column header grid made the banner 333px wide on a 320px screen.
   Its buttons keep Complianz's own stacked layout: its selectors outrank ours, and a half-applied
   flex-wrap pushed "View preferences" off screen (0.5.3). */
@media (max-width: 600px) {
  .cmplz-cookiebanner.cmplz-cookiebanner { width: auto; max-width: 100vw; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 12px 16px; }
}