/*
Theme Name: feeflow
Theme URI: https://www.feeflow.at
Author: byteflow GmbH
Author URI: https://www.byteflow.at
Description: Custom WordPress theme in the design of feeflow.at – the modern fee management for insurance brokers. Replicates the original landing page (dark/light theme, Inter font, corporate colors). The actual styling lives in assets/css/ (main.css incl. theme.css).
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
License URI: https://www.byteflow.at
Text Domain: feeflow
Tags: landing-page, business, custom-colors, dark-mode
*/

/*
  Note: the entire design is loaded via assets/css/main.css
  (see functions.php -> feeflow_enqueue_assets).
  This file only contains the theme header (required) and small
  WordPress-specific additions.
*/

/* Header area with the navigation (centered, same max width as the sections).
   The navigation now sits in its own header above the page content. */
.site-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-lg) 0;
  width: 100%;
  box-sizing: border-box;
}
.site-header nav {
  margin-bottom: 0;
}

/* Default alignment classes of the block editor (in case pages/posts are used) */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }

/* Sub-pages render inside .legal-content (page.php, styles in
   assets/css/legal.css like the original). Gutenberg content is flat –
   map the original .legal-section heading style onto direct h2 children. */
.legal-content .entry-content > h2 {
  font-size: 1.5rem;
  color: var(--primary-light);
}

/* Search/archive fallback template (index.php) */
.page-section {
  padding: var(--spacing-3xl) var(--spacing-lg);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.page-inner {
  max-width: 820px;
  margin: 0 auto;
}
.page-title h1,
.page-title h2 {
  margin-bottom: var(--spacing-xl);
}
/* No extra rhythm rules for .entry-content: headings, paragraphs and lists
   inside .legal-section must keep the ORIGINAL margins (legal.css/main.css).
   The earlier margin-top on h2/h3 and line-height 1.8 made the section cards
   visibly airier than the original site. */
.entry-content a {
  text-decoration: underline;
}

/* Classic themes get a legacy .wp-block-group__inner-container injected into
   every group at render time, which breaks grid/flex containers (the cards
   would all sit inside one grid cell). Make it layout-transparent so the
   grandchildren participate in the group's grid/flex directly. */
.wp-block-group > .wp-block-group__inner-container {
  display: contents;
}

/* Block conversion: badge and icon were <div>s and are paragraph blocks
   now, so the description-only rule ".benefit-card > p" (min-height 5rem,
   margin-bottom 1.5rem) leaks onto them. Restate their original values
   (verified against the live site). */
.wefox-benefits-section .benefit-card > p.special-badge {
  min-height: 0;
  margin: 0;
  color: #fff; /* .benefit-card p text color must not leak onto the badge */
}
.wefox-benefits-section .benefit-card > p.benefit-icon {
  min-height: 3.5rem;
  margin: 0 0 1rem;
}

/* Ads landing pages (/honorarverwaltung-versicherungsmakler/ and
   /servicepauschale-versicherungsmakler/): the price terms under the hero
   buttons. Small print, but readable, since the ad promises exactly this. */
.hero-content > p.hero-terms {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: var(--spacing-lg);
}
.hero-content > p.hero-terms a {
  color: inherit;
  text-decoration: underline;
}

/* Documentation content: Gutenberg tables and quotes inside section cards
   (theme-variable based, so they work in dark and light mode). */

/* legal.css only styles ul inside sections; ordered lists (Schritt für
   Schritt) inherited the global list reset and their numbers poked out of
   the card. Mirror the ul rules. */
.legal-section ol {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}
.legal-section ol li {
  margin-bottom: var(--spacing-xs);
}
/* Flat sub-pages (Datenschutz): lists sit directly in .entry-content, not in
   a .legal-section card, and got no bullets from the global list reset. */
.legal-content .entry-content > ul {
  list-style: disc;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}
.legal-content .entry-content > ul li {
  margin-bottom: var(--spacing-xs);
}
.legal-section .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}
.legal-section .wp-block-table th,
.legal-section .wp-block-table td {
  border: 1px solid var(--border-color);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
}
.legal-section .wp-block-table th {
  background-color: var(--darker-bg);
}
.legal-section blockquote {
  border-left: 3px solid var(--primary-color);
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
  margin: 0 0 var(--spacing-md);
}

