/**
 * FTM Page Sections — Design Tokens (default values)
 *
 * These CSS custom properties supply the default visual configuration for the
 * page-sections framework.  Every property can be overridden by the active
 * theme: create a file at
 *
 *   {theme}/assets/css/page-sections-tokens.css
 *
 * and define whichever tokens need different values for your site.  The theme
 * file is loaded after this one, so any property you redefine there wins.
 *
 * ─────────────────────────────────────────────
 * Token groups
 * ─────────────────────────────────────────────
 * 1. Layout & spacing
 * 2. Typography
 * 3. Colour
 * 4. Header decoration
 * ─────────────────────────────────────────────
 *
 * @package ftm-page-sections
 */

:root {

	/* ── 1. Layout & spacing ─────────────────────────────────────────── */

	/**
	 * Horizontal padding applied to every .page-section.
	 * Inherit the theme gutter when the theme defines --gutter-width,
	 * otherwise fall back to 5vw so sections look reasonable out of the box.
	 */
	--ftps-gutter-width: var(--gutter-width, 5vw);

	/**
	 * Maximum width of the centred .page-section-inner wrapper.
	 * Inherits the theme's wide-layout max-width when available.
	 */
	--ftps-max-width-wide: var(--max-width-wide, 1200px);

	/**
	 * Vertical margin between page sections (mobile / default).
	 * Inherits the theme's xlarge spacing scale when available.
	 */
	--ftps-section-margin: var(--space-xlarge, 2.5rem);

	/**
	 * Vertical margin between page sections at the medium breakpoint
	 * (≥ 45 em).  Inherits the theme's xxlarge scale when available.
	 */
	--ftps-section-margin-md: var(--space-xxlarge, 4rem);

	/**
	 * Reduced vertical margin used for utility sections such as product
	 * results and archive-filter rows.
	 */
	--ftps-section-margin-compact: var(--space-large, 1.5rem);

	/**
	 * Maximum width of the .page-section-header text block.
	 */
	--ftps-header-max-width: 760px;

	/**
	 * Vertical margin above / below the .page-section-header block.
	 */
	--ftps-header-margin: 20px;

	/**
	 * Default vertical margin used by inline section elements such as
	 * .page-section-header-title and .ft-actions.
	 */
	--ftps-element-margin: 1rem;

	/**
	 * Half-gutter used to create negative-margin flush layout on
	 * .menu.actions and matching positive margin on .actions li.
	 */
	--ftps-actions-menu-gutter: 0.5em;

	/**
	 * Left padding added between the filtered-products sidebar and the
	 * main product grid (.wc-product-columns).
	 */
	--ftps-sidebar-gap: 20px;

	/**
	 * Width of the main product grid column when a sidebar is present.
	 */
	--ftps-sidebar-content-width: 70%;

	/* ── 2. Typography ───────────────────────────────────────────────── */

	/**
	 * Top margin of the .ftps-section-title element.
	 */
	--ftps-section-title-margin-top: var(--space-xlarge, 2.5rem);

	/**
	 * Font size for the overline variant of the section title
	 * (when both a title and descriptive text are present).
	 */
	--ftps-section-title-overline-size: 0.8888em;

	/**
	 * Line-height for the overline variant.
	 */
	--ftps-section-title-overline-line-height: 1.5;

	/**
	 * Font size for action links that are not styled as buttons.
	 */
	--ftps-actions-link-size: 0.8888em;

	/* ── 3. Colour ───────────────────────────────────────────────────── */

	/**
	 * Default accent colour used by banner sections when no per-section
	 * accent-color is chosen in the editor.
	 */
	--ftps-banner-accent-color: var(--primary-color, #c81e11);

	/**
	 * Default text colour for banner sections.
	 */
	--ftps-banner-text-color: inherit;

	/* ── 4. Header decoration ─────────────────────────────────────────── */

	/**
	 * CSS `content` value for the .ftps-header::after decorative rule.
	 *
	 * Set to `none` by default so the plugin ships with NO decoration;
	 * the pseudo-element is not rendered at all and consumes no space.
	 * Themes that want a decorative rule (e.g. a zig-zag) should set
	 * this to an empty string `""` in their token override file to enable
	 * the element, and pair it with --ftps-header-rule-image.
	 */
	--ftps-header-rule-content: none;

	/**
	 * Background image for the .ftps-header::after decorative rule.
	 *
	 * Defaults to `none` (no image).  Themes supply their own image here
	 * using a URL relative to their token override CSS file, e.g.:
	 *
	 *   --ftps-header-rule-image: url(../images/my-divider.svg);
	 */
	--ftps-header-rule-image: none;

	/**
	 * Height of the decorative rule element.
	 */
	--ftps-header-rule-height: 6px;

	/**
	 * Width of the decorative rule element.
	 */
	--ftps-header-rule-width: 70px;

	/**
	 * Vertical spacing above and below the decorative rule.
	 * Inherits the theme's small spacing scale when available.
	 */
	--ftps-header-rule-margin: var(--space-small, 0.75rem);

	/* ── 5. Banner section ───────────────────────────────────────────── */

	/**
	 * Aspect-ratio padding applied to .ftps-banner-image on mobile to
	 * give the image a visible height before the image src loads.
	 */
	--ftps-banner-image-padding-bottom: 10%;

	/**
	 * Border-radius of the outer .page-section-banner wrapper.
	 * Inherits the theme's global border-radius when available.
	 */
	--ftps-banner-border-radius: var(--border-radius, 3px);

	/**
	 * Border-radius of the inner .banner-inner card container.
	 */
	--ftps-banner-inner-border-radius: 10px;

	/**
	 * Maximum width of the .banner-inner container.
	 */
	--ftps-banner-max-width: 1200px;

	/**
	 * Padding applied to the banner content area.
	 * Inherits the theme's normal spacing scale when available.
	 */
	--ftps-banner-content-padding: var(--space-normal, 1rem);

	/* ── 6. Simple Callout section ───────────────────────────────────── */

	/**
	 * Border-radius of the .simple-callout-inner card container.
	 */
	--ftps-simple-callout-border-radius: 10px;

	/**
	 * Maximum width of the .simple-callout-inner container.
	 */
	--ftps-simple-callout-max-width: 1200px;

	/**
	 * Horizontal padding of the .simple-callout-content block.
	 * Inherits the theme's large spacing scale when available.
	 */
	--ftps-simple-callout-content-padding: var(--space-large, 1.5rem);

	/**
	 * Bottom margin of the .ft-actions row inside a simple callout
	 * (mobile / default layout).
	 * Inherits the theme's xlarge spacing scale when available.
	 */
	--ftps-simple-callout-actions-margin-bottom: var(--space-xlarge, 2.5rem);

	/**
	 * Bottom margin of .simple-callout-title.
	 */
	--ftps-simple-callout-title-margin-bottom: 1rem;

	/**
	 * Width of the .simple-callout-image column in the wide two-column layout.
	 */
	--ftps-simple-callout-image-width: 60%;

	/**
	 * Spacing value used for title top-margin and actions bottom-margin
	 * inside a simple callout at the wide breakpoint.
	 * Inherits the theme's normal spacing scale when available.
	 */
	--ftps-simple-callout-spacing-normal: var(--space-normal, 1rem);

	/* ── 7. Hero section ─────────────────────────────────────────────── */

	/**
	 * Maximum width of the .hero-inner container at the wide breakpoint.
	 */
	--ftps-hero-inner-max-width: 1200px;

	/**
	 * Right padding of the hero content column when side-by-side with
	 * the hero image.
	 * Inherits the theme's xlarge spacing scale when available.
	 */
	--ftps-hero-content-padding-right: var(--space-xlarge, 2.5rem);

	/**
	 * Maximum width of the .ftps-hero-content column in the two-column layout.
	 */
	--ftps-hero-content-max-width: 43%;

	/**
	 * Font size of .hero-title (the eyebrow / label text) at mobile sizes.
	 */
	--ftps-hero-title-size: 0.8888em;

	/**
	 * Line-height for .hero-title and body text inside the hero at mobile sizes.
	 */
	--ftps-hero-body-line-height: 1.5;

	/**
	 * Font size of the hero heading (h2 inside .hero-text) at the wide breakpoint.
	 */
	--ftps-hero-heading-size-xl: 4.2777em;

	/**
	 * Line-height of the hero heading at the wide breakpoint.
	 */
	--ftps-hero-heading-line-height-xl: 1.13;

	/**
	 * Extra-small spacing unit used for hero element margins.
	 * Inherits the theme's xsmall spacing scale when available.
	 */
	--ftps-hero-spacing-xs: var(--space-xsmall, 0.5rem);

	/**
	 * Normal spacing unit used for hero element margins at wider breakpoints.
	 * Inherits the theme's normal spacing scale when available.
	 */
	--ftps-hero-spacing-normal: var(--space-normal, 1rem);

	/* ── 8. Media Content section ────────────────────────────────────── */

	/**
	 * Maximum width of the .media-content-inner / .ps-mc-* container.
	 * Inherits the theme's wide layout max-width when available.
	 */
	--ftps-media-content-max-width: var(--max-width-wide, 1200px);

	/**
	 * Column gap used between the media and content panes.
	 * Applied as padding on each side of the two-column layout.
	 */
	--ftps-media-content-gap: 20px;

	/**
	 * Per-column horizontal padding for the new-style
	 * .ftps-media-content-container two-column layout.
	 * Inherits the theme's normal spacing scale when available.
	 */
	--ftps-media-content-col-padding: var(--space-normal, 1rem);

	/* ── 9. Accordion section ────────────────────────────────────────── */

	/**
	 * Icon / chevron colour for accordion row titles.
	 * Falls through to the per-section --accordion-title-color override
	 * when present, then to the theme's blue colour.
	 */
	--ftps-accordion-title-color: var(--accordion-title-color, var(--blue, #1184c8));

	/**
	 * Border colour used on accordion row buttons.
	 * Inherits the theme's global border colour when available.
	 */
	--ftps-accordion-border-color: var(--border-color, #dadada);

	/**
	 * Border-radius of accordion row buttons.
	 * Inherits the theme's global border-radius when available.
	 */
	--ftps-accordion-border-radius: var(--border-radius, 3px);

	/**
	 * Font size of the chevron icon inside accordion row titles.
	 */
	--ftps-accordion-icon-size: 1.25em;

	/**
	 * Vertical margin above and below each .ps-accordion-item row.
	 */
	--ftps-accordion-item-margin: 1rem;

	/**
	 * Right padding on button.accordionTitle to make room for the arrow icon.
	 */
	--ftps-accordion-button-padding: 2rem;

	/**
	 * Distance from the right edge used to position the arrow icon absolutely
	 * inside button.accordionTitle.
	 */
	--ftps-accordion-arrow-inset: 1rem;

	/* ── 10. Grouped Callouts section ────────────────────────────────── */

	/**
	 * Vertical margin above/below the .grouped-callouts-container.
	 * Inherits the theme's normal spacing scale when available.
	 */
	--ftps-grouped-callouts-margin: var(--space-normal, 1rem);

	/**
	 * Top margin between consecutive .grouped-callout items.
	 * Inherits the theme's large spacing scale when available.
	 */
	--ftps-grouped-callout-gap: var(--space-large, 1.5rem);

	/* ── 11. WYSIWYG section ─────────────────────────────────────────── */

	/**
	 * Horizontal margin of the .page-section-wysiwyg container (mobile).
	 */
	--ftps-wysiwyg-margin: 20px;

	/**
	 * Block (vertical) margin of .page-section-wysiwyg at the medium
	 * breakpoint.
	 */
	--ftps-wysiwyg-margin-block-md: 40px;

	/**
	 * Inline (horizontal) margin of .page-section-wysiwyg at the medium
	 * breakpoint.
	 */
	--ftps-wysiwyg-margin-inline-md: 50px;

	/**
	 * Maximum width of the .wysiwyg-wrap inner container.
	 * Inherits the theme's article max-width when available.
	 */
	--ftps-wysiwyg-max-width: var(--max-width-article, 790px);
}