/* Typography v2 (T-118..T-121). Loaded for every visitor while fc_typo_v2_mode is not off (typography-v2.php).
   Visual rules start with html.fct2 (preview: ?fc_typo2=1 cookie; on: everyone). Exceptions, documented below:
   @font-face declarations (inert until a fct2 rule uses them) and the T-119 card-title parity rules, which must
   hold with and without fct2 because the h2 -> h3 markup change follows the server gate, not the class.
   Sources: forcar-concepts-docs/initiatives/typography-scale/v2/{fonts,headings,css}/section.css */

/* T-118 font roles + self-hosted fonts. Section for css/typography-v2-1.0.0.css.
   Paths are relative to css/ (assets/fonts/ sits next to it).
   Family names are NEW on purpose: the file loads for every visitor, so nothing may re-declare
   'Source Sans Pro' or 'MYAudiowide'. The faces below only download once a html.fct2 rule uses them. */

/* ---- 1. Faces (declarations are inert until used) ---- */

/* FC Source Sans = Google's own Source Sans Pro v24, Black 900, latin + latin-ext (OFL).
   The live site only ever requested weight 900 upright (the Google URL has no 900italic), so the
   homepage "900 italic" headings and card prices are a browser-synthesised oblique of this face.
   The face is therefore declared upright; font-style: italic on the elements keeps the identical look. */