/* Documentation pages: sidebar with the auto-generated page list next to
   the content (page-docs.php). Wider column than the other sub-pages so
   content keeps room beside the sidebar. */
.docs-content {
  max-width: 1200px;
}
.docs-layout {
  display: flex;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}
.docs-sidebar {
  flex: 0 0 240px;
  position: sticky;
  top: var(--spacing-xl);
  background-color: var(--card-bg);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
}
/* main.css styles the global site <nav> as a flex row - reset that for the
   sidebar navigation. */
.docs-sidebar nav {
  display: block;
  padding: 0;
  margin: 0;
}
.docs-sidebar-title {
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}
.docs-sidebar-title a {
  color: var(--text-primary);
  text-decoration: none;
}
.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.docs-sidebar ul ul {
  padding-left: var(--spacing-md);
}
.docs-sidebar li {
  margin-bottom: var(--spacing-xs);
}
.docs-sidebar a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  padding: 0.15rem 0;
  transition: color var(--transition-fast);
}
.docs-sidebar a:hover {
  color: var(--primary-light);
}
.docs-sidebar .current_page_item > a {
  color: var(--primary-light);
  font-weight: 600;
}
.docs-layout > .entry-content {
  flex: 1;
  min-width: 0;
}
@media (max-width: 900px) {
  .docs-layout {
    flex-direction: column;
    /* In a column the cross axis is the WIDTH, and the align-items: flex-start
       above (which the sticky sidebar needs in the desktop row) then sizes
       both children to their own content instead of to the container. A page
       whose content is wider than the screen - a table is the usual case,
       its minimum width being the sum of its columns' minimum widths - pushed
       .entry-content past the right screen edge, taking the boxed elements
       inside it along. Nothing was visible of it because
       body { overflow-x: hidden } cuts the overhang off silently.
       The sidebar was spared only because it carries width: 100% below. */
    align-items: stretch;
  }
  .docs-sidebar {
    position: static;
    width: 100%;
    flex: none;
  }
}

/* -------------------------------------------------------------------------
 * Running text in the documentation.
 *
 * The landing page is built from cards and navigation lists, so main.css
 * resets the browser defaults sitewide: `* { margin: 0; padding: 0 }` and
 * `ul { list-style: none }`. legal.css puts bullets and an indent back, but
 * only inside `.legal-section` - and Gutenberg content is FLAT: the
 * documentation pages have no `.legal-section` wrapper anywhere, so nothing
 * ever restored them there. A 19-item list read as one unbroken block of text.
 *
 * The core block styles were never the missing piece and adding them would not
 * have helped: WordPress ships the list block as `ol,ul{box-sizing:border-box}`
 * and leaves bullets to the browser's own stylesheet - which is exactly what
 * the reset above had already overridden. This is theme CSS, so the fix is
 * theme CSS, scoped to the documentation so the rest of the site is untouched.
 *
 * Lists are addressed through `.wp-block-list`, the class the editor puts on
 * every list block (verified: all 194 lists in the documentation carry it).
 * That keeps the rules structurally unable to reach the navigation lists -
 * table of contents, pager, sidebar - which want to stay bullet-free.
 * ------------------------------------------------------------------------- */

/* Headings: h2 and h3 both rendered at 1.5rem (legal.css section size vs. the
   global h3 size), which left the two levels distinguishable by colour alone.
   Give the section headings their own size so a subsection reads as one. */
.docs-content .entry-content h2 {
  font-size: 1.75rem;
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
}
.docs-content .entry-content h3 {
  font-size: 1.25rem;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
}
/* A subsection heading directly below its section heading does not start a new
   section - it belongs to the one just opened. */
.docs-content .entry-content h2 + h3 {
  margin-top: var(--spacing-md);
}

/* Reference pages are read in long stretches; the landing page's tighter
   paragraph rhythm is not made for that. Two paragraphs are not running text
   and keep their own spacing: the heading of the table of contents
   (.docs-toc-title) and the date/reading-time line (.docs-meta). */
