/*
Theme Name: Fokis China
Theme URI: https://fokis.cn/
Description: Fokis 中国区官网 · Divi 5 子主题（本地字体 / 共用组件）
Author: Carl
Template: Divi
Version: 1.0.0
Text Domain: fokis-cn
*/

/* Last modified：2026-11-9 10:59

/* ========================================================================
   FOKIS.CN — SHARED STYLESHEET
   Source: fokisnm.com live divi-child/style.css, inspected 2026-11-02.
   Scope: Simplified Chinese site. No Google Fonts imports.
   Retained: FAQ, legacy and modern tables, TOC, solution sections and videos.
   Removed: Divi 4 #top-menu/#main-header hacks, old international font loading.
   Note: @font-face files are NOT bundled; upload self-hosted WOFF2 separately.
   ======================================================================== */

/* 01 / Fonts — font files must exist at these relative URLs.
   Obtain legitimate WOFF2 Latin variable builds of Montserrat and Inter.
   font-display: swap keeps Chinese text readable while fonts load.
   Latin-only unicode-range prevents downloading these faces for Han text.
   If files aren't installed yet, remove these two @font-face blocks or rely
   on the fallback system stack; NEVER point to Google Fonts CDN here. */
@font-face {
  font-family: "Fokis Montserrat";
  src: url("assets/fonts/montserrat-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Fokis Inter";
  src: url("assets/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122;
}

/* The Chinese stacks use fonts already installed on the visitor's device.
   Source Han Sans SC is preferred for Chinese headings IF locally installed;
   PingFang / Microsoft YaHei provide graceful, zero-download fallbacks.
   To guarantee Source Han Sans on every device, a licensed/self-hosted,
   subsetted SC WOFF2 collection is required separately. */
:root {
  --fokis-primary: #00642c;
  --fokis-primary-dark: #004d22;
  --fokis-link: #005a9c;
  --fokis-text: #333333;
  --fokis-muted: #5c685f;
  --fokis-border: #eaeaea;
  --fokis-surface: #ffffff;
  --fokis-stripe: #f4f6f9;
  --fokis-primary-soft: #f4f7f6;
  --fokis-tech-blue: var(--fokis-link);
  --fokis-alert-red: #d32f2f;
  --fokis-radius: 8px;
  --fokis-radius-lg: 16px;
  --fokis-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --fokis-table-label-width: 40%;
  --fokis-table-wide-min: 660px;
  --fokis-toc-anchor-offset: 110px;

  --fokis-cn-font: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --fokis-cn-heading-font: "Source Han Sans SC", "Noto Sans CJK SC",
    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --fokis-font-family: "Fokis Inter", var(--fokis-cn-font);
  --fokis-heading-font-family: "Fokis Montserrat", var(--fokis-cn-heading-font);

  --fokis-h1-size: 44px;
  --fokis-h2-size: 34px;
  --fokis-h3-size: 24px;
  --fokis-card-title-size: 20px;
  --fokis-body-size: 16px;
  --fokis-caption-size: 14px;
  --fokis-button-size: 16px;
}

/* 02 / Base typography. Divi presets may hold their own font values.
   The brand font is kept consistent; per-module sizes remain editable. */
body,
body .et_pb_text,
body .et_pb_module,
body .et_pb_button,
body .et-menu,
body .et_pb_menu {
  font-family: var(--fokis-font-family) !important;
}

h1, h2, h3, h4, h5, h6,
body .et_pb_module :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--fokis-heading-font-family) !important;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body {
  font-size: var(--fokis-body-size);
  line-height: 1.75;
  color: var(--fokis-text);
}

h1 { font-size: var(--fokis-h1-size); line-height: 1.3; font-weight: 700; }
h2 { font-size: var(--fokis-h2-size); line-height: 1.35; font-weight: 700; }
h3 { font-size: var(--fokis-h3-size); line-height: 1.4; font-weight: 600; }
h4 { font-size: var(--fokis-card-title-size); line-height: 1.45; font-weight: 600; }

body :is(button, input, select, textarea) { font-family: var(--fokis-font-family); }
html { scroll-behavior: smooth; }

@media (max-width: 980px) {
  :root { --fokis-h1-size: 38px; --fokis-h2-size: 30px; --fokis-h3-size: 22px; }
}
@media (max-width: 767px) {
  :root { --fokis-h1-size: 30px; --fokis-h2-size: 26px; --fokis-h3-size: 20px; }
}

/* 03 / Body links. Divi / WordPress button links keep their button styling. */
.et_pb_text_inner a:where(:not(.et_pb_button):not(.wp-element-button)) {
  color: var(--fokis-link);
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

.et_pb_text_inner a:where(:not(.et_pb_button):not(.wp-element-button)):hover {
  color: var(--fokis-primary);
  text-decoration: none;
}

.et_pb_button {
  text-decoration: none !important;
}

/* 04 / Unified FOKIS tables.
   Compatibility: .fokis-table-wrapper / .fokis-data-table, plus
   .tds-table-wrapper / .tds-table copied from the global site.
   The newer horizontal/vertical variants are below. */
.fokis-table-wrapper,
.tds-table-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  margin: 24px 0;
  -webkit-overflow-scrolling: touch;
}

:is(.fokis-table-wrapper, .tds-table-wrapper) > table:is(.fokis-data-table, .tds-table) {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid var(--fokis-border);
  table-layout: auto;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fokis-text);
  background-color: var(--fokis-surface);
}

