/* Cookie policy page (/cookie-policy/).
   Styles the output of WPConsent's cookie-policy shortcode so it reads as part of
   trustetc.com rather than as plugin default output.

   Loaded only on this page, via is_page(['cookie-policy']) in functions/scripts.php,
   so selectors here need no page scoping of their own.

   Two things worth knowing before editing.

   1. The plugin's own stylesheet (wpconsent-premium/build/cookie-policy.css.css) wraps
      every rule in :where(), which has ZERO specificity. Anything here beats it on a
      single class. Nothing in this file needs !important, and nothing added later
      should either.

   2. This markup is generated. Do not rely on element order or on wrapper elements
      existing - there is no per-table wrapper div, which is why the mobile scroll
      treatment below is applied to the <table> itself.

   Colour values are the Equity Trust system tokens. They are written literally because
   assets/css/design-tokens.css is scoped to the Crypto IRA family and is not loaded
   here; it also carries a global box-sizing reset that this page has never had.
   Source of truth for the values: docs/figma-handoff-guidelines.md.
     --color-navy      #002F5F   headings
     --color-navy-mid  #0C4D80   table header band (already applied by blocks.css)
     --color-body      #4E5056   body copy
     --color-border    #E7E7E7   rules and table borders
     --color-bg-secondary #F8F9FB zebra striping
   Link blue #1C74B5 is taken from the live /privacy-policy/ page, so the two policy
   pages agree. */


/* ---------------------------------------------------------------------------
   1. Layout

   The generated content sits directly inside .blockWrapper with no .container,
   so by default it runs edge to edge at every width - measured at 1440px wide
   with 0 padding on a 1440px viewport. The rule below gives it the same measure
   and gutter as .container (reflex.css: max-width 1420px, 30px gutter).

   If the page content is ever wrapped in <div class="container"> in wp-admin,
   this nests harmlessly rather than fighting it - the inner max-width equals the
   outer one, so nothing changes.
   --------------------------------------------------------------------------- */

/* The container treatment goes on .blockWrapper itself, not on its children. Putting
   it on the children would mean the intro paragraph carried both the centring and its
   own reading measure, which centres a narrow column against left-aligned headings. */
.blockWrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1420px;
  padding-left: 30px;
  padding-right: 30px;
}

.blockWrapper > .wpconsent-cookie-policy {
  margin-bottom: 64px;
}


/* ---------------------------------------------------------------------------
   2. Intro copy

   reflex.css sets h1-h6 to #4e5056 globally and the page inherits pure black for
   body text, so both need correcting to the system tokens.
   --------------------------------------------------------------------------- */

.blockWrapper > .wp-block-paragraph {
  color: #4E5056;
  font-size: 1rem;
  line-height: 1.65;
  margin: 32px 0 0;
  max-width: 90ch;
}


/* ---------------------------------------------------------------------------
   3. Category and service headings

   Categories (h2) are the top level - Essential, Statistics, Marketing. Services
   (h3) sit inside them. A hairline rule above each category makes that hierarchy
   readable on a long page where the tables otherwise run together.
   --------------------------------------------------------------------------- */

.wpconsent-cookie-policy .wpconsent-cookie-category-name {
  border-top: 1px solid #E7E7E7;
  color: #002F5F;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 56px 0 8px;
  padding-top: 32px;
}

/* No rule above the first category - it would sit directly under the intro
   paragraph and read as a divider for the intro rather than for the section. */
.wpconsent-cookie-policy .wpconsent-cookie-category-name:first-child {
  border-top: 0;
  margin-top: 24px;
  padding-top: 0;
}

.wpconsent-cookie-policy .wpconsent-cookie-service-name {
  color: #0C4D80;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 36px 0 6px;
}

.wpconsent-cookie-policy .wpconsent-cookie-category-description,
.wpconsent-cookie-policy .wpconsent-cookie-service-description {
  color: #4E5056;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 90ch;
}


/* ---------------------------------------------------------------------------
   4. Links

   The page currently renders links in the WordPress default purple (#6A1EF5),
   which is off-brand. The vendor "Learn more" links are bare <a> siblings of the
   description with no wrapper, so they are given block flow and their own spacing.
   --------------------------------------------------------------------------- */

.wpconsent-cookie-policy a,
.blockWrapper > .wp-block-paragraph a {
  color: #1C74B5;
  text-decoration: none;
}

.wpconsent-cookie-policy a:hover,
.blockWrapper > .wp-block-paragraph a:hover {
  text-decoration: underline;
}