.docs-content .entry-content p:not(.docs-toc-title):not(.docs-meta) {
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
}

/* "Zuletzt aktualisiert / Lesezeit" (functions.php ->
   feeflow_docs_page_meta). Sits above the table of contents, in the quiet
   tone of the image captions - it tells the reader what they are in for, it
   is not part of what they came to read. */
.docs-content .entry-content .docs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
  margin: 0 0 var(--spacing-lg);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* Separator between the two facts, drawn like the one in the breadcrumb. On
   a narrow screen the line wraps and the dot then opens the second row,
   which is why it belongs to the item behind it and not to the one in
   front. */
.docs-content .entry-content .docs-meta > * + *::before {
  content: '\00b7\00a0';
  color: var(--text-muted);
}
/* Measured: the two facts need about 370px and the text column on a 390px
   phone offers 342, so on a phone they wrap - and the second line then opens
   with the separator dot hanging off its front. Below 480px (a text column of
   432px, which the longest of these lines still fits into) they get a line
   each and the dot goes away. */
@media (max-width: 480px) {
  .docs-content .entry-content .docs-meta {
    display: block;
  }
  /* The container is no longer a flex box, so its children have to break the
     line themselves - as inline elements they would wrap mid-sentence. */
  .docs-content .entry-content .docs-meta > * {
    display: block;
  }
  .docs-content .entry-content .docs-meta > * + *::before {
    content: none;
  }
}

/* Bullets, numbers and the indent that makes them readable as a list. */
.docs-content .entry-content ul.wp-block-list,
.docs-content .entry-content ol.wp-block-list {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.docs-content .entry-content ul.wp-block-list {
  list-style: disc;
}
.docs-content .entry-content ol.wp-block-list {
  list-style: decimal;
}
.docs-content .entry-content .wp-block-list li {
  margin-bottom: var(--spacing-xs);
  line-height: 1.7;
}
/* A nested list belongs to the item above it, not to the text after it. */
.docs-content .entry-content .wp-block-list .wp-block-list {
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}
.docs-content .entry-content ul.wp-block-list ul.wp-block-list {
  list-style: circle;
}

/* Quotes ("Tipp: …"): the same marker legal.css gives them inside a section
   card, which the flat documentation content never reaches. */
.docs-content .entry-content .wp-block-quote {
  border-left: 3px solid var(--primary-color);
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
  margin: 0 0 var(--spacing-lg);
}
.docs-content .entry-content .wp-block-quote p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Hinweisboxen (callouts) in the documentation.
 *
 * The Markdown converter turns the GitHub alert syntax
 *
 *   > [!TIP]
 *   > Text of the hint.
 *
 * into an ordinary wp:group carrying .docs-callout plus
 * .docs-callout--<type>, with the German label ("Tipp") as the group's first
 * paragraph (feeflow-vue/scripts/wp-docs-push/blocks.mjs). Everything below
 * is the presentation for those classes - no block registration, no server
 * code: what arrives is a group of paragraphs and it stays editable as one
 * in WordPress.
 *
 * COLORS. The palette has traffic-light tokens already
 * (--success-color/--warning-color/--error-color, assets/css/theme.css), but
 * they are picked to be a border or an icon on the dark background and are
 * unusable as TEXT on a light one: #f59e0b on white is 2.1:1, less than half
 * of what WCAG AA asks for. They are also in use elsewhere (form.css,
 * wefox.css), so they cannot be re-tuned here. Hence one token pair per type
 * and per theme:
 *
 *   --callout-<type>-accent    left edge, icon and label text
 *   --callout-<type>-surface   background of the box
 *
 * Measured with the WCAG 2.1 contrast formula against the surfaces the
 * colors actually meet, worst value per column:
 *
 *                             dark        light      AA needs
 *   label on the box          7.10:1      5.30:1     4.5:1  (text)
 *   running text on the box  12.79:1      6.15:1     4.5:1  (text)
 *   accent on the page        8.96:1      6.47:1     3:1    (the edge is a
 *                                                            graphical object)
 *
 * The tokens live in this file and not in assets/css/theme.css, where the
 * rest of the color tokens sit, for a practical reason: theme.css is pulled
 * in by main.css through a bare @import and therefore carries no ?ver= of
 * its own - an edit to it is not cache-busted (see feeflow_asset_version).
 * style.css is enqueued with its own file mtime, so a change here reaches
 * returning visitors.
 * ------------------------------------------------------------------------- */

/* Dark theme (the theme's default, like the :root block in theme.css). */
:root {
  --callout-note-accent: #93c5fd;
  --callout-note-surface: #1b2e4d;
  --callout-tip-accent: #6ee7b7;
  --callout-tip-surface: #12352b;
  --callout-important-accent: #a5b4fc;
  --callout-important-surface: #252654;
  --callout-warning-accent: #fcd34d;
  --callout-warning-surface: #382a17;
  --callout-caution-accent: #fca5a5;
  --callout-caution-surface: #3b2124;
}

/* Light theme: same hues, swapped roles - the accent has to carry text on a
   pale surface now, so it is the dark end of each hue instead of the light one. */
[data-theme='light'] {
  --callout-note-accent: #1d4ed8;
  --callout-note-surface: #dbeafe;
  --callout-tip-accent: #065f46;
  --callout-tip-surface: #d1fae5;
  --callout-important-accent: #4338ca;
  --callout-important-surface: #e0e7ff;
  --callout-warning-accent: #92400e;
  --callout-warning-surface: #fef3c7;
  --callout-caution-accent: #b91c1c;
  --callout-caution-surface: #fee2e2;
}

/* The box. Same vertical rhythm as the other block elements in the
   documentation (images, tables), and the colored edge on the left rather
   than a full frame - the box has to read as an aside of the running text,
   not as a second card inside the page.

   The three custom properties are declared here as well as on every type
   below, so a box whose modifier class went missing - one copied inside the
   block editor, say - still resolves them. An unresolved var() would leave
   the symbol as a solid colored square rather than as no symbol at all. */
.docs-content .entry-content .docs-callout {
  --callout-accent: var(--callout-note-accent);
  --callout-surface: var(--callout-note-surface);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--callout-surface);
  border-left: 4px solid var(--callout-accent);
  border-radius: var(--border-radius-sm);
}

