/* ==========================================================================
   assets/css/content-area.css

   The styling vocabulary for admin-authored pages: Customer Care, FAQ,
   Privacy Policy, Accessibility Statement and whatever follows them.

   LOAD ORDER IS NOT OPTIONAL. This file must come after fonts.css and
   site.css, in that order, exactly as partials/_top_assets.cfm links them.
   Nothing here declares a font family: the body face, the type scale and the
   palette are site.css's, and that is deliberate - a content page that
   carried its own font stack would drift away from the rest of the site the
   first time site.css changed. The visible symptom of getting this wrong is
   the whole page falling back to the browser default serif.

   THERE IS NO CSS BOX IN THE ADMIN. Everything an author can reach is in this
   file, which means two things. Bare HTML has to look right on its own -
   somebody pasting a policy out of a document should get a good page without
   knowing a single class name - and the named classes have to cover the jobs
   these pages actually have. Both halves are below.

   THE SCALE IS THE SITE'S OWN. Body copy is 14px, the same as site.css sets
   everywhere else; titles are 24px and section headings 18px. An earlier
   version ran the body at 16px on the reasoning that a long policy wants a
   reading size - the decision since is that these pages, the 404 and the
   error page all sit on one scale, and it is the site's.

   WHY UNDERLINED LINKS
   site.css sets a { text-decoration: none } globally. In a paragraph of prose
   that leaves a link identifiable by colour alone, which fails for anyone who
   cannot separate the red from the black. Underlines come back inside here.

   Colours, rules and the type stack are site.css's own: text #333333,
   secondary #565656 and #767676, links #910d10, rules #e0ddd6. Buttons are
   the storefront's too - the same #910d10 that .btn-add-to-cart uses on the
   product page, so a call to action written here and a Add to Basket button
   are visibly the same control.
   ========================================================================== */


/* ==========================================================================
   0. THE PAGE TITLE

   site.css sets .page-title to 36px for the whole site; the pages that load
   this sheet - the content pages, the 404 and the error page - run it at
   24px. Scoped under .content-panel so it out-specifies site.css rather than
   beating it on load order, and so it cannot reach a .page-title on a page
   that does not use this sheet.
   ========================================================================== */

.content-panel .page-title {
  font-size: 24px;
}

/* ==========================================================================
   1. THE WRAPPER

   The endpoint emits <div class="ca-body">. Authors never write it.
   ========================================================================== */

.ca-body {
  /* site.css insets .page-title, .page-intro and .card-grid by 15px, because
     the editorial pages nest their content one column deep. The body has to
     take the same inset or the prose sits 15px to the left of the heading
     above it. box-sizing is border-box site-wide, so this comes out of the
     68ch rather than adding to it. */
  padding-left: 15px;
  padding-right: 15px;

  max-width: calc(68ch + 30px);
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

/* A page that needs the full column - a long table, a two-column block -
   opts out per element rather than the whole page opting out. */
.ca-body .ca-wide {
  max-width: none;
}


/* ==========================================================================
   2. BARE ELEMENTS

   No class required. This is what a pasted document gets.
   ========================================================================== */

/* h1 belongs to the template, which prints the page name in .page-title.
   Authors start at h2, and these sit under a 36px title without competing. */
.ca-body h2 {
  margin: 30px 0 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: #910d10;
}

.ca-body h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #333333;
}

.ca-body h4 {
  margin: 22px 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #565656;
}

/* The first heading should not push the block away from the page title. */
.ca-body > :first-child {
  margin-top: 0;
}

.ca-body p {
  margin: 0 0 16px;
}

.ca-body a {
  color: #910d10;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ca-body a:hover,
.ca-body a:focus {
  color: #7a0b0d;
  text-decoration: underline;
}

.ca-body strong,
.ca-body b {
  font-weight: 700;
}

.ca-body em,
.ca-body i {
  font-style: italic;
}

.ca-body ul,
.ca-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.ca-body li {
  margin-bottom: 5px;
}

.ca-body li > ul,
.ca-body li > ol {
  margin-top: 7px;
  margin-bottom: 0;
}

.ca-body blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid #e0ddd6;
  color: #565656;
}

.ca-body hr {
  height: 0;
  margin: 30px 0;
  border: 0;
  border-top: 1px solid #e0ddd6;
}

.ca-body small {
  font-size: 12px;
  color: #767676;
}

.ca-body code {
  padding: 1px 5px;
  border-radius: 3px;
  background-color: #f3f1ec;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  color: #565656;
}

.ca-body img {
  max-width: 100%;
  height: auto;
}

.ca-body figure {
  margin: 22px 0;
}

.ca-body figcaption {
  margin-top: 7px;
  font-size: 13px;
  color: #767676;
}

/* A table with no class still has to be readable, and still must not push
   the page sideways on a phone. */
.ca-body table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14px;
}

.ca-body th,
.ca-body td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e0ddd6;
}

