/* Cookies — consent banner and blocked-embed placeholder. Front-end
   only, so nothing here can lean on the admin stylesheets. */

.startertk-cookies {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 999999;
  display: flex;
  justify-content: center;
}

.startertk-cookies[hidden] {
  display: none;
}

.startertk-cookies.is-left {
  justify-content: flex-start;
}

.startertk-cookies.is-right {
  justify-content: flex-end;
}

.startertk-cookies-box {
  width: 100%;
  max-width: 560px;
  /* vh first as the fallback, then dvh: on a phone, 100vh is the height
     the page would have with the browser bars hidden, so the box grows
     taller than what is actually on screen and the buttons end up under
     the URL bar. dvh follows the bars as they come and go. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 24px;
  background: var(--startertk-cookies-background, #fff);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  color: var(--startertk-cookies-text, #50575e);
  font-size: 14px;
  line-height: 1.55;
  border-radius: var(--startertk-cookies-radius, 12px);
}

.startertk-cookies-box h2 {
  margin: 0 0 10px;
  color: var(--startertk-cookies-title, #1d2327);
  font-size: var(--startertk-cookies-title-size, 17px);
  font-weight: 600;
  line-height: 1.3;
}

.startertk-cookies-message p {
  margin: 0 0 10px;
  color: var(--startertk-cookies-text, #50575e);
  font-size: var(--startertk-cookies-text-size, 14px);
  line-height: 1.55;
}

.startertk-cookies-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  padding-bottom: 10px;
  font-size: var(--startertk-cookies-link-size, 13px);
}

/* Qualified by the box, and the underline forced: themes routinely strip
   it from links inside content, and a link that looks like plain text is
   not a link. */
.startertk-cookies-box .startertk-cookies-links a {
  color: var(--startertk-cookies-link-color, #50575e);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.startertk-cookies-box .startertk-cookies-links a:hover,
.startertk-cookies-box .startertk-cookies-links a:focus {
  color: var(--startertk-cookies-link-hover, #1d2327);
  text-decoration: underline;
}

/* ---------- Per-category detail ---------- */

.startertk-cookies-details {
  margin-top: 28px;
  padding-top: 31px;
  border-top: 1px solid #e5e7eb;
}

.startertk-cookies-details[hidden] {
  display: none;
}

.startertk-cookies-category + .startertk-cookies-category {
  margin-top: 14px;
}

.startertk-cookies-category-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--startertk-cookies-category-title, #1d2327);
  font-weight: 500;
  cursor: pointer;
}

/* ---------- Category switch ---------- */

.startertk-cookies-switch {
  position: relative;
  display: inline-block;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
}

.startertk-cookies-switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.startertk-cookies-switch input[disabled] {
  cursor: default;
}

.startertk-cookies-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d5d8dc;
  transition: background 0.2s ease;
  pointer-events: none;
}

.startertk-cookies-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.startertk-cookies-switch input:checked + .startertk-cookies-switch-track {
  background: var(--startertk-cookies-toggle, #1d2327);
}

.startertk-cookies-switch input:checked + .startertk-cookies-switch-track::after {
  transform: translateX(14px);
}

.startertk-cookies-switch input[disabled] + .startertk-cookies-switch-track {
  opacity: 0.55;
}

.startertk-cookies-category-head em {
  color: #8c8f94;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.startertk-cookies-category p {
  margin: 4px 0 0 42px;
  color: var(--startertk-cookies-service-text, #50575e);
  font-size: var(--startertk-cookies-service-text-size, 13px);
}

/* ---------- Actions ---------- */

.startertk-cookies-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.startertk-cookies-btn {
  flex: 1 1 auto;
  padding: var(--startertk-cookies-button-padding-y, 10px) var(--startertk-cookies-button-padding-x, 18px);
  border: 1px solid var(--startertk-cookies-button, #1d2327);
  border-radius: var(--startertk-cookies-button-radius, 6px);
  background: var(--startertk-cookies-button, #1d2327);
  color: var(--startertk-cookies-button-text, #fff);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Stated rather than left to the browser default: a theme that aligns
   its buttons left — on the tag, or on a wrapper the banner sits inside
   — would otherwise push the label to one side. Qualified by the tag
   here too, so a rule like "footer button" cannot outweigh it. */
button.startertk-cookies-btn,
.startertk-cookies-btn {
  text-align: center;
}

/* Qualified by the tag, and the whole border restated: themes set
   "button:hover { border: none }" at the same specificity as a bare
   class, and whichever sheet loads last would win — the border vanished
   on hover. */
button.startertk-cookies-btn:hover,
button.startertk-cookies-btn:focus {
  background: var(--startertk-cookies-button-hover, #32373c);
  border: 1px solid var(--startertk-cookies-button-hover, #32373c);
  color: var(--startertk-cookies-button-hover-text, var(--startertk-cookies-button-text, #fff));
}

button.startertk-cookies-btn.is-ghost {
  background: var(--startertk-cookies-background, #fff);
  border: 1px solid var(--startertk-cookies-ghost-border, #d5d8dc);
  color: #1d2327;
}

button.startertk-cookies-btn.is-ghost:hover,
button.startertk-cookies-btn.is-ghost:focus {
  border: 1px solid var(--startertk-cookies-ghost-border-hover, #8c8f94);
  background: var(--startertk-cookies-background, #fff);
  color: #1d2327;
}

.startertk-cookies-btn[hidden] {
  display: none;
}

/* Inherits the surrounding text and stays there: themes colour their
   footer links on hover, and a consent link turning brand-yellow reads
   like a promotion. The underline is the only thing that moves. */
/* Only the line the plugin drops in itself carries this class. A link
   placed by the theme, through the shortcode, is left alone: it sits
   among the theme's own footer links and has to look like them, which it
   already does by being an anchor. */
a.startertk-cookies-reopen,
a.startertk-cookies-reopen:hover,
a.startertk-cookies-reopen:focus,
a.startertk-cookies-reopen:active {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* The underline is drawn as a pseudo-element rather than with
   text-decoration: the theme sets its own decoration on hover, and the
   two fought each other — the line jumped on every pass. This one owns
   its own layer and takes no space, so nothing moves. */
a.startertk-cookies-reopen {
  position: relative;
}

a.startertk-cookies-reopen::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}

a.startertk-cookies-reopen:hover::after,
a.startertk-cookies-reopen:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Blocked embed ---------- */

.startertk-cookies-embed {
  position: relative;
  min-height: 180px;
  border-radius: 8px;
  background: #f0f0f1;
  overflow: hidden;
}

.startertk-cookies-embed-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: #50575e;
  font-size: 13px;
}

.startertk-cookies-embed.is-allowed .startertk-cookies-embed-veil {
  display: none;
}

.startertk-cookies-embed-veil p {
  margin: 0;
  max-width: 420px;
}

.startertk-cookies-embed-veil button {
  padding: 8px 16px;
  border: 1px solid var(--startertk-cookies-button, #1d2327);
  border-radius: var(--startertk-cookies-button-radius, 6px);
  background: var(--startertk-cookies-button, #1d2327);
  color: var(--startertk-cookies-button-text, #fff);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 600px) {
  .startertk-cookies {
    right: 10px;
    /* Clears the home indicator on phones that have one; resolves to
       plain 10px everywhere else. */
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
  }

  .startertk-cookies-box {
    padding: 18px;
  }

  .startertk-cookies-btn {
    flex-basis: 100%;
  }
}

.startertk-cookies-footer {
  margin: 0;
  padding: 12px 20px;
  text-align: center;
  font-size: 13px;
}

/* ---------- Public policy page ---------- */

.startertk-cookies-policy-category {
  padding: 2rem 0;
}

.startertk-cookies-policy-category + .startertk-cookies-policy-category {
  border-top: 1px solid #e5e7eb;
}

.startertk-cookies-policy h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.11rem, 4vw, 1.4375rem);
  line-height: 1.25;
}

.startertk-cookies-policy p {
  margin: 0;
}

/* The service list reads as a small table: no bullets, hairline rows in
   a rounded frame, and the host names in monospace so a domain is
   scannable character by character. */
.startertk-cookies-policy ul {
  margin: 1.25rem 0 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.startertk-cookies-policy li {
  padding: 0.7rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
}

.startertk-cookies-policy li:nth-child(odd) {
  background: rgba(0, 0, 0, 0.025);
}

.startertk-cookies-policy li + li {
  border-top: 1px solid #e5e7eb;
}

/* One switch per service on the policy page: consent can be given to
   one provider and refused to another inside the same category. */
.startertk-cookies-policy li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.startertk-cookies-policy .startertk-cookies-switch {
  flex: 0 0 34px;
}

.startertk-cookies-policy .startertk-cookies-switch input[disabled] + .startertk-cookies-switch-track {
  opacity: 0.55;
}

.startertk-cookies-policy-actions {
  margin-top: 2rem;
}

/* Edit mode on the policy page: the frames darken so the difference
   between reading the list and changing it is visible at a glance. */
.startertk-cookies-policy.is-editing ul,
.startertk-cookies-policy.is-editing li + li {
  border-color: #1d2327;
}