table:is(.fokis-data-table, .tds-table) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  padding: 14px 24px;
  border: 1px solid var(--fokis-border);
  vertical-align: middle;
  color: var(--fokis-text);
  background-color: transparent;
  overflow-wrap: break-word;
}

table:is(.fokis-data-table, .tds-table) > :is(thead, tbody, tfoot) > tr > th {
  width: auto;
  font-weight: 700;
  text-align: left;
}

table:is(.fokis-data-table, .tds-table) > thead > tr,
table:is(.fokis-data-table, .tds-table) > tfoot > tr,
table:is(.fokis-data-table, .tds-table) > tbody > tr {
  background-color: var(--fokis-surface);
}

table:is(.fokis-data-table, .tds-table) > tbody > tr:nth-child(even) {
  background-color: var(--fokis-stripe);
}

/* Preserve two-cell product rows; never force every column header to 40%. */
table.fokis-data-table > tbody > tr > th:first-child:nth-last-child(2) {
  width: var(--fokis-table-label-width);
}

table:is(.fokis-data-table, .tds-table).fokis-table--key-value > colgroup > col:first-child {
  width: var(--fokis-table-label-width);
}

table:is(.fokis-data-table, .tds-table).fokis-table--key-value > colgroup > col:last-child {
  width: calc(100% - var(--fokis-table-label-width));
}

:is(.fokis-table-wrapper, .tds-table-wrapper) > table:is(.fokis-data-table, .tds-table).fokis-table--equal {
  table-layout: fixed;
}

table:is(.fokis-data-table, .tds-table).fokis-table--wide,
table.fokis-data-table.fokis-courier-table {
  min-width: var(--fokis-table-wide-min);
}

table:is(.fokis-data-table, .tds-table) > caption {
  caption-side: top;
  margin: 0 0 10px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  color: var(--fokis-text);
}

table:is(.fokis-data-table, .tds-table) a {
  color: var(--fokis-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

table:is(.fokis-data-table, .tds-table) a:hover {
  color: var(--fokis-primary-dark);
  text-decoration: underline;
}

.fokis-table-note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fokis-muted);
}

.fokis-table-mobile-hint {
  display: none;
}

/* FAQ: the existing native details/summary design.
   HTML: .fokis-faq-section > .fokis-faq-list >
         details.fokis-faq-item > summary.fokis-faq-question + .fokis-faq-answer
   Optional: header, eyebrow, title, intro and footer. */