/* Each type only names its two colors and its symbol; the box itself is
   described once, above, in terms of --callout-accent/--callout-surface.

   The symbols are decorative and therefore belong in CSS, not in the markup:
   the German label sits right next to them and carries the meaning, so a
   screen reader announcing "Achtung" is complete without them. Drawn as a
   mask over currentColor rather than as a colored image, so one file follows
   the accent color through both themes. */
.docs-content .entry-content .docs-callout--note {
  --callout-accent: var(--callout-note-accent);
  --callout-surface: var(--callout-note-surface);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.docs-content .entry-content .docs-callout--tip {
  --callout-accent: var(--callout-tip-accent);
  --callout-surface: var(--callout-tip-surface);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.8.8 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}
.docs-content .entry-content .docs-callout--important {
  --callout-accent: var(--callout-important-accent);
  --callout-surface: var(--callout-important-surface);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 7v4'/%3E%3Cpath d='M12 14h.01'/%3E%3C/svg%3E");
}
.docs-content .entry-content .docs-callout--warning {
  --callout-accent: var(--callout-warning-accent);
  --callout-surface: var(--callout-warning-surface);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.docs-content .entry-content .docs-callout--caution {
  --callout-accent: var(--callout-caution-accent);
  --callout-surface: var(--callout-caution-surface);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* The core "flow" layout of the group block puts a 24px margin-block-start on
   every child through a :where() rule (zero specificity). Inside a box that
   tall a gap separates the label from the sentence it labels. */
.docs-content .entry-content .docs-callout > * {
  margin-top: 0;
}
/* ...and the last element must not push the padding open at the bottom. */
.docs-content .entry-content .docs-callout :last-child {
  margin-bottom: 0;
}

.docs-content .entry-content .docs-callout .docs-callout__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--callout-accent);
}
.docs-content .entry-content .docs-callout .docs-callout__label::before {
  content: '';
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--callout-icon) center / contain no-repeat;
  mask: var(--callout-icon) center / contain no-repeat;
}

