/* The five "Informații utile" pages.
 *
 * Everything is scoped to body.af-policy-page so nothing here can reach
 * another page, and the file is only enqueued on those five anyway.
 *
 * The numbers are set for the reader this shop actually has: a smallholder in
 * their sixties, often on a phone, on rural mobile data, reading a legal page
 * they did not want to read. 18px at the narrowest and 20px on a desktop,
 * 1.8 leading because the column is deliberately wide, and ink dark enough to
 * read outdoors - #3a3a3a on white is about 11:1 against a 4.5:1 floor.
 */

body.af-policy-page {
  --af-p-ink: var(--af-ink, #1d1d1f);
  --af-p-body: var(--af-body, #3a3a3a);
  --af-p-muted: var(--af-ink-2, #6e6e73);
  --af-p-line: var(--af-hairline, #e0e0e0);
  --af-p-tint: var(--af-parchment, #f5f5f7);
  --af-p-green: var(--af-accent, #2e7d32);
  --af-p-green-dark: var(--af-accent-dark, #1b5e20);
  --af-p-focus: var(--af-focus, #0b65c2);
  --af-p-radius: var(--af-radius-lg, 18px);

  /* Measured at 1440: .site-header is 114px tall and the theme sticks it to
     the top of the viewport above 1024px. Anchors and the sticky rail both
     clear it with 14px to spare. */
  --af-p-head: 128px;
}

/* The theme's page wrapper is boxed four deep - .content-page, the sidebar
 * wrapper, the bootstrap .row and the column inside it. The arranged page is
 * out of all of that, so the containers it now sits in are flattened rather
 * than fought with rule by rule.
 *
 * The .row is named with a descendant combinator rather than a child one, and
 * that is not tidiness: page-af-arranged.php puts .sidebar-position-* between
 * the two, so `.content-page > .row` matches nothing. Measured at 390px with
 * the child selector, the .row kept its -15px bootstrap margins and the text
 * ran from -15 to 405 - clipped at both edges by the overflow-x:clip ux.css
 * puts on the document, so it did not even scroll to reveal itself. */
body.af-policy-page .content-page,
body.af-policy-page .content-page .sidebar-position-without,
body.af-policy-page .content-page .row,
body.af-policy-page .content-page .content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

body.af-policy-page .page-heading {
  margin-bottom: 0;
}

/* The title and the words share an edge.
 *
 * Measured before this rule: the h1 started at x=14 and the first sentence at
 * x=47, because the theme's title band pays a flat 15px and the page below it
 * pays --af-gutter. Two edges 33px apart on the same screen is the thing the
 * eye notices before it reads anything. The band is given the site's gutter
 * instead of its own. */
body.af-policy-page .page-heading > .container {
  padding-left: var(--af-gutter, 24px) !important;
  padding-right: var(--af-gutter, 24px) !important;
}

/* The page
 *
 * Full width on the site's own gutter - the same clamp(16px, 3.2vw, 56px) the
 * home page and the header use - rather than the 1240px frame the old script
 * built around a 820px column. The shop's complaint was that the pages "look
 * empty"; on a 1440px screen 424px of it went to nothing. */

.af-policy {
  width: 100%;
  padding: 4px var(--af-gutter, 24px) 40px;
  color: var(--af-p-body);
  font-size: clamp(18px, 0.4vw + 16.2px, 20px);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

.af-policy__updated {
  max-width: 1560px;
  margin: 0 auto 24px;
  color: var(--af-p-muted);
  font-size: 15px;
  line-height: 1.4;
}

.af-policy__layout {
  max-width: 1560px;
  margin: 0 auto;
}

/* The contents list as a rail
 *
 * Only from 1024px, which is where the theme starts sticking the header and
 * where there is room for 300px beside a readable column. Below that it is a
 * card above the text: a rail on a phone is either off-screen or eating the
 * half of the screen the words need. */
@media (min-width: 1024px) {
  .af-policy__layout--rail {
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    gap: clamp(32px, 3vw, 64px);
    /* The rail is a sticky grid item, and its sticky range is its grid area -
       the full height of the row - so `start` keeps the card the height of
       its own list without shortening the run it can stick over. */
    align-items: start;
  }
}

/* Below the rail there is nothing to spend the width on, and measured at
 * 1023px the single column came out at 958px - wider than the two-column
 * layout gives at 1024, and the widest measure on the whole site. Capped and
 * centred, which costs about 80px of margin on a window nobody maximises. */
@media (max-width: 1023px) {
  .af-policy__layout {
    max-width: 860px;
  }
}

/* The document
 *
 * Capped at 1100px so a 27-inch monitor does not hand the reader a 1400px
 * line. At 1440 the cap never bites: measured, the column comes out at 978px
 * against 816px before. */
.af-policy__doc {
  max-width: 1100px;
  min-width: 0;
}

.af-policy__sect {
  margin: 0 0 8px;
  /* the sticky header must not sit on the heading an anchor jumps to */
  scroll-margin-top: var(--af-p-head);
}

.af-policy__sect:last-of-type {
  margin-bottom: 0;
}

/* Headings
 *
 * Numbered, and the number is the same number as in the contents list. The
 * list says "3. Termenul de livrare" and the section says "3" - that is the
 * cheapest way to tell somebody who followed a link that they arrived. */

.af-policy__h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 44px 0 14px;
  color: var(--af-p-ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.af-policy__sect:first-child .af-policy__h {
  margin-top: 8px;
}

/* !important because ux.css sizes every h2 and h3 in the shop with it. Not a
 * flourish - without it these headings take the shop-wide ladder and the
 * numbered badge beside them lands on the wrong baseline. */
.af-policy__h--2 {
  font-size: clamp(24px, 1vw + 20px, 30px) !important;
}

.af-policy__h--3 {
  font-size: clamp(20px, 0.6vw + 17.6px, 24px) !important;
}

.af-policy__h-n {
  flex: 0 0 auto;
  min-width: 1.85em;
  padding: 0.18em 0.4em;
  border-radius: 999px;
  background: var(--af-p-tint);
  color: var(--af-p-green-dark);
  font-size: 0.62em;
  font-weight: 700;
  text-align: center;
  /* baseline alignment on a flex item with padding needs the box pulled back
     up or the number hangs below the word it labels */
  transform: translateY(-0.15em);
}

.af-policy__h--3 .af-policy__h-n {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.af-policy__h-t {
  min-width: 0;
}

/* Body copy
 *
 * ux.css sets `p, li, dd, dt { font-size: 18px; line-height: 1.6 }` on every
 * page of the shop, at one-class specificity, which beats anything inherited
 * from the container. So the measure is stated on the elements themselves and
 * everything on the page reads from the one value on .af-policy above.
 *
 * WHAT CHANGED AND WHY
 *
 * Before: an 820px column inside a 1240px frame - measured 816px of text at
 * 18px, about 94 characters, with the rest of a 1440px screen empty. The shop
 * said "the content should get the full width of the page, too many lines and
 * the pages are looking empty".
 *
 * Now: no frame, the site's own gutter, and the column takes whatever the rail
 * leaves - 978px at 1440. At 20px that is around 102 characters, so the same
 * policy runs in fewer lines than it did, and 1.8 leading is what keeps a
 * measure that wide trackable. Bigger type and looser lines are the trade for
 * the extra width, and both of them suit a reader in their sixties.
 *
 * Scoped to .af-policy__sect rather than .af-policy__doc, and that matters:
 * the "Alte informații utile" card lives in the same column, and on
 * .af-policy__doc the link rule below beat its own colour - the telephone
 * button came out dark green and underlined on a green field, which is
 * unreadable. These rules describe the shop's writing, not the furniture
 * around it. */

.af-policy__sect p,
.af-policy__sect li,
.af-policy__sect dd,
.af-policy__sect dt,
.af-policy__sect td,
.af-policy__sect th {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.af-policy__sect p {
  margin: 0 0 1.1em;
}

.af-policy__sect p:last-child {
  margin-bottom: 0;
}

.af-policy__sect ul,
.af-policy__sect ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.af-policy__sect li {
  margin: 0 0 0.5em;
}

.af-policy__sect a {
  color: var(--af-p-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  /* an email address or a phone number is often the thing a reader is here
     for, and on a phone it has to be hittable without aiming */
  padding: 2px 0;
  word-break: break-word;
}

.af-policy__sect a:hover,
.af-policy__sect a:focus {
  color: var(--af-p-green-dark);
  text-decoration-thickness: 2px;
}

.af-policy__sect strong,
.af-policy__sect b {
  color: var(--af-p-ink);
  font-weight: 700;
}

.af-policy__sect table {
  width: 100%;
  margin: 0 0 1.4em;
  border-collapse: collapse;
  font-size: 0.95em;
}

.af-policy__sect th,
.af-policy__sect td {
  padding: 10px 12px;
  border: 1px solid var(--af-p-line);
  text-align: left;
  vertical-align: top;
}

.af-policy__sect th {
  background: var(--af-p-tint);
  color: var(--af-p-ink);
  font-weight: 700;
}

/* The contents list */

.af-policy__toc {
  margin: 0 0 32px;
  padding: 18px;
  background: var(--af-p-tint);
  border-radius: var(--af-p-radius);
}

@media (min-width: 1024px) {
  .af-policy__toc {
    position: sticky;
    top: var(--af-p-head);
    margin: 0;
    /* a long list must scroll inside the rail rather than run off the bottom
       of a screen it cannot leave */
    max-height: calc(100vh - var(--af-p-head) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.af-policy__toc-title {
  margin: 0 0 12px;
  padding: 0 6px;
  color: var(--af-p-ink);
  /* same reason as the section headings: this is an h2 */
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.af-policy__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.af-policy__toc-item {
  margin: 0 0 4px;
}

.af-policy__toc-item:last-child {
  margin-bottom: 0;
}

.af-policy__toc-item--sub {
  padding-left: 22px;
}

/* A row, not a line of text. 48px minimum because the people using this are
 * tapping it with a thumb, and the whole row is the target rather than the
 * words inside it. */
.af-policy__toc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 9px 12px 9px 10px;
  border-radius: 12px;
  border-left: 4px solid transparent;
  color: var(--af-p-body);
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
}

.af-policy__toc-link:hover,
.af-policy__toc-link:focus {
  background: #fff;
  color: var(--af-p-ink);
  text-decoration: none;
}

.af-policy__toc-link:focus-visible {
  outline: 2px solid var(--af-p-focus);
  outline-offset: 2px;
}

.af-policy__toc-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--af-p-green-dark);
  font-size: 14px;
  font-weight: 700;
}

.af-policy__toc-t {
  min-width: 0;
}

/* Where the reader is
 *
 * Four signals at once, because one of them is colour and colour on its own
 * fails for anybody with a red-green deficiency and fails again on a phone
 * held in the sun: the row fills solid dark green, the text turns white and
 * bold, the number inverts, and a 4px bar appears on the leading edge. White
 * on #1b5e20 is about 7.4:1.
 *
 * .is-current is set by policy.js and by nothing else. The class is the whole
 * contract - the script toggles it and never touches the markup. */
.af-policy__toc-link.is-current,
.af-policy__toc-link.is-current:hover,
.af-policy__toc-link.is-current:focus {
  background: var(--af-p-green-dark);
  border-left-color: #0d3f14;
  color: #fff;
  font-weight: 700;
}

.af-policy__toc-link.is-current .af-policy__toc-n {
  background: #fff;
  color: var(--af-p-green-dark);
}

/* Moving between rows is the one place a transition helps: it tells the eye
 * the highlight travelled rather than teleported. 120ms, and nothing at all
 * for anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .af-policy__toc-link {
    transition: background-color 120ms linear, color 120ms linear;
  }
}

/* The way on, and the way out */

.af-policy__more {
  margin: 56px 0 0;
  padding: 24px;
  border: 1px solid var(--af-p-line);
  border-radius: var(--af-p-radius);
  background: #fff;
}

.af-policy__more-title {
  margin: 0 0 14px;
  color: var(--af-p-ink);
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.3;
}

.af-policy__more-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

@media (min-width: 720px) {
  .af-policy__more-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.af-policy__more-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--af-p-line);
  border-radius: 12px;
  background: var(--af-p-tint);
  color: var(--af-p-ink);
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
}

.af-policy__more-link:hover,
.af-policy__more-link:focus {
  border-color: var(--af-p-green);
  color: var(--af-p-ink);
  text-decoration: none;
}

.af-policy__call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 22px;
  border-radius: 14px;
  background: var(--af-p-green);
  color: #fff;
  text-decoration: none;
}

.af-policy__call:hover,
.af-policy__call:focus {
  background: var(--af-p-green-dark);
  color: #fff;
  text-decoration: none;
}

.af-policy__call-i {
  display: inline-flex;
}

.af-policy__call-t {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.af-policy__call-l {
  font-size: 14px;
  opacity: 0.9;
}

.af-policy__call-v {
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.af-policy__more-hours {
  margin: 12px 0 0;
  color: var(--af-p-muted);
  font-size: 15px;
}

/* Phones */

@media (max-width: 1023px) {
  body.af-policy-page {
    --af-p-head: 24px;
  }

  .af-policy {
    padding-bottom: 32px;
  }

  .af-policy__h {
    gap: 10px;
    margin-top: 36px;
  }

  .af-policy__more {
    padding: 18px;
  }

  .af-policy__call {
    display: flex;
    justify-content: center;
  }
}