.fokis-faq-section {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 40px 0;
  color: var(--fokis-text);
  font-family: var(--fokis-font-family);
  text-align: left;
}
.fokis-faq-section *,
.fokis-faq-section *::before,
.fokis-faq-section *::after {
  box-sizing: border-box;
}
.fokis-faq-header {
  margin-bottom: 32px;
}
.fokis-faq-section .fokis-faq-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fokis-primary);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
}
.fokis-faq-eyebrow::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 3px;
  background-color: var(--fokis-primary);
}
.fokis-faq-section .fokis-faq-title {
  margin: 0 0 14px;
  padding: 0;
  color: var(--fokis-text);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
.fokis-faq-section .fokis-faq-intro {
  max-width: 570px;
  margin: 0;
  padding: 0;
  color: var(--fokis-muted);
  font-size: 16px;
  line-height: 1.7;
}
.fokis-faq-list {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--fokis-primary);
}
.fokis-faq-item {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--fokis-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.fokis-faq-question {
  position: relative;
  display: block;
  min-height: 72px;
  margin: 0;
  padding: 22px 44px 22px 0;
  color: var(--fokis-text);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.fokis-faq-question::-webkit-details-marker {
  display: none;
}
.fokis-faq-question::marker {
  content: "";
}
/* Draw the decorative plus/minus without adding spoken text. */
.fokis-faq-question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  color: var(--fokis-primary);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}
.fokis-faq-question:hover,
.fokis-faq-item[open] > .fokis-faq-question {
  color: var(--fokis-primary);
}
.fokis-faq-item[open] > .fokis-faq-question::after {
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
}
.fokis-faq-answer {
  margin: 0 0 24px;
  padding: 0 24px 0 20px;
  border-left: 3px solid var(--fokis-primary);
  color: var(--fokis-muted);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.fokis-faq-section .fokis-faq-answer p {
  margin: 0 0 12px;
  padding: 0;
}
.fokis-faq-section .fokis-faq-answer p:last-child {
  margin-bottom: 0;
}
.fokis-faq-answer :is(ul, ol) {
  margin: 12px 0;
  padding: 0 0 0 22px;
  line-height: inherit;
}
.fokis-faq-answer :is(ul, ol):last-child {
  margin-bottom: 0;
}
.fokis-faq-answer li {
  margin-bottom: 6px;
}
.fokis-faq-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  color: var(--fokis-muted);
  font-size: 14px;
  line-height: 1.6;
}
.fokis-faq-section .fokis-faq-footer p {
  margin: 0;
  padding: 0;
}
.fokis-faq-section .fokis-faq-footer a {
  color: var(--fokis-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fokis-faq-section .fokis-faq-footer a:hover {
  color: var(--fokis-primary-dark);
}
.fokis-faq-section a:focus-visible {
  outline: 2px solid var(--fokis-primary);
  outline-offset: 3px;
}

/* Accessibility: keyboard focus on the controls and scroll regions managed here. */
.et_pb_text_inner a:focus-visible,
:is(.fokis-table-wrapper, .tds-table-wrapper):focus-visible,
table:is(.fokis-data-table, .tds-table) a:focus-visible {
  outline: 2px solid var(--fokis-primary);
  outline-offset: 3px;
}
.fokis-faq-question:focus-visible {
  outline: 2px solid var(--fokis-primary);
  outline-offset: -4px;
}

/* Mobile adjustments. */
@media (max-width: 767px) {
  :is(.fokis-table-wrapper, .tds-table-wrapper) > table:is(.fokis-data-table, .tds-table) {
    font-size: 14px;
  }
  table:is(.fokis-data-table, .tds-table) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    padding: 12px 16px;
  }
  .fokis-table-mobile-hint {
    display: block;
  }
  .fokis-faq-section {
    margin: 32px 0;
  }
  .fokis-faq-header {
    margin-bottom: 24px;
  }
  .fokis-faq-section .fokis-faq-title {
    font-size: 26px;
  }
  .fokis-faq-question {
    min-height: 64px;
    padding: 20px 40px 20px 0;
    font-size: 16px;
  }
  .fokis-faq-answer {
    padding: 0 12px 0 16px;
    font-size: 16px;
  }
  .fokis-faq-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Motion accessibility preferences for effects defined in this file. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .et_pb_text_inner a:where(:not(.et_pb_button):not(.wp-element-button)),
  .fokis-faq-question {
    transition: none;
  }
}

/* Table of contents — grey panel with green left border.
   Use <nav class="fokis-toc" aria-labelledby="fokis-toc-title"> with
   <h2 id="fokis-toc-title">Table of Contents</h2> and ol / nested ul.
   Remove old per-page TOC style blocks after switching the nav class.
   Heading IDs and Divi module IDs receive the shared scroll offset.
   Use .fokis-toc-target for other wrappers. Keep every target ID unique. */
.fokis-toc {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 24px 0;
  padding: 24px;
  border-left: 4px solid var(--fokis-primary);
  border-radius: 6px;
  background: var(--fokis-stripe);
  color: #24332c;
  font-family: var(--fokis-font-family);
  font-size: 16px;
  text-align: left;
}

.fokis-toc > h2[id] {
  margin: 0 0 14px;
  padding: 0;
  color: var(--fokis-primary);
  font-size: 24px;
  line-height: 1.3;
}

.fokis-toc :is(ol, ul) {
  margin: 0;
  padding: 0 0 0 1.5em;
  font-size: inherit;
  line-height: 1.65;
}

.fokis-toc ol {
  list-style: decimal outside;
}

.fokis-toc ul {
  margin-top: 6px;
  list-style: disc outside;
}

.fokis-toc li {
  margin: 8px 0;
  padding: 0;
}

.fokis-toc li a {
  color: var(--fokis-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.fokis-toc li a:hover {
  color: #003c1a;
  text-decoration: underline;
}

.fokis-toc li a:focus-visible {
  outline: 2px solid var(--fokis-primary);
  outline-offset: 3px;
}

/* Heading IDs on pages using the shared TOC, plus explicit module targets.
   New pages can also use .fokis-toc-target explicitly. */
body:has(.fokis-toc) :is(h2, h3, h4)[id],
body:has(.fokis-toc) .et_pb_module[id],
.fokis-toc-target {
  scroll-margin-top: var(--fokis-toc-anchor-offset);
}

@media (max-width: 767px) {
  .fokis-toc {
    padding: 18px;
  }

  .fokis-toc > h2[id] {
    font-size: 22px;
  }
}

/* Tables — modern variants: horizontal grey/green and vertical soft green.
   HTML: .fokis-table-scroll > table.fokis-table
   Options: .fokis-table-scroll--horizontal + .fokis-table--horizontal,
            .fokis-table--vertical, .fokis-table--wide.
   No JavaScript required. */
.fokis-table-scroll {
  --ft-green: #00642c;
  --ft-ink: #26332e;
  --ft-line: #d9dee7;
  --ft-header: #edf0f4;
  --ft-stripe: #f4f6f9;
  --ft-label: #eaf3ed;
  --ft-label-ink: #185632;
  --ft-white: #ffffff;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 24px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ft-line);
  border-radius: 6px;
  background: var(--ft-white);
  color: var(--ft-ink);
}
.fokis-table-scroll *,
.fokis-table-scroll *::before,
.fokis-table-scroll *::after { box-sizing: border-box; }

body .fokis-table-scroll > table.fokis-table {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background: var(--ft-white);
  color: var(--ft-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
}
body .fokis-table-scroll > table.fokis-table > :is(thead, tbody, tfoot) > tr {
  background: transparent;
}
body .fokis-table-scroll > table.fokis-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  width: auto;
  padding: 15px 18px;
  border: 0;
  border-bottom: 1px solid var(--ft-line);
  background: var(--ft-white);
  color: var(--ft-ink);
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
}
body .fokis-table-scroll > table.fokis-table > :is(thead, tbody, tfoot) > tr > th { font-weight: 600; }
body .fokis-table-scroll > table.fokis-table > :is(tbody, tfoot):last-child > tr:last-child > :is(th, td) { border-bottom: 0; }

/* Horizontal: grey column headers, green top rule, quiet zebra rows. */
.fokis-table-scroll--horizontal {
  border-radius: 0;
  border-top: 3px solid var(--ft-green);
}
body .fokis-table-scroll > table.fokis-table--horizontal > thead > tr > :is(th, td) {
  padding-top: 17px;
  padding-bottom: 17px;
  background: var(--ft-header);
  color: #283a31;
  border-bottom-color: #c8d0d9;
  font-weight: 600;
}
body .fokis-table-scroll > table.fokis-table--horizontal > tbody > tr:nth-child(even) > :is(th, td) {
  background: var(--ft-stripe);
}
/* Wide comparison tables scroll inside their container on small screens. */
body .fokis-table-scroll > table.fokis-table--wide { min-width: 660px; }
body .fokis-table-scroll > table.fokis-table--extra-wide { min-width: 880px; }

/* Vertical: soft green row headers; white values, no zebra bands. */
body .fokis-table-scroll > table.fokis-table--vertical { table-layout: fixed; }
body .fokis-table-scroll > table.fokis-table--vertical > thead > tr > th:first-child {
  width: 40%;
  background: var(--ft-label);
  color: var(--ft-label-ink);
  border-right: 1px solid #d3e2d8;
}
body .fokis-table-scroll > table.fokis-table--vertical > tbody > tr > th[scope="row"] {
  width: 40%;
  background: var(--ft-label);
  color: var(--ft-label-ink);
  border-right: 1px solid #d3e2d8;
  font-weight: 600;
}

/* Lists, paragraphs, captions and links inside either table type. */
body .fokis-table-scroll > table.fokis-table :is(p, ul, ol) {
  font-size: inherit;
  line-height: inherit;
}
body .fokis-table-scroll > table.fokis-table p { margin: 0 0 8px; padding: 0; }
body .fokis-table-scroll > table.fokis-table p:last-child { margin-bottom: 0; }
body .fokis-table-scroll > table.fokis-table :is(ul, ol) { margin: 0; padding: 0 0 0 1.2em; }
body .fokis-table-scroll > table.fokis-table a {
  color: var(--ft-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body .fokis-table-scroll > table.fokis-table a:hover { color: #004d22; }
body .fokis-table-scroll > table.fokis-table > caption {
  padding: 14px 18px;
  color: var(--ft-ink);
  background: var(--ft-white);
  font-weight: 600;
  text-align: left;
  caption-side: top;
}
.fokis-table-scroll:focus-visible,
.fokis-table-scroll a:focus-visible { outline: 2px solid var(--ft-green); outline-offset: 3px; }

@media (max-width: 767px) {
  body .fokis-table-scroll > table.fokis-table { font-size: 14px; }
  body .fokis-table-scroll > table.fokis-table > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding: 12px 14px; }
  body .fokis-table-scroll > table.fokis-table--vertical > thead > tr > th:first-child,
  body .fokis-table-scroll > table.fokis-table--vertical > tbody > tr > th[scope="row"] { width: 42%; }
}
@media print {
  .fokis-table-scroll { overflow: visible; }
  body .fokis-table-scroll > table.fokis-table { min-width: 0; }
}

/* Adhesive Solutions — native Divi 5 companion styles.
   Add fokis-solutions to EACH body Section. Native Divi settings/presets own
   columns, gaps, padding, image ratios, borders, colors and button states.
   These rules add anchor offsets, paragraph cleanup and small visual details.
   No page ID, fixed card height, custom grid, dependency or JavaScript needed. */
.fokis-solutions {
  min-width: 0;
}

.fokis-solutions :where(.et_pb_module, .et_pb_column) {
  min-width: 0;
}

.fokis-solutions :where(h1, h2, h3, h4) {
  padding-bottom: 0;
  overflow-wrap: break-word;
}

.fokis-solutions .et_pb_text_inner > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.fokis-solutions[id],
.fokis-solutions .fokis-solutions-anchor {
  scroll-margin-top: var(--fokis-toc-anchor-offset, 110px);
}

.fokis-solutions .fokis-solutions-eyebrow .et_pb_text_inner > p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fokis-solutions .fokis-solutions-eyebrow .et_pb_text_inner > p::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 2px;
  background: var(--fokis-primary);
}

/* Apply to Text modules containing a linked card heading, not whole cards.
   Their actual <a href> remains crawlable and keyboard operable. */
.fokis-solutions .fokis-solutions-title-link :is(h3, h4) > a {
  color: inherit;
  font: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

.fokis-solutions .fokis-solutions-title-link :is(h3, h4) > a:hover {
  color: var(--fokis-primary);
  text-decoration: underline;
}

.fokis-solutions .fokis-solutions-cta .et_pb_text_inner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 6px;
  color: var(--fokis-primary);
  font-weight: 600;
  text-underline-offset: 4px;
}

.fokis-solutions .fokis-solutions-cta .et_pb_text_inner a:hover {
  color: var(--fokis-primary-dark);
  text-decoration: underline;
}

.fokis-solutions :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--fokis-primary);
  outline-offset: 3px;
}

/* Native form styling still belongs to its Fields / Button presets. */
.fokis-solutions .fokis-solutions-form :is(input, select, textarea, button) {
  font-family: var(--fokis-font-family);
}

.fokis-solutions .fokis-solutions-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
  min-height: 48px;
}

.fokis-solutions .fokis-solutions-form textarea {
  min-height: 144px;
  resize: vertical;
}

/* Do not hide error messages, labels, required markers or success feedback. */

/* 12 / Article video — native video + YouTube iframe.
   Divi Code HTML: figure.fokis-video > div.fokis-video__media > (video|iframe).
   Optional: figcaption.fokis-video__caption with label/title/description.
   Portrait: add .fokis-video--portrait to figure; no forced video cropping.
   Use iframe title, allowfullscreen and lazy loading; set aspect ratio to 9/16
   for Shorts. Native video: controls, playsinline, preload="none". */
.fokis-video {
  --fokis-video-ratio: 16 / 9;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 28px auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--fokis-border);
  border-radius: var(--fokis-radius);
  background: var(--fokis-surface);
  color: var(--fokis-text);
  font-family: var(--fokis-font-family);
  text-align: left;
  box-shadow: none;
}
.fokis-video *, .fokis-video *::before, .fokis-video *::after { box-sizing: border-box; }
.fokis-video.fokis-video--portrait {
  --fokis-video-ratio: 9 / 16;
  max-width: 360px;
}
.fokis-video .fokis-video__media {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--fokis-primary-soft);
}
.fokis-video .fokis-video__media > video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto var(--fokis-video-ratio);
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
}
.fokis-video .fokis-video__media > iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--fokis-video-ratio);
  margin: 0;
  padding: 0;
  border: 0;
}
.fokis-video .fokis-video__caption {
  margin: 0;
  padding: 20px 24px;
  border-top: 2px solid var(--fokis-primary);
  background: var(--fokis-stripe);
  text-align: left;
  overflow-wrap: anywhere;
}
.fokis-video .fokis-video__label {
  margin: 0 0 7px;
  padding: 0;
  color: var(--fokis-primary);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fokis-video .fokis-video__title {
  margin: 0 0 8px;
  padding: 0;
  color: var(--fokis-text);
  font-family: var(--fokis-heading-font-family);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.fokis-video .fokis-video__description {
  margin: 0;
  padding: 0;
  color: var(--fokis-muted);
  font-size: var(--fokis-caption-size);
  line-height: 1.7;
}
.fokis-video .fokis-video__caption > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.fokis-video :is(video, iframe):focus-visible {
  outline: 2px solid var(--fokis-primary);
  outline-offset: -4px;
}
@media (max-width: 767px) {
  .fokis-video { margin-block: 24px; }
  .fokis-video .fokis-video__caption { padding: 16px; }
  .fokis-video .fokis-video__title { font-size: 16px; }
}
/* 目前頁面及所屬上層選單：品牌綠 */
#main-header #top-menu li:is(
  .current-menu-item,
  .current_page_item,
  .current-menu-ancestor
):not(.contact-btn) > a,
#main-header .et_mobile_menu li:is(
  .current-menu-item,
  .current_page_item,
  .current-menu-ancestor
):not(.contact-btn) > a {
  color: var(--fokis-primary, #00642c) !important;
}

/* 滑鼠懸停及鍵盤焦點：深綠 */
#main-header #top-menu li:not(.contact-btn) > a:is(:hover, :focus-visible),
#main-header .et_mobile_menu li:not(.contact-btn) > a:is(:hover, :focus-visible) {
  color: var(--fokis-primary-dark, #004d22) !important;
  opacity: 1;
}