/* .entry-content colors every link --primary-light, which is a pale indigo
   made for the dark background and lands at 2.6:1 on a pale yellow box. The
   accent of the box is measured against exactly that surface, so a link
   inside a callout takes it - the underline .entry-content already draws
   stays, so the link is never marked by color alone. */
.docs-content .entry-content .docs-callout a {
  color: var(--callout-accent);
}

/* Inline code (file extensions, field names) - set off from the running text
   without turning into a box of its own. */
.docs-content .entry-content code {
  padding: 0.1em 0.35em;
  background-color: var(--card-bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 0.9em;
}

/* Screenshots in the documentation: a quiet frame plus caption, so a screenshot
   reads as an illustration rather than as part of the running text. Border
   color reuses the theme's existing --border-color (dark/light aware) -
   no new color introduced. */
.docs-content .wp-block-image {
  margin: var(--spacing-xl) 0;
}
.docs-content .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}
.docs-content .wp-block-image figcaption {
  margin-top: var(--spacing-xs);
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: left;
}

/* Wide tables: a table cannot render narrower than the sum of its columns'
   minimum widths, so on a phone it would either overflow the text column or
   squeeze its columns into unreadable slivers. Let the figure scroll
   horizontally instead - the table stays complete, the page does not move. */
.docs-content .wp-block-table {
  overflow-x: auto;
  margin: var(--spacing-xl) 0;
}

/* Table rendering. Left to itself, the core block style draws 1px borders in
   the CURRENT TEXT COLOUR (a hard near-black grid in light mode) and centres
   the header row while the cells below it stay left-aligned. Same treatment as
   the tables inside the legal section cards instead: theme border colour,
   a header row that reads as one, and room to breathe in the cells. */