.wpconsent-cookie-policy a:focus-visible,
.blockWrapper > .wp-block-paragraph a:focus-visible {
  border-radius: 2px;
  outline: 2px solid #1C74B5;
  outline-offset: 2px;
}

/* The vendor "Learn more" link that follows each service description. */
.wpconsent-cookie-policy .wpconsent-cookie-service-description + a {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 16px;
}


/* ---------------------------------------------------------------------------
   5. Tables

   blocks.css already gives every table on the site a #0c4d80 header band with
   white text, and that is the site-wide convention - it is kept, not replaced.
   What is added here is the border, spacing, striping and column rhythm the
   generic rule does not provide.
   --------------------------------------------------------------------------- */

.wpconsent-cookie-policy-table {
  border: 1px solid #E7E7E7;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9375rem;
  margin: 0 0 32px;
  width: 100%;
}

.wpconsent-cookie-policy-table thead th {
  background-color: #0C4D80;
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.4;
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

.wpconsent-cookie-policy-table td {
  border-top: 1px solid #E7E7E7;
  color: #4E5056;
  line-height: 1.55;
  padding: 14px 16px;
  vertical-align: top;
}

/* Column rhythm: cookie name and duration are short and predictable, the
   description takes the remainder. Without this the browser gives the long
   description column too little room on wide screens. */
.wpconsent-cookie-policy-table th:first-child,
.wpconsent-cookie-policy-table td:first-child {
  width: 22%;
}

.wpconsent-cookie-policy-table th:last-child,
.wpconsent-cookie-policy-table td:last-child {
  white-space: nowrap;
  width: 12%;
}

/* Cookie names are identifiers, not prose. A mono face makes underscores and
   case boundaries legible, and break-word stops long ones widening the column. */
.wpconsent-cookie-policy-table td:first-child {
  color: #2C2D31;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wpconsent-cookie-policy-table tbody tr:nth-child(odd) td {
  background-color: #F8F9FB;
}

.wpconsent-cookie-policy-table tbody tr:hover td {
  background-color: #EEF3F8;
}


/* ---------------------------------------------------------------------------
   6. Narrow viewports

   Three columns with long descriptions cannot fit a phone. Down to 768px the
   table is simply tightened. Below 600px it becomes a horizontal scroll area.

   The scroll treatment is applied to the <table> element itself because the
   generated markup has no per-table wrapper to put it on. display:block turns
   the table into the scroll container while the rows keep their table layout.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .blockWrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .wpconsent-cookie-policy .wpconsent-cookie-category-name {
    font-size: 1.5rem;
    margin-top: 44px;
    padding-top: 28px;
  }

  .wpconsent-cookie-policy .wpconsent-cookie-service-name {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 767px) {
  .wpconsent-cookie-policy-table {
    font-size: 0.875rem;
  }

  .wpconsent-cookie-policy-table thead th,
  .wpconsent-cookie-policy-table td {
    padding: 10px 12px;
  }
}

@media screen and (max-width: 600px) {
  .wpconsent-cookie-policy-table {
    -webkit-overflow-scrolling: touch;
    display: block;
    overflow-x: auto;
    white-space: normal;
  }

  /* Percentage widths are meaningless once the table scrolls - swap to floors
     that keep the description column readable rather than crushed. */
  .wpconsent-cookie-policy-table th:first-child,
  .wpconsent-cookie-policy-table td:first-child {
    min-width: 140px;
    width: auto;
  }

  .wpconsent-cookie-policy-table th:nth-child(2),
  .wpconsent-cookie-policy-table td:nth-child(2) {
    min-width: 280px;
  }

  .wpconsent-cookie-policy-table th:last-child,
  .wpconsent-cookie-policy-table td:last-child {
    min-width: 90px;
    width: auto;
  }
}


/* ---------------------------------------------------------------------------
   7. Print

   A cookie policy is a document people are asked to produce in a compliance
   review, so it should print as a document: no dark ink flood on the header
   band, and no rows split across a page break.
   --------------------------------------------------------------------------- */

@media print {
  .blockWrapper {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .wpconsent-cookie-policy .wpconsent-cookie-category-name,
  .wpconsent-cookie-policy .wpconsent-cookie-service-name {
    break-after: avoid;
    page-break-after: avoid;
  }

  .wpconsent-cookie-policy-table {
    font-size: 10pt;
  }

  .wpconsent-cookie-policy-table thead th {
    background-color: transparent;
    border-bottom: 2px solid #000000;
    color: #000000;
  }

  .wpconsent-cookie-policy-table tbody tr:nth-child(odd) td {
    background-color: transparent;
  }

  .wpconsent-cookie-policy-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .wpconsent-cookie-policy a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}