/* Toronto Lock Change foundation. theme.json owns the values; stable aliases
 * connect the native block editor and every responsive page composition. */
:root, .editor-styles-wrapper {
 --matrix-bg: var(--wp--custom--design--color--bg);
 --matrix-bg-soft: var(--wp--custom--design--color--bg-soft);
 --matrix-bg-tint: var(--wp--custom--design--color--bg-tint);
 --matrix-bg-dark: var(--wp--custom--design--color--bg-dark);
 --matrix-surface: var(--wp--custom--design--color--surface);
 --matrix-surface-dark: var(--wp--custom--design--color--surface-dark);
 --matrix-text: var(--wp--custom--design--color--text);
 --matrix-text-muted: var(--wp--custom--design--color--text-muted);
 --matrix-text-on-dark: var(--wp--custom--design--color--text-on-dark);
 --matrix-text-on-dark-muted: var(--wp--custom--design--color--text-on-dark-muted);
 --matrix-green: var(--wp--custom--design--color--green);
 --matrix-accent: var(--wp--custom--design--color--accent);
 --matrix-green-bright: var(--wp--custom--design--color--green-bright);
 --matrix-green-deep: var(--wp--custom--design--color--green-deep);
 --matrix-border: var(--wp--custom--design--color--border);
 --matrix-border-strong: var(--wp--custom--design--color--border-strong);
 --matrix-focus: var(--wp--custom--design--color--focus);
 --matrix-error: var(--wp--custom--design--color--error);
 --matrix-error-border: var(--wp--custom--design--color--error-border);
 --matrix-error-bg: var(--wp--custom--design--color--error-bg);
 --matrix-disabled-bg: var(--wp--custom--design--color--disabled-bg);
 --matrix-disabled-text: var(--wp--custom--design--color--disabled-text);
 --matrix-on-dark-accent: var(--wp--custom--design--color--on-dark-accent);
 --matrix-on-dark-border: var(--wp--custom--design--color--on-dark-border);
 --matrix-on-dark-hover: var(--wp--custom--design--color--on-dark-hover);
 --matrix-radius-small: var(--wp--custom--design--radius--small);
 --matrix-radius-button: var(--wp--custom--design--radius--button);
 --matrix-radius-standard: var(--wp--custom--design--radius--standard);
 --matrix-radius-image: var(--wp--custom--design--radius--image);
 --matrix-ease: var(--wp--custom--design--motion--ease);
 --matrix-duration-fast: var(--wp--custom--design--motion--fast);
 --matrix-duration-standard: var(--wp--custom--design--motion--standard);
 --matrix-duration-expressive: var(--wp--custom--design--motion--expressive);
 --matrix-button-height: var(--wp--custom--design--action--height);
 --matrix-button-height-compact: var(--wp--custom--design--action--compact-height);
 --matrix-button-height-prominent: var(--wp--custom--design--action--prominent-height);
 --matrix-control-height: var(--wp--custom--design--action--control-height);
 --matrix-gradient-primary: var(--wp--custom--design--action--gradient);
 --matrix-gradient-primary-hover: var(--wp--custom--design--action--gradient-hover);
 --matrix-gradient-primary-active: var(--wp--custom--design--action--gradient-active);
 --matrix-type-display: var(--wp--custom--design--type--display);
 --matrix-type-section: var(--wp--custom--design--type--section);
 --matrix-type-editorial: var(--wp--custom--design--type--editorial);
 --matrix-type-editorial-display: var(--wp--custom--design--type--editorial-display);
 --matrix-type-component: var(--wp--custom--design--type--component);
 --matrix-type-compact-heading: var(--wp--custom--design--type--compact-heading);
 --matrix-type-question: var(--wp--custom--design--type--question);
 --matrix-type-lead: var(--wp--custom--design--type--lead);
 --matrix-type-body: var(--wp--custom--design--type--body);
 --matrix-type-small: var(--wp--custom--design--type--small);
 --matrix-type-meta: var(--wp--custom--design--type--meta);
 --matrix-type-eyebrow: var(--wp--custom--design--type--eyebrow);
 --matrix-type-table: var(--wp--custom--design--type--table);
 --matrix-type-button: var(--wp--custom--design--type--button);
 --matrix-type-navigation: var(--wp--custom--design--type--navigation);
 --matrix-measure-answer: var(--wp--custom--measure--answer);
 --matrix-leading-body: var(--wp--custom--design--leading--body);
 --matrix-leading-heading: var(--wp--custom--design--leading--heading);
 --matrix-focus-outline: var(--wp--custom--design--focus--outline);
 --matrix-focus-ring: var(--wp--custom--design--focus--ring);
 --matrix-focus-offset: var(--wp--custom--design--focus--offset);
 --matrix-shadow-button: var(--wp--custom--design--shadow--button);
 --matrix-shadow-button-hover: var(--wp--custom--design--shadow--button-hover);
 --matrix-shadow-button-active: var(--wp--custom--design--shadow--button-active);
 --matrix-space-4: var(--wp--custom--design--space--4);
 --matrix-space-8: var(--wp--custom--design--space--8);
 --matrix-space-12: var(--wp--custom--design--space--12);
 --matrix-space-16: var(--wp--custom--design--space--16);
 --matrix-space-20: var(--wp--custom--design--space--20);
 --matrix-space-24: var(--wp--custom--design--space--24);
 --matrix-space-32: var(--wp--custom--design--space--32);
 --matrix-space-40: var(--wp--custom--design--space--40);
 --matrix-space-48: var(--wp--custom--design--space--48);
 --matrix-space-64: var(--wp--custom--design--space--64);
 --matrix-space-80: var(--wp--custom--design--space--80);
 --matrix-space-96: var(--wp--custom--design--space--96);
 --matrix-space-120: var(--wp--custom--design--space--120);
 --matrix-space-144: var(--wp--custom--design--space--144);
 --matrix-component-gap: var(--wp--custom--design--component--gap);
 --matrix-content-gap: var(--wp--custom--design--component--content-gap);
 --matrix-card-padding: var(--wp--custom--design--component--card-padding);
 --matrix-table-min-width: var(--wp--custom--design--table--min-width);
}

