/**
 * The country and language pages.
 *
 * Loaded by tecnomation-markets.php on those six pages and nowhere else, after
 * refine.css, whose type scale these build on.
 *
 * THE MEASURE IS NOT WIDENED
 *
 * These pages inherit .tec-prose-page, which caps the column at
 * min(64ch, 42rem). The temptation with a landing page is to break out wider
 * for a card grid; it was refused. 42rem is a reading measure — about 64
 * characters — and a market page is read, not skimmed over. The cards go
 * two-up INSIDE it from 34rem upward, which is plenty for a heading and two
 * sentences, and means there is exactly one column width on the page instead
 * of three competing ones.
 *
 * TWO CONTENT ROOTS, NOT ONE
 *
 * consent.css styles the prose with direct-child selectors —
 * `.tec-prose-page .pxl-entry-content > p`. The Arabic pages wrap their
 * content in `<div class="tec-ar" dir="rtl">`, which puts every element one
 * level deeper, so those selectors stop matching and the two Arabic pages
 * would have lost the entire type treatment while the four others kept it.
 * Everything below therefore names both roots. This is the cost of scoping
 * direction in the markup, and it is worth paying: see the note in
 * tecnomation-markets.php on why <html dir="rtl"> was not the answer.
 */

/* ---------------------------------------------------------- the deeper root */
/*
 * The Arabic wrapper gets the measure and the typography the entry content
 * would otherwise have given its own children.
 */
.tec-market-page .tec-ar {
  max-width: min(64ch, 42rem);
  margin-inline: auto;
}

.tec-market-page .tec-ar > p,
.tec-market-page .tec-ar > ul,
.tec-market-page .tec-ar > ol {
  font-size: 1.0625rem;
  line-height: 1.9;          /* Arabic sits taller: diacritics and descenders */
  margin-bottom: 1.1em;
}

.tec-market-page .tec-ar > h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.35;
  margin-top: 2.2em;
  margin-bottom: .6em;
}

.tec-market-page .tec-ar > h2:first-of-type { margin-top: 1.4em; }

.tec-market-page .tec-ar > ul,
.tec-market-page .tec-ar > ol {
  padding-inline-start: 1.3em;
  padding-inline-end: 0;
}

.tec-market-page .tec-ar > ul li { margin-bottom: .55em; }

/* ------------------------------------------------------------------- RTL */
/*
 * `dir="rtl"` on the wrapper already flips text alignment and list markers,
 * because those follow the direction of their containing block. What it does
 * NOT flip is anything positioned with a physical property, which is why
 * everything in this file uses logical ones — padding-inline-start, not
 * padding-left. The border on the callout is the one that would have given it
 * away: a left border on an Arabic page sits at the end of the text instead
 * of the start.
 */
.tec-market-page .tec-ar { text-align: right; }

/* A phone number and an email address are LTR inside RTL text. Marked
   dir="ltr" in the markup; this stops them being nudged by the parent. */
.tec-market-page .tec-ar [dir="ltr"] {
  unicode-bidi: isolate;
}

/* ----------------------------------------------------------- the opening */
/*
 * One paragraph, larger than the body, that has to carry the whole page if
 * somebody reads nothing else — which on a landing page arriving from a
 * search result is most people.
 */
.tec-market-page .pxl-entry-content > .tec-lead,
.tec-market-page .tec-ar > .tec-lead {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.5;
  font-weight: 500;
  color: #16211d;
  margin-bottom: 1.4em;
  text-wrap: pretty;
}

.tec-market-page .tec-ar > .tec-lead { line-height: 1.75; }

/* -------------------------------------------------------------- the cards */
.tec-market-page .tec-market-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.8em 0 2.2em;
}

/*
 * 34rem, not a device width. The question is whether TWO cards fit the
 * measure, and that depends on the column, not on whether somebody is holding
 * a tablet.
 */
@media (min-width: 34rem) {
  .tec-market-page .tec-market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
  }
}

.tec-market-page .tec-card {
  background: #f4f7f5;
  border: 1px solid #dfe5e2;
  border-radius: 10px;
  padding: 1.125rem 1.25rem 1.25rem;
}

.tec-market-page .tec-card h3 {
  font-size: 1.0625rem !important;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 .45em;
  color: #16211d;
}

.tec-market-page .tec-card p {
  font-size: .9688rem;
  line-height: 1.6;
  margin: 0;
  color: #3c4844;
}

.tec-market-page .tec-ar .tec-card p { line-height: 1.8; }

/* -------------------------------------------------------------- the facts */
/*
 * A description list, because that is what it is: a term and its value. Two
 * columns where there is room, stacked where there is not — and `start`
 * rather than `left`, so the Arabic version puts the term on the right
 * without a second rule.
 */