.ca-body th {
  font-weight: 700;
  color: #333333;
  border-bottom-color: #d5d5d5;
}

/* Terms and their meanings - what a privacy policy is mostly made of. */
.ca-body dl {
  margin: 0 0 18px;
}

.ca-body dt {
  margin-top: 14px;
  font-weight: 700;
}

.ca-body dd {
  margin: 4px 0 0 0;
  color: #565656;
}

/* Native disclosure. No script, works with the keyboard, and prints open. */
.ca-body details {
  margin-bottom: 10px;
}

.ca-body summary {
  cursor: pointer;
  font-weight: 600;
}

.ca-body summary:focus-visible {
  outline: 2px solid #910d10;
  outline-offset: 2px;
}


/* ==========================================================================
   3. THE NAMED VOCABULARY

   Twenty-three classes. Everything an author can reach for.
   ========================================================================== */

/* --- Structure ----------------------------------------------------------- */

/* The opening paragraph. One per page. */
.ca-body .ca-lede {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.55;
  color: #565656;
}

/* "Last updated 30 August 2026". Sits under the title, above a rule. */
.ca-body .ca-meta {
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0ddd6;
  font-size: 13px;
  color: #767676;
}

/* A major part of a long document. The rule does the separating so authors
   do not have to remember to type <hr> between every section. */
.ca-body .ca-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #e0ddd6;
}

.ca-body .ca-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The heading that opens a section must not bring its own 30px on top of the
   section's padding - the two stack (margins do not collapse through
   padding), which is what put 61px of air between the rule and the heading
   and made everything below it look adrift. */
.ca-body .ca-section > :first-child {
  margin-top: 0;
}

/* --- Callouts ------------------------------------------------------------
   Three, deliberately. A fourth would mean nobody remembers which is which. */

.ca-body .ca-note,
.ca-body .ca-important,
.ca-body .ca-tip {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 3px solid #d5d5d5;
  background-color: #f7f6f2;
}

.ca-body .ca-note > :last-child,
.ca-body .ca-important > :last-child,
.ca-body .ca-tip > :last-child {
  margin-bottom: 0;
}

.ca-body .ca-important {
  border-left-color: #910d10;
  background-color: #fbf2f1;
}

.ca-body .ca-tip {
  border-left-color: #4b7d3f;
  background-color: #f2f7f0;
}

/* --- Questions and answers ----------------------------------------------- */

.ca-body .ca-faq {
  margin: 0 0 22px;
  border-top: 1px solid #e0ddd6;
}

/* One question. Put it on <details> and the browser does the rest. */
.ca-body .ca-q {
  margin: 0;
  border-bottom: 1px solid #e0ddd6;
}

.ca-body .ca-q > summary {
  padding: 14px 30px 14px 0;
  position: relative;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: #333333;
}

/* Safari draws its own triangle unless this is said as well. */
.ca-body .ca-q > summary::-webkit-details-marker {
  display: none;
}

/* The marker: a plus that becomes a minus. Drawn rather than typed, so it
   cannot arrive as a mangled character from a pasted document. */
.ca-body .ca-q > summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  background-image:
    linear-gradient(#910d10, #910d10),
    linear-gradient(#910d10, #910d10);
  background-size: 11px 1px, 1px 11px;
  background-position: center center;
  background-repeat: no-repeat;
}

.ca-body .ca-q[open] > summary::after {
  background-size: 11px 1px, 0 0;
}

.ca-body .ca-q > summary:hover {
  color: #910d10;
}

.ca-body .ca-q[open] > summary {
  color: #910d10;
}

/* The answer. Padding on the wrapper rather than on every paragraph. */
.ca-body .ca-q > :not(summary) {
  margin-left: 0;
}

.ca-body .ca-q > p:last-child,
.ca-body .ca-q > ul:last-child,
.ca-body .ca-q > ol:last-child {
  margin-bottom: 16px;
}

/* --- Contact -------------------------------------------------------------
   Customer Care and the Accessibility Statement both end in "here is how
   to reach us". This is that block. */

.ca-body .ca-contact {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid #e0ddd6;
  background-color: #ffffff;
}

.ca-body .ca-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 8px 0;
  border-top: 1px solid #f0eee8;
}

.ca-body .ca-contact-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.ca-body .ca-label {
  flex: 0 0 120px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #767676;
  line-height: 1.9;
}

/* --- Lists ---------------------------------------------------------------- */

.ca-body .ca-list-plain {
  padding-left: 0;
  list-style: none;
}

.ca-body .ca-list-check {
  padding-left: 0;
  list-style: none;
}

.ca-body .ca-list-check > li {
  position: relative;
  padding-left: 26px;
}

/* A tick drawn from two rules rather than a character, so it renders the
   same everywhere and needs no icon font. */
.ca-body .ca-list-check > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #4b7d3f;
  border-bottom: 2px solid #4b7d3f;
  transform: rotate(45deg);
}