/* One two-tone focus ring remains visible across every surface. */
:where(.wp-site-blocks, .editor-styles-wrapper) :focus-visible,
.skip-link:focus-visible {
 outline: var(--matrix-focus-outline);
 outline-offset: var(--matrix-focus-offset);
 box-shadow: var(--matrix-focus-ring);
}

/* Primary and secondary actions share one quiet, generous control geometry. */
:is(.matrix-v1__call, .matrix-v1__quote, .matrix-inner__quote) .wp-block-button__link,
.matrix-header .matrix-header__menu-quote a,
.matrix-quote button[type="submit"] {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--matrix-space-12);
 box-sizing: border-box;
 min-block-size: var(--matrix-button-height);
 padding: var(--matrix-space-12) var(--matrix-space-24);
 border: 1px solid transparent;
 border-radius: var(--matrix-radius-button);
 font-family: var(--wp--preset--font-family--inter);
 font-size: var(--matrix-type-button);
 font-weight: 600;
 line-height: 1.35;
 text-decoration: none;
 cursor: pointer;
}
.matrix-header :is(.matrix-header__phone, .matrix-header__menu-call) a {
 /* Existing navigation keeps its compact footprint; section actions use 56px. */
 min-block-size: var(--wp--custom--button--compact-height);
 border-radius: var(--matrix-radius-button);
}

/* White text stays above 4.8:1 across the default gradient. The brighter accent
 * is reserved for decoration and emphasis against dark ink. */