.tec-market-page .tec-facts {
  margin: 1.5em 0 2em;
  padding: 0;
  border-top: 1px solid #dfe5e2;
}

.tec-market-page .tec-facts dt {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0f7a52;
  padding-top: .9em;
}

.tec-market-page .tec-ar .tec-facts dt {
  /* Arabic has no case, so an uppercase transform does nothing and the
     letter-spacing actively harms it: it breaks the joins between letters. */
  text-transform: none;
  letter-spacing: normal;
  font-size: .9375rem;
}

.tec-market-page .tec-facts dd {
  margin: .25em 0 .9em;
  padding: 0 0 .9em;
  font-size: 1rem;
  line-height: 1.6;
  border-bottom: 1px solid #dfe5e2;
  color: #3c4844;
}

.tec-market-page .tec-ar .tec-facts dd { line-height: 1.8; }

@media (min-width: 34rem) {
  .tec-market-page .tec-facts {
    display: grid;
    grid-template-columns: minmax(8.5rem, 11rem) 1fr;
    column-gap: 1.25rem;
  }
  .tec-market-page .tec-facts dt {
    grid-column: 1;
    padding-top: .95em;
    border-top: 1px solid #dfe5e2;
  }
  .tec-market-page .tec-facts dd {
    grid-column: 2;
    margin: 0;
    padding: .9em 0;
    border-top: 1px solid #dfe5e2;
    border-bottom: 0;
  }
  /* The rule above the first row is the list's own border-top; without this
     the first pair gets two. */
  .tec-market-page .tec-facts { border-top: 0; }
  .tec-market-page .tec-facts dd:last-of-type,
  .tec-market-page .tec-facts dt:last-of-type { border-bottom: 1px solid #dfe5e2; }
}

/* ------------------------------------------------------------ the callout */
/*
 * Every one of these holds the same kind of sentence: a limit on what we are
 * claiming, and who the actual authority is. They are set apart because a
 * reader who skims past a regulatory caveat on a commercial page has been
 * misled by the design, whatever the words said.
 */
.tec-market-page .tec-callout {
  margin: 1.8em 0 2em;
  padding: 1.125rem 1.25rem;
  background: #eef5f1;
  border-inline-start: 3px solid #0f7a52;
  border-radius: 0 8px 8px 0;
}

.tec-market-page .tec-ar .tec-callout {
  border-radius: 8px 0 0 8px;
}

.tec-market-page .tec-callout p {
  font-size: .9688rem !important;
  line-height: 1.65;
  margin: 0 !important;
  color: #16211d;
}

.tec-market-page .tec-ar .tec-callout p { line-height: 1.85; }

/* ----------------------------------------------------------------- the ask */
.tec-market-page .tec-cta {
  margin: 2.4em 0 1.6em;
  padding: 1.5rem 1.25rem;
  background: #16211d;
  border-radius: 12px;
  text-align: center;
}

.tec-market-page .tec-cta p {
  margin: 0 !important;
  font-size: .9375rem !important;
  line-height: 1.6;
  color: #BCBCBC;
}

.tec-market-page .tec-cta p:first-child { margin-bottom: .9em !important; }

.tec-market-page a.tec-cta-link {
  display: inline-block;
  padding: .8em 1.6em;
  background: #6fd6a8;
  color: #16211d !important;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  text-decoration: none !important;
  box-shadow: none;
  transition: background .18s ease;
}

.tec-market-page a.tec-cta-link:hover,
.tec-market-page a.tec-cta-link:focus-visible {
  background: #5ecb9b;
}

/* Keyboard users must be able to see where they are on a dark panel. */
.tec-market-page a.tec-cta-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ------------------------------------------------- links out of the page */
.tec-market-page .tec-market-links {
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid #dfe5e2;
}

.tec-market-page .tec-market-links p {
  font-size: .9375rem !important;
  line-height: 1.8;
  margin: 0 0 .35em !important;
  color: #3c4844;
}

/* ------------------------------------------- the markets line, every page */
/*
 * Printed into the footer on EVERY page, not only these six, so it is not
 * scoped to .tec-market-page. It sits with the policy links and matches them,
 * and it is what makes the organisation's areaServed claim visible text
 * rather than an assertion only a crawler can see.
 */
.tec-market-links-footer {
  padding: 4px 16px 0;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #8a9490;
}

.tec-market-links-footer span { color: inherit; }

.tec-market-links-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
}

.tec-market-links-footer a:hover,
.tec-market-links-footer a:focus-visible {
  color: #0f7a52;
}

/* An Arabic link inside an English line needs isolating or the separators
   either side of it swap places. */
.tec-market-links-footer a[dir="rtl"] {
  unicode-bidi: isolate;
}