.docs-content .entry-content .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}
.docs-content .entry-content .wp-block-table th,
.docs-content .entry-content .wp-block-table td {
  border: 1px solid var(--border-color);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.docs-content .entry-content .wp-block-table th {
  background-color: var(--darker-bg);
  font-weight: 600;
}

/* Two things belong to a table that really does scroll, and to no other:
   it has to be reachable by keyboard, and it has to be visible that there is
   more of it to the right. Whether a table overflows depends on the window
   width, so assets/js/docs-tables.js measures it and marks the ones that do
   with .is-scrollable (together with role/aria-label/tabindex - a tab stop on
   a table that fits would lead nowhere). Everything below hangs off that
   class, so a table that fits keeps exactly the appearance it has today.

   The focus ring comes from the sitewide *:focus-visible rule in main.css;
   once the box has focus, the arrow keys scroll it by themselves. */
.docs-content .entry-content p.docs-table-hint {
  display: none;
}
.docs-content .entry-content .wp-block-table.is-scrollable + p.docs-table-hint {
  display: block;
  /* The note belongs to the table above it, so it takes over the figure's
     bottom margin (reduced below) and keeps the spacing to the next
     paragraph. Quiet tone of the image captions - it is a hint, not content. */
  margin: var(--spacing-xs) 0 var(--spacing-xl);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.docs-content .entry-content .wp-block-table.is-scrollable + p.docs-table-hint::before {
  content: '\2194\00a0'; /* Arrows pointing the way the table moves. */
}
.docs-content .wp-block-table.is-scrollable {
  margin-bottom: var(--spacing-xs);
}

/* Highlight the whole active branch, not just the current page - with three
   levels the reader otherwise cannot tell which section they are in.
   WordPress adds "current_page_ancestor" to every parent li of the current
   page automatically (Walker_Page::get_classes). */
.docs-sidebar .current_page_ancestor > a {
  color: var(--text-primary);
  font-weight: 600;
}

/* Draft pages in the sidebar (visible to logged-in editors only - see
   page-docs.php). Marked clearly as drafts so nobody mistakes them for live
   content; dashed underline plus a small badge instead of a new color. */
.docs-sidebar .docs-draft-page > a {
  font-style: italic;
  text-decoration: underline dashed;
}
.docs-sidebar .docs-draft-page > a::after {
  content: 'Entwurf';
  display: inline-block;
  margin-left: var(--spacing-xs);
  padding: 0 0.35em;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  vertical-align: middle;
}

/* The sidebar as a disclosure widget. Always open on desktop, COLLAPSED BY
   DEFAULT on narrow screens so the eventual 35 navigation entries do not
   push the content off the first screenful (spec section 5.1, point 3). With
   only four entries today the difference is easy to miss, which is exactly
   why the default is pinned here rather than left to look right by accident.

   No JavaScript, and deliberately NOT <details>/<summary>: Chrome suppresses
   the content of a <details> via an internal ::details-content box whose
   visibility is tied to the native "open" attribute, and nothing ever
   re-sets that attribute once the media query stops applying - so a sidebar
   collapsed below the breakpoint stayed gone forever above it, with no
   visible toggle left to reopen it (see task-9-report.md, fix round 1).

   The checkbox hack avoids that, and the direction of the rules is what
   keeps it avoided: BOTH the hiding rule and the revealing rule live inside
   the media query, so above 900px the only rule that applies to the sidebar
   nav is the unconditional `.docs-sidebar nav { display: block }` further
   up. There is no selector anywhere outside the media query that can hide
   the nav, whatever state the checkbox happens to be in. */
.docs-sidebar-toggle-checkbox {
  display: none;
}
.docs-sidebar-toggle {
  display: none;
  cursor: pointer;
  font-weight: 700;
  padding: var(--spacing-xs) 0;
}
.docs-sidebar-toggle::after {
  content: ' ▾';
}
@media (max-width: 900px) {
  .docs-sidebar-toggle-checkbox {
    display: block;
    /* Visually hidden but still focusable/keyboard-operable - unlike
       display: none, which would drop it from the tab order and leave the
       label with nothing to toggle via the keyboard. Standard
       screen-reader-text-style clipping (see .screen-reader-text above). */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .docs-sidebar-toggle {
    display: block;
  }
  /* The checkbox itself is visually hidden, so its own focus ring (from the
     sitewide *:focus-visible rule) would be invisible too - show the ring on
     the visible label instead. */
  .docs-sidebar-toggle-checkbox:focus-visible ~ .docs-sidebar-toggle {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
  }
  /* Collapsed unless the reader opens it. The unconditional
     `.docs-sidebar nav { display: block }` above has the same specificity,
     so this later rule wins inside the media query; the :checked rule below
     is more specific still and wins over both. */
  .docs-sidebar nav {
    display: none;
  }
  .docs-sidebar-toggle-checkbox:checked ~ nav {
    display: block;
  }
  /* Point the arrow the way the next click will move it. */
  .docs-sidebar-toggle::after {
    content: ' \25B8';
  }
  .docs-sidebar-toggle-checkbox:checked ~ .docs-sidebar-toggle::after {
    content: ' \25BE';
  }
}

/* main.css styles EVERY site <nav> as the header's flex row (padding, a 3rem
   bottom margin, position: relative, z-index 999) - which is why
   ".docs-sidebar nav" above resets it. The three navigation elements below are
   <nav> too and need the same reset, so it is shared here and each of them
   only has to describe itself afterwards. */
.docs-breadcrumb,
.docs-toc,
.docs-pager {
  display: block;
  margin: 0;
  padding: 0;
  position: static;
  z-index: auto;
}

/* Breadcrumb above the page title (functions.php ->
   feeflow_docs_breadcrumb). Left aligned although the h1 below it is
   centered: it is a position indicator, not a heading, and only reads as a
   trail when it starts at the same edge as the text it belongs to. */
.docs-breadcrumb {
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
}
.docs-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.docs-breadcrumb li {
  color: var(--text-secondary);
}
.docs-breadcrumb li + li::before {
  content: '\203A'; /* single right angle quote - a separator, not text */
  margin-right: var(--spacing-xs);
  color: var(--text-muted);
}
.docs-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.docs-breadcrumb a:hover {
  color: var(--primary-light);
}
.docs-breadcrumb [aria-current='page'] {
  color: var(--text-primary);
}

/* "Auf dieser Seite" (functions.php -> feeflow_docs_table_of_contents).
   Same card treatment as the sidebar so it reads as navigation rather than
   as the first section of the text. */
.docs-toc {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}
.docs-toc-title {
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}
.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.docs-toc li {
  margin-bottom: var(--spacing-xs);
}
.docs-toc-level-3 {
  padding-left: var(--spacing-md);
}
/* .entry-content underlines every link (see above) - too loud for a list of
   twenty jump targets. */
.docs-toc a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
}
.docs-toc a:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

/* "Zurück"/"Weiter" at the foot of the page (functions.php ->
   feeflow_docs_pager). Two cards on one row; on a page that only has one of
   the two, margin-left: auto keeps "Weiter" on the right where readers look
   for it. */
.docs-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}
.docs-pager a {
  flex: 1 1 40%;
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-fast);
}
.docs-pager a:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}
.docs-pager-next {
  margin-left: auto;
  text-align: right;
}
.docs-pager-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.docs-pager-title {
  font-weight: 600;
}