:is(.matrix-v1__call, .matrix-hero__phone, .matrix-hero__call, .matrix-header__menu-quote) a,
.matrix-quote button[type="submit"] {
 background: var(--matrix-gradient-primary);
 color: var(--matrix-surface);
 box-shadow: var(--matrix-shadow-button);
}
:is(.matrix-v1__call, .matrix-hero__phone, .matrix-hero__call, .matrix-header__menu-quote) a:hover,
.matrix-quote button[type="submit"]:hover:not(:disabled) {
 background: var(--matrix-gradient-primary-hover);
 color: var(--matrix-surface);
 box-shadow: var(--matrix-shadow-button-hover);
}
:is(.matrix-v1__call, .matrix-hero__phone, .matrix-hero__call, .matrix-header__menu-quote) a:active,
.matrix-quote button[type="submit"]:active:not(:disabled) {
 background: var(--matrix-gradient-primary-active);
 color: var(--matrix-surface);
 box-shadow: var(--matrix-shadow-button-active);
}

/* Secondary actions inherit their surface context rather than a page-specific color. */
:is(.matrix-v1__quote, .matrix-inner__quote, .matrix-hero__quote) .wp-block-button__link {
 background: transparent;
 border: 1px solid var(--matrix-border-strong);
 color: inherit;
}
:is(.matrix-v1__quote, .matrix-inner__quote, .matrix-hero__quote) .wp-block-button__link:is(:hover, :active) {
 background: var(--matrix-bg-soft);
 color: var(--matrix-text);
}
:is(.matrix-inner-final, .matrix-final, .matrix-urgent, .matrix-hero) :is(.matrix-v1__quote, .matrix-inner__quote, .matrix-hero__quote) .wp-block-button__link {
 border-color: var(--matrix-text-on-dark-muted);
 color: var(--matrix-text-on-dark);
}
:is(.matrix-inner-final, .matrix-final, .matrix-urgent, .matrix-hero) :is(.matrix-v1__quote, .matrix-inner__quote, .matrix-hero__quote) .wp-block-button__link:is(:hover, :active) {
 background: var(--matrix-on-dark-hover);
 color: var(--matrix-text-on-dark);
}
.matrix-quote button[type="submit"]:disabled {
 background: var(--matrix-disabled-bg);
 color: var(--matrix-disabled-text);
 box-shadow: none;
 cursor: not-allowed;
 opacity: 1;
}
:is(.matrix-v1__call, .matrix-v1__quote, .matrix-inner__quote, .matrix-hero__phone, .matrix-hero__quote, .matrix-header__phone, .matrix-header__menu-call, .matrix-header__menu-quote) a:focus-visible,
.matrix-quote button[type="submit"]:focus-visible {
 outline: var(--matrix-focus-outline);
 outline-offset: var(--matrix-focus-offset);
 box-shadow: var(--matrix-focus-ring);
}

/* The same native Details interaction on the homepage and editorial pages. */
:is(.matrix-faq__questions, .matrix-inner__faq) details {
 margin-block: 0;
 border-block-end: 1px solid var(--matrix-border);
}
.matrix-faq__questions,
.matrix-inner__faq details:first-of-type { border-block-start: 1px solid var(--matrix-border); }
:is(.matrix-faq__questions, .matrix-inner__faq) details > summary {
 position: relative;
 display: block;
 box-sizing: border-box;
 min-block-size: 44px;
 padding: var(--matrix-space-24) var(--matrix-space-32) var(--matrix-space-24) 0;
 list-style: none;
 font-size: var(--matrix-type-question);
 font-weight: 600;
 line-height: 1.4;
 letter-spacing: -.015em;
 cursor: pointer;
}
:is(.matrix-faq__questions, .matrix-inner__faq) details > summary:hover { color: var(--matrix-green); }
:is(.matrix-faq__questions, .matrix-inner__faq) summary::-webkit-details-marker { display: none; }
:is(.matrix-faq__questions, .matrix-inner__faq) summary::before,
:is(.matrix-faq__questions, .matrix-inner__faq) summary::after {
 content: '';
 position: absolute;
 inset-inline-end: var(--matrix-space-4);
 inset-block-start: calc(50% - 1px);
 inline-size: var(--matrix-space-16);
 block-size: 2px;
 background: var(--matrix-green);
}
:is(.matrix-faq__questions, .matrix-inner__faq) summary::after { transform: rotate(90deg); }
:is(.matrix-faq__questions, .matrix-inner__faq) details[open] > summary::after { transform: rotate(0); }
:is(.matrix-faq .matrix-faq__questions, .matrix-inner .matrix-inner__faq) details > p {
 margin: 0;
 padding: 0 var(--matrix-space-24) var(--matrix-space-24) 0;
 max-inline-size: var(--matrix-measure-answer);
 font-size: var(--matrix-type-body);
 line-height: var(--matrix-leading-body);
 color: var(--matrix-text-muted);
}