@font-face {
  font-family: "FC Source Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/fc-source-sans-900-latin-1.0.0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "FC Source Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/fc-source-sans-900-latin-ext-1.0.0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* FC Audiowide = Audiowide Regular (OFL), full latin + latin-ext, NOT subset to the logo letters:
   span.menu-item-text and the logo link can carry any menu/site-title text. */
@font-face {
  font-family: "FC Audiowide";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/fc-audiowide-latin-1.0.0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "FC Audiowide";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/fc-audiowide-latin-ext-1.0.0.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 2. Role tokens (only under html.fct2) ----
   --ff-body    body/UI text. Same stack as today's effective body font (Bootstrap's system stack),
                made explicit. No web font on purpose.
   --ff-display homepage display headings, card prices, badges (Source Sans Black, synthesised italic).
   --ff-logo    wordmark in the header and menu-item-text.
   T-117 binds: var(--ff-display, 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif) - works because
   the token is undefined without fct2, so the old Google stack is the fallback. */
html.fct2 {
  --ff-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ff-display: "FC Source Sans", "Helvetica Neue", Arial, sans-serif;
  --ff-logo: "FC Audiowide", Arial, sans-serif;
}

html.fct2 body { font-family: var(--ff-body); }

/* ---- 3. Switch rules (font-family only) ---- */

/* Homepage #fcy (inline styles of page 9): .fcy-display (h1/h2/h3/a + inner spans inherit), .fcy-model-name, .fcy-tile-title */
html.fct2 .fcy-display,
html.fct2 .fcy-model-name,
html.fct2 .fcy-tile-title {
  font-family: var(--ff-display);
}

/* Product card component (cards-1.0.3.css): same selector + fct2, loaded later, so it wins at equal specificity */
html.fct2.fcc :is(#fcy, body) .fcc-badge,
html.fct2.fcc :is(#fcy, body) li.type-product .price > .woocommerce-Price-amount {
  font-family: var(--ff-display);
}

/* Logo wordmark and menu text: main-2.0.24.css sets these with !important */
html.fct2 a.mycustomtitleaudiowide,
html.fct2 span.menu-item-text {
  font-family: var(--ff-logo) !important;
}

/* NOT switched (decision for the user): header-preview(-fix) .fc-preview-drawer-brand names `audiowide`,
   a family that was never declared, so the drawer brand text renders in the system font today.
   Switching it would change the look. To make it a real Audiowide logo, uncomment:
html.fct2 body.fc-header-preview .fc-preview-drawer-brand { font-family: var(--ff-logo); }
*/

/* ---- T-119 heading hierarchy ----
   Parity rules, deliberately NOT gated by html.fct2: behind fc_typo_v2_server() product card titles are h3 instead of
   h2 (snippet.php), and the page must look the same with and without fct2. With the v3 cards (html.fcc, cards-1.0.3.css)
   every computed property of the title is already identical for h2 and h3 (measured: home rails, shop grid, up-sells,
   cart recommendations, 1440 and 390 px). These two rules cover the old-card fallback (no fcc class when the cards
   script does not start): they repeat the only two h2-specific card rules of main-2.0.24.css for the h3.
   Same specificity as the originals; the v3 card rules still win through their !important + ID weight. */
h3.woocommerce-loop-product__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: auto; font-size: 18px !important; }
.owl-stage h3.woocommerce-loop-product__title,
.other-prod-class h3.woocommerce-loop-product__title,
.custom-related-products h3.woocommerce-loop-product__title { font-size: 16px !important; }

/* T-121: contrast, reading rhythm and text-spacing resilience outside the T-117 templates.
   Every rule starts with html.fct2. Areas: homepage #fcy, header/drawer (colour, weight, letter-spacing only),
   footer, WhatsApp button, plain content pages (AGB, Unternehmen, Versandkosten, Impressum, Datenschutz,
   blog and presse singles/archives). Shop, product, cart, checkout and account belong to T-117. */

/* ---------- 0. Tokens ---------- */
html.fct2 {
  --lh-tight: 1.1;     /* display headings */
  --lh-snug: 1.3;      /* headings, narrow text boxes */
  --lh-body: 1.5;      /* running text */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
  --ls-label: .1em;    /* same value as main-2.0.24.css; repeated so the file stands alone */
  --ls-display: -.01em;
  --ink: #0e0f11;
  --bronze: #cd7f32;
  --bronze-2: #e39a52;
  --bronze-3: #a9621f;
  --paper: #f2f0eb;
  --muted: #6b6f76;
  --text: #26282c;
}

/* Plain content pages: everything with .entry-content that is not a shop template and not the homepage. */
/* scope helper (written out each time because :is() with :not() lists stay readable this way):
   body.page:not(.home):not(.woocommerce-page), body.single-presse-news, body.single-tesla-news,
   body.post-type-archive-presse-news, body.post-type-archive-tesla-news */

/* ---------- 1. Contrast ---------- */

/* 1a. Footer: newsletter text #727272 (4.37 on #f4f4f4) and column links #707070 (4.5 borderline) */
html.fct2 .fc-modern-footer-community p { color: #5f636a; }
html.fct2 .fc-modern-footer-column a { color: #5f636a; }
html.fct2 .fc-modern-footer-column a:hover,
html.fct2 .fc-modern-footer-meta a:hover { color: var(--bronze-3); }
html.fct2 .fc-modern-footer-newsletter input::placeholder { color: #666; }

/* 1b. WhatsApp: variant selected in README (default here: A, dark brand green, white label) */
html.fct2 .fc-whatsapp-sticky { background: #1a7f45; font-weight: var(--fw-bold); }
html.fct2 .fc-whatsapp-sticky:hover,
html.fct2 .fc-whatsapp-sticky:focus { background: #146636; }
html.fct2 .fc-whatsapp-sticky:focus-visible { outline-color: var(--ink); }

/* 1c. Mobile drawer brand: bronze on white 3.14 -> bronze-3 4.72 (colour only; size/clipping goes to T-117) */
html.fct2 body.fc-header-preview .fc-preview-drawer-brand { color: var(--bronze-3) !important; }
html.fct2 body.fc-header-preview .fc-preview-mobile-panel-empty,
html.fct2 body.fc-header-preview .fc-preview-mobile-panel-products p { color: #5f636a; }

/* 1d. Homepage on --paper: secondary text and small bronze text */
html.fct2 .fcy-head-note,
html.fct2 .fcy-faq-lead { color: var(--text); }
html.fct2 .fcy-faq-kicker { color: var(--ink); }
html.fct2 .fcy .fc-faq__a a { color: var(--ink) !important; border-bottom-color: var(--bronze); }

/* 1d2. "Alle Produkte" tile: white on bronze 3.14 at 18 px (<= 1080 px the 900 weight is < 18.7 px) -> ink on bronze 6.1.
   The span carries its own white, so it is named too; ink also on hover (the tile stays bronze). */
@media (max-width: 1080px) {
  html.fct2 .fcy-model-all,
  html.fct2 .fcy-model-all .fcy-model-name,
  html.fct2 .fcy-model-all:hover .fcy-model-name { color: var(--ink) !important; }
}

/* 1e. Plain content pages: link colour and headings */
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content a:not(.button):not(.wp-block-button__link),
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-content a:not(.button):not(.wp-block-button__link) { color: var(--bronze-3); }
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content :is(h1, h2, h3, h4, h5, h6),
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-content :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); }

/* ---------- 2. Reading rhythm ---------- */

/* 2a. Homepage */
html.fct2 .fcy .fc-faq__a { line-height: var(--lh-body); }
html.fct2 .fcy .fc-faq__a p { margin: 0 0 1em; }
html.fct2 .fcy .fc-faq__a p:last-child { margin-bottom: 0; }
html.fct2 .fcy-head-note,
html.fct2 .fcy-faq-lead,
html.fct2 .fcy-usp-item p { line-height: var(--lh-body); }
/* Display headings, tiles and model names keep the homepage's own .9-1 line-height (design-language reference). */
html.fct2 .fcy .fc-faq__q { line-height: var(--lh-snug); }

/* 2b. Content pages: measure ~70ch, aligned left with the page title; tables, figures, galleries, columns stay full width */
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content > :is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote),
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-content > :is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote) {
  max-width: 70ch;
}
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content :is(p, li),
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-content :is(p, li) { line-height: var(--lh-body); }
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content p,
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-content p { margin-bottom: 1em; }
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content :is(h1, h2, h3, h4, h5, h6),
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-content :is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin-top: 1.6em;
  margin-bottom: .5em;
}
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content > :first-child { margin-top: 0; }
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-title,
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-title { line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--ls-display); }
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content :is(h1, h2, h3, h4, h5, h6) a { font-weight: inherit; }

/* ---------- 3. Weight and letter-spacing ---------- */
/* mapping table: see README (section 3) */
html.fct2 body.fc-header-preview .fc-preview-menu > li > a { font-weight: var(--fw-semibold); letter-spacing: 0; } /* 500 -> 600, .3px -> 0 */
html.fct2 .fcy-promo-list li { font-weight: var(--fw-regular); }                               /* 500 -> 400 */
html.fct2 .fc-modern-footer-payments .fc-payment-badge { font-weight: var(--fw-bold); }       /* 800 -> 700 */
html.fct2 .fc-modern-footer-payments .fc-payment-currency { letter-spacing: 0; }               /* .02em -> 0 */
html.fct2 .fcy-hero-count,
html.fct2 .fcy-model-count { letter-spacing: 0; }                                              /* .4px -> 0 */

/* ---------- 4. Text-spacing resilience (WCAG 1.4.12) ---------- */
html.fct2 .fcy-bento { grid-auto-rows: minmax(236px, auto); }
html.fct2 .fcy-promo { min-height: 100%; }
html.fct2 .fc-modern-footer-newsletter { height: auto; min-height: 52px; }
html.fct2 .fc-modern-footer-payments .fc-payment-badge { height: auto; min-height: 28px; }
@media (max-width: 860px) {
  html.fct2 .fcy-bento { grid-auto-rows: minmax(220px, auto); }
}
@media (max-width: 640px) {
  html.fct2 .fcy-bento { grid-auto-rows: auto; }
}

/* ---------- 5. Hyphenation (lang="de-CH") ---------- */
html.fct2 .fcy :is(h1, h2, h3, h4),
html.fct2 .fcy-model-name,
html.fct2 .fcy-model-var,
html.fct2 .fcy-tile-title,
html.fct2 .fcy-promo-title,
html.fct2 .fcy-head-note,
html.fct2 .fcy-faq-lead,
html.fct2 .fcy-usp-item p,
html.fct2 .fc-modern-footer-column a,
html.fct2 .fc-modern-footer-community :is(h2, p),
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-content :is(h1, h2, h3, h4, h5, h6, p, li, td),
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-content :is(h1, h2, h3, h4, h5, h6, p, li, td),
html.fct2 body.page:not(.home):not(.woocommerce-page) .entry-title,
html.fct2 body:is(.single-presse-news, .single-tesla-news) .entry-title {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}