/* "War diese Seite hilfreich?" (functions.php ->
   feeflow_docs_feedback_widget, assets/js/docs-feedback.js). Same card
   treatment as the table of contents, so the question reads as part of the
   page furniture rather than as a last paragraph of the text.

   Hidden until the script has run: the buttons cannot send anything without
   it, and .is-ready is also what keeps the reader from seeing the question
   for a moment before it is replaced by the thank-you they already earned on
   an earlier visit. */
.docs-content .entry-content .docs-feedback {
  display: none;
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}
.docs-content .entry-content .docs-feedback.is-ready {
  display: block;
}
/* The paragraph rhythm of the running text (margin-bottom, line-height)
   reaches into the box; these two paragraphs are labels, not prose. */
.docs-content .entry-content .docs-feedback .docs-feedback-title {
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
  line-height: 1.4;
}
.docs-content .entry-content .docs-feedback .docs-feedback-message {
  margin-bottom: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}
.docs-content .entry-content .docs-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
/* display: flex above outranks the browser's own [hidden] { display: none },
   so the script's actions.hidden = true would otherwise do nothing at all. */
.docs-content .entry-content .docs-feedback [hidden] {
  display: none;
}
/* Real theme buttons (.btn .btn-secondary, like the search button in the
   sidebar), so colors, radius and hover follow the light/dark theme on their
   own. Only the size is dialled down - the .btn default is made for the
   landing page. */
.docs-content .entry-content .docs-feedback .btn {
  padding: var(--spacing-xs) var(--spacing-lg);
  font-size: 0.9rem;
}
/* The emoji is decorative (aria-hidden in the markup) - the word beside it is
   the answer. Sized up a little so it reads as a symbol and not as a glyph
   that fell into the text. */
.docs-content .entry-content .docs-feedback-emoji {
  font-size: 1.1em;
  margin-right: 0.15em;
}

/* Search inside the documentation (functions.php ->
   feeflow_docs_search_form). Sits in the sidebar card, so it borrows the
   page background to stay legible against it. */
.docs-search {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}
.docs-search input[type='search'] {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
  background-color: var(--dark-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
}
/* The button is a real theme button (.btn .btn-secondary, the same pair the
   "Login" and "Registrierung" links in the header use), so its colors, radius
   and hover behaviour come from main.css and follow the light/dark theme on
   their own. Only the size is dialled down here: the .btn default of
   1rem/2rem padding would dwarf a 240px sidebar. The newsletter form does the
   same thing (form.css: .newsletter-form .btn). */
.docs-search .btn {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Result list (search-docs.php). */
.docs-search-summary {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}
.docs-search-results {
  list-style: none;
  margin: 0 0 var(--spacing-xl);
  padding: 0;
}
.docs-search-results li {
  margin-bottom: var(--spacing-lg);
}
.docs-search-results a {
  font-weight: 600;
}
.docs-search-results p {
  margin-top: var(--spacing-xs);
  color: var(--text-secondary);
}

/* "Link kopieren" on the headings (functions.php -> feeflow_docs_anchor_link,
   assets/js/docs-anchors.js). Quiet by default so it never competes with the
   heading it belongs to. */
.docs-content .entry-content h2 .docs-anchor,
.docs-content .entry-content h3 .docs-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-xs);
  padding: 0 0.15em;
  color: var(--text-muted);
  /* .entry-content underlines every link - far too loud for an icon. */
  text-decoration: none;
  vertical-align: middle;
  opacity: 0;
  transition:
    opacity var(--transition-fast),
    color var(--transition-fast);
}
/* Revealed on hover AND on focus. Hover alone would put the symbol out of
   reach for anyone navigating by keyboard: the link stays in the tab order
   either way (opacity, not display/visibility), but at opacity 0 its focus
   ring would be invisible too. */