/* Semantic comparisons keep readable columns; the figure is the scroll region. */
.matrix-inner__comparison {
 margin-block: var(--matrix-space-32);
 max-inline-size: 100%;
 overflow-x: auto;
 border: 0;
 border-block: 1px solid var(--matrix-border);
 border-radius: 0;
 overscroll-behavior-inline: contain;
}
.matrix-inner__comparison table {
 inline-size: 100%;
 min-inline-size: var(--matrix-table-min-width);
 border-collapse: collapse;
 table-layout: fixed;
 font-size: var(--matrix-type-table);
}
/* Core adds a 3px header/footer border; shared cell rules own the separators. */
.matrix-inner__comparison :is(thead, tfoot) { border: 0; }
.matrix-inner__comparison :is(th, td) {
 padding: var(--matrix-space-20) var(--matrix-space-24);
 border: 0;
 border-block-end: 1px solid var(--matrix-border);
 vertical-align: top;
 text-align: start;
 line-height: var(--matrix-leading-body);
 overflow-wrap: normal;
}
.matrix-inner__comparison thead th { background: var(--matrix-bg-soft); color: var(--matrix-text); font-weight: 600; }
.matrix-inner__comparison tbody th { font-weight: 600; }
.matrix-inner__comparison tbody tr:last-child > * { border-block-end: 0; }
.matrix-comparison-hint { color: var(--matrix-text-muted); font-size: var(--matrix-type-small); }
@media (min-width: 768px) { .matrix-comparison-hint { display: none; } }

@media (prefers-reduced-motion: no-preference) {
 :is(.matrix-v1__call, .matrix-v1__quote, .matrix-inner__quote, .matrix-header__phone, .matrix-header__menu-call, .matrix-header__menu-quote) a,
 .matrix-quote button[type="submit"] {
  transition: transform var(--matrix-duration-standard) var(--matrix-ease), box-shadow var(--matrix-duration-standard) var(--matrix-ease), border-color var(--matrix-duration-standard) var(--matrix-ease);
 }
 :is(.matrix-v1__call, .matrix-v1__quote, .matrix-inner__quote, .matrix-header__menu-quote) a:hover,
 .matrix-quote button[type="submit"]:hover:not(:disabled) { transform: translateY(-1px); }
 :is(.matrix-v1__call, .matrix-v1__quote, .matrix-inner__quote, .matrix-header__menu-quote) a:active,
 .matrix-quote button[type="submit"]:active:not(:disabled) { transform: translateY(0); }
 :is(.matrix-faq__questions, .matrix-inner__faq) summary::after { transition: transform var(--matrix-duration-fast) var(--matrix-ease); }
}
@media (prefers-reduced-motion: reduce) {
 :where(.wp-site-blocks, .editor-styles-wrapper) { scroll-behavior: auto; }
 :is(.matrix-v1__call, .matrix-v1__quote, .matrix-inner__quote, .matrix-header__phone, .matrix-header__menu-call, .matrix-header__menu-quote) a,
 .matrix-quote button[type="submit"],
 :is(.matrix-faq__questions, .matrix-inner__faq) summary::after { transition: none; }
}