.ca-body .ca-steps {
  counter-reset: ca-step;
  padding-left: 0;
  list-style: none;
}

.ca-body .ca-steps > li {
  counter-increment: ca-step;
  position: relative;
  min-height: 26px;
  margin-bottom: 14px;
  padding-left: 38px;
}

.ca-body .ca-steps > li::before {
  content: counter(ca-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #910d10;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

/* --- Tables --------------------------------------------------------------- */

/* Wrap a table in this and it scrolls itself instead of the page. */
.ca-body .ca-table-wrap {
  max-width: none;
  margin: 0 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ca-body .ca-table {
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}

.ca-body .ca-table th {
  background-color: #f7f6f2;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #565656;
  white-space: nowrap;
}

.ca-body .ca-table tbody tr:nth-child(even) td {
  background-color: #fbfaf7;
}

/* --- Layout --------------------------------------------------------------- */

.ca-body .ca-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 34px;
  margin-bottom: 18px;
}

.ca-body .ca-card {
  margin: 22px 0;
  padding: 18px 20px;
  border: 1px solid #e0ddd6;
  background-color: #ffffff;
}

.ca-body .ca-card > :last-child {
  margin-bottom: 0;
}

/* --- Text ----------------------------------------------------------------- */

.ca-body .ca-small {
  font-size: 12px;
  line-height: 1.55;
}

.ca-body .ca-muted {
  color: #767676;
}

.ca-body .ca-tight {
  margin-bottom: 6px;
}

.ca-body .ca-loose {
  margin-bottom: 30px;
}


/* ==========================================================================
   4. NARROW SCREENS
   ========================================================================== */

@media (max-width: 700px) {
  .ca-body h2 { font-size: 17px; }
  .ca-body .ca-lede { font-size: 15px; }
  .ca-body .ca-cols { grid-template-columns: 1fr; gap: 8px; }
  .ca-body .ca-label { flex-basis: 100%; line-height: 1.4; }
}


/* ==========================================================================
   BUTTONS

   The same control as the product page. .btn-add-to-cart is #910d10 on a 4px
   radius, going to #7a0b0d on hover, and so is this - a call to action in a
   Customer Care page and an Add to Basket button should not look like they
   came from two different shops.

   THEY ARE LINKS, NOT BUTTONS. The cleaner strips <button>, <form> and every
   other form control on the way in, because a form on this domain posting
   somewhere else is a phishing page wearing your certificate. So a call to
   action here is an anchor:

       <a class="ca-btn" href="/gifts">See the gift centre</a>

   Two class selectors, so white text and no underline beat the .ca-body a
   rule above rather than tying with it.

   THE SAME SIZE AS THE PRODUCT PAGE. .btn-add-to-cart is 14px in a 14px
   body, and so is this - the body here runs at the site's own 14px now, so
   there is no longer a relative-size adjustment to make.
   ========================================================================== */

.ca-body .ca-btn,
.ca-body .ca-btn-quiet {
  display: inline-block;
  min-height: 32px;
  margin: 4px 0;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ca-body .ca-btn {
  background-color: #910d10;
  color: #ffffff;
}

.ca-body .ca-btn:hover,
.ca-body .ca-btn:focus {
  background-color: #7a0b0d;
  color: #ffffff;
  text-decoration: none;
}

/* The second choice on a page that offers two. Same size and same shape, so
   the pair line up; only the weight differs. */
.ca-body .ca-btn-quiet {
  background-color: transparent;
  border-color: #910d10;
  color: #910d10;
}

.ca-body .ca-btn-quiet:hover,
.ca-body .ca-btn-quiet:focus {
  background-color: #fbf2f1;
  color: #7a0b0d;
  text-decoration: none;
}

/* A row of them, when a page ends by offering somewhere to go next. */
.ca-body .ca-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}


/* ==========================================================================
   5. PRINT

   A privacy policy is a document somebody occasionally has to keep. Every
   answer is opened, the callout tints drop out, and links show where they go.
   ========================================================================== */

@media print {
  .ca-body {
    max-width: none;
    font-size: 11pt;
    color: #000000;
  }
  .ca-body .ca-q > summary::after { display: none; }
  .ca-body details { display: block; }
  .ca-body details > *  { display: revert; }
  .ca-body .ca-note,
  .ca-body .ca-important,
  .ca-body .ca-tip,
  .ca-body .ca-card,
  .ca-body .ca-contact {
    background-color: transparent;
    border: 1px solid #999999;
  }
  .ca-body h2, .ca-body h3 { break-after: avoid; }
  .ca-body .ca-btn,
  .ca-body .ca-btn-quiet {
    background-color: transparent;
    border-color: #000000;
    color: #000000;
  }
  .ca-body a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
    word-break: break-all;
  }
  .ca-body a[href^="#"]::after { content: ""; }
}