.docs-content .entry-content h2:hover .docs-anchor,
.docs-content .entry-content h3:hover .docs-anchor,
.docs-content .entry-content .docs-anchor:hover,
.docs-content .entry-content .docs-anchor:focus,
.docs-content .entry-content .docs-anchor:focus-visible {
  opacity: 1;
}
.docs-content .entry-content .docs-anchor:hover,
.docs-content .entry-content .docs-anchor:focus {
  color: var(--primary-light);
}
.docs-content .entry-content .docs-anchor svg {
  display: block;
}
/* Touch devices have no hover state at all, so a hover-only symbol would
   simply not exist on a phone. Show it permanently there, in the muted colour
   it already uses. */
@media (hover: none) {
  .docs-content .entry-content h2 .docs-anchor,
  .docs-content .entry-content h3 .docs-anchor {
    opacity: 1;
  }
}

/* Feedback for the copy (page-docs.php renders the live region, the script
   only ever changes its text). Above the sticky navigation, which tops out at
   z-index 1002 in main.css. */
.docs-copy-status {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-xl);
  transform: translateX(-50%);
  z-index: 1003;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  /* Hidden by transparency rather than display: none - the region has to stay
     in the accessibility tree between updates to be announced reliably. */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.docs-copy-status:not(:empty) {
  opacity: 1;
}

/* Maps/YouTube consent overlay (functions.php -> feeflow_embed_consent_gate).
   The defused iframe keeps its width/height attributes, so the wrapper has
   the final size and the overlay simply covers it. */
.embed-consent {
  position: relative;
}
/* The video sits in a 16:9 .video-container and fills it. */
.video-container .embed-consent {
  height: 100%;
}
.embed-consent-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
}
.embed-consent-overlay p {
  max-width: 34rem;
  color: var(--text-secondary);
}

/* Screen reader text (accessibility / WP convention) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Live parity (measured against https://www.feeflow.at): the static site's
   headers are taller than ours - 64px on sub-pages (.legal-header padding +
   nav margin), 32px on the landing templates. */
.site-header {
  padding-bottom: 64px;
}
.home .site-header,
.page-template-page-full-width .site-header {
  padding-bottom: 32px;
}

/* Live parity: on the static kontakt page the form card sits in a classless
   <section> that receives the global section padding (4rem top/bottom). */
.legal-content .contact-form-container {
  margin-top: 80px; /* collapses with the h1 margin-bottom (16px) to the live 80px gap */
  margin-bottom: 64px;
}

/* The core button wrapper is an inline-block line box and overhangs the
   link by a few px, which widened wrapped CTA rows - hug the link. */
.wp-block-button.is-style-feeflow-primary,
.wp-block-button.is-style-feeflow-secondary {
  display: flex;
}

/* Editor-only approximation of the feeflow button styles (the real classes
   are injected at render time, see feeflow_render_button_style). Scoped to
   the editor canvas so the front end never sees these rules. */
.editor-styles-wrapper .wp-block-button.is-style-feeflow-primary .wp-block-button__link {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
  color: #fff;
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-weight: 700;
  font-size: 1.125rem;
}
.editor-styles-wrapper .wp-block-button.is-style-feeflow-secondary .wp-block-button__link {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
  color: var(--text-primary);
  border: 2px solid var(--primary-color);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-weight: 700;
  font-size: 1.125rem;
}