/* WP Masquerade theme v2.1: layout alignment, footer, comparison table, card links. Loaded after site.css (inc/site-ux.php). */

/* ------------------------------------------------------------------ 1. One left edge on inner pages
   Sub-hero (breadcrumbs, H1, lead), prose, tables and wide blocks all start on the container edge:
   no more 760px column centred under a hero aligned on the 1190px container (staircase effect).
   Prose keeps its reading width (--prose), wide blocks take the full container. */
.sub-hero .lead { max-width: var(--prose); }
.page-body .entry-content > * { margin-left: 0; margin-right: 0; }
.page-body .entry-content > .alignwide { max-width: 100%; }
.page-body .entry-content .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-left: 0 !important; margin-right: 0 !important; }
.page-body .entry-content .wp-block-buttons { justify-content: flex-start; }

/* Cards in grids and columns: equal heights, last line (tags, links) aligned at the bottom. */
.wp-block-columns { align-items: stretch !important; }
.wp-block-column > .wpm-card:only-child, .wp-block-column > .card:only-child { height: 100%; }
.wpm-grid > .wpm-card, .entry-content .is-layout-grid > .wpm-card { display: flex; flex-direction: column; height: 100%; }
.wpm-grid > .wpm-card > :last-child, .entry-content .is-layout-grid > .wpm-card > :last-child { margin-top: auto; }
.wpm-grid > .wpm-card > :last-child:not(:first-child) { padding-top: 6px; }

/* Member area: the forms (login, register, password) are centred cards: centre the heading with them. */
.member-shell:has(.wpm-auth) .sub-hero, .member-shell:has(.wpm-auth-card) .sub-hero { text-align: center; }
.member-shell:has(.wpm-auth) .sub-hero .lead, .member-shell:has(.wpm-auth-card) .sub-hero .lead { margin-inline: auto; }

/* ------------------------------------------------------------------ 2. Footer */
.footer-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
.o-link { cursor: pointer; }
.footer-grid ul.menu .o-link { display: block; font-size: .86rem; color: #4d5f7c; margin: 0 0 9px; }
.footer-grid ul.menu .o-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.footer-grid ul.menu .o-link[aria-current] { color: var(--ink); font-weight: 700; }
.site-footer .brand.o-link { display: inline-block; }
/* External links printed as pseudo-links (pages with _wpm_obfuscate_external): same look as links. */
.o-ext { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.o-ext:hover { color: var(--blue-dark); }
/* Repeated internal links printed as pseudo-links (wpm_dedupe_internal_links()): same look as the links they replace. */
:where(.o-dup) { color: var(--blue); }
:where(.o-dup):hover { color: var(--blue-dark); }
.o-txt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.o-dup:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.entry-content .wpt td .o-ext, .entry-content .wpt th .o-ext { font-weight: 650; }
.wpm-yt__notice .o-ext { color: #fff; }
@media (max-width: 960px) {
	.footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-grid > .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ 3. Blog cards: one link (title), whole card clickable */
.post-card .badge { position: static; }
.post-card h2 a::after, .post-card h3 a::after { border-radius: 15px; }
.post-card:focus-within { border-color: var(--blue); }

/* ------------------------------------------------------------------ 4. Free vs Pro comparison (inc/site-ux.php) */
.cmp { margin: 0 0 2.4rem; --cmp-top: 77px; }
.admin-bar .cmp { --cmp-top: 109px; }
.entry-content .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .95rem; background: #fff; border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow-sm); }
.entry-content .cmp-table th, .entry-content .cmp-table td {
	padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle;
	text-transform: none; letter-spacing: 0; font-size: inherit; background: #fff; color: #24395f; text-align: left;
}
.entry-content .cmp-table thead th {
	position: sticky; top: var(--cmp-top); z-index: 3; vertical-align: bottom; padding: 18px 18px 16px;
	background: rgba(255, 255, 255, .98); border-bottom: 2px solid var(--edge); color: var(--ink);
}
.entry-content .cmp-table thead th:first-child { border-top-left-radius: 16px; }
.entry-content .cmp-table thead th:last-child { border-top-right-radius: 16px; }
.cmp-feature-head span { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.entry-content .cmp-table .cmp-plan-head { width: 220px; text-align: center; }
.entry-content .cmp-table thead .cmp-plan-head.is-pro { background: #f3f7ff; box-shadow: inset 0 3px 0 var(--blue); }
.cmp-plan-name { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cmp-plan-price { display: block; min-height: 1.4em; font-size: .8rem; font-weight: 600; color: var(--muted); margin: 2px 0 12px; }
.cmp-cta { width: 100%; }
.entry-content .cmp-table .cmp-group-row th {
	background: var(--light); color: var(--ink); font-weight: 800; font-size: .9rem; padding: 12px 18px;
	border-bottom: 1px solid var(--edge);
}
.cmp-group-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e3edff; color: var(--blue); margin-right: 11px; vertical-align: middle; }
.cmp-group-icon svg { width: 17px; height: 17px; }
.entry-content .cmp-table .cmp-feature { font-weight: 500; line-height: 1.5; }
.cmp-feature a { color: var(--ink); text-decoration-color: #b8cbee; }
.cmp-feature a:hover { color: var(--blue); text-decoration-color: currentColor; }
.entry-content .cmp-table .cmp-cell { text-align: center; }
.entry-content .cmp-table .cmp-cell.is-pro { background: #f8fbff; }
.entry-content .cmp-table tbody tr:not(.cmp-group-row):hover > * { background: #fafcff; }
.entry-content .cmp-table tbody tr:not(.cmp-group-row):hover > .is-pro { background: #f1f6ff; }
.entry-content .cmp-table tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.entry-content .cmp-table tbody:last-of-type tr:last-child > :first-child { border-bottom-left-radius: 16px; }
.entry-content .cmp-table tbody:last-of-type tr:last-child > :last-child { border-bottom-right-radius: 16px; }
.cmp-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; font-size: .85rem; line-height: 1.2; }
.cmp-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; }
.cmp-icon svg { width: 16px; height: 16px; stroke-width: 3; }
.cmp-icon .icon-partial { width: 18px; height: 18px; }
.is-yes .cmp-icon { background: #dff6eb; color: var(--green-text); }
.is-no .cmp-icon { background: #eef1f6; color: #7b879a; }
.is-no .cmp-icon svg { stroke-width: 2.6; width: 14px; height: 14px; }
.is-partial .cmp-icon { background: #fff1d6; color: #b45309; }
.is-partial .cmp-label { color: #8a4b00; }
/* Included / not included: icon + text alternative (visible on phones); "Limited" always shows its label. */
.is-yes .cmp-label, .is-no .cmp-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cmp-note { display: block; font-size: .76rem; font-weight: 550; color: var(--muted); margin-top: 5px; line-height: 1.35; }
.cmp-plan-tag { display: none; }
.cmp-caption { font-size: .84rem; color: var(--muted); margin: 12px 0 0; }

@media (max-width: 960px) {
	.cmp { --cmp-top: 67px; }
	.entry-content .cmp-table .cmp-plan-head { width: 170px; }
}
/* Phones: one card per feature (name, then Free and Pro side by side), plan names stay pinned on top. */
@media (max-width: 700px) {
	.entry-content .cmp-table, .cmp-table thead, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; }
	.entry-content .cmp-table { border-radius: 14px; }
	.cmp-table thead { position: sticky; top: var(--cmp-top); z-index: 3; }
	.cmp-table thead tr { display: grid; grid-template-columns: 1fr 1fr; }
	.entry-content .cmp-table thead th { position: static; padding: 10px 12px; border-radius: 0; }
	.entry-content .cmp-table thead th.cmp-feature-head { display: none; }
	.entry-content .cmp-table thead th:nth-child(2) { border-top-left-radius: 14px; }
	.entry-content .cmp-table thead th:last-child { border-top-right-radius: 14px; }
	.entry-content .cmp-table .cmp-plan-head { width: auto; }
	.cmp-plan-name { font-size: 1rem; }
	.cmp-plan-price { margin: 0; font-size: .74rem; }
	.cmp-cta { display: none; }
	.cmp-table tbody tr:not(.cmp-group-row) { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
	.entry-content .cmp-table .cmp-feature { grid-column: 1 / -1; border: 0; padding: 14px 14px 4px; font-weight: 650; }
	.entry-content .cmp-table .cmp-cell { border: 0; padding: 6px 12px 14px; text-align: left; }
	.entry-content .cmp-table .cmp-cell.is-pro { background: #fff; }
	.entry-content .cmp-table .cmp-group-row th { padding: 11px 14px; }
	.cmp-plan-tag { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 5px; }
	.is-yes .cmp-label, .is-no .cmp-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
	.is-yes .cmp-label { color: var(--green-text); }
	.is-no .cmp-label { color: #5e6e88; font-weight: 650; }
	.cmp-icon { width: 24px; height: 24px; }
	.cmp-icon svg { width: 14px; height: 14px; }
	.entry-content .cmp-table tbody:last-of-type tr:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------------ 5. Plan cards: the whole card is clickable
   One real link per card (its CTA), stretched over the card with ::after. The CTA keeps the keyboard focus.
   No transform on the CTA itself: a transformed element would become the containing block of its ::after. */
.pricing-card, .plan-compare .card { position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pricing-card > .btn::after, .plan-compare .card-actions .btn::after, .cmp-plan-head .cmp-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.cmp-plan-head .cmp-cta::after { border-radius: 0; }
.pricing-card .btn:hover, .plan-compare .card .btn:hover, .cmp-plan-head .cmp-cta:hover { transform: none; }
.pricing-card:hover, .plan-compare .card:hover { border-color: #bfd2ff; box-shadow: var(--shadow); }
.pricing-card.featured:hover, .plan-compare .card.is-pro:hover { border-color: var(--blue-dark); box-shadow: 0 18px 40px #2c6bf333; }
.pricing-card:has(.btn:focus-visible), .plan-compare .card:has(.btn:focus-visible) { border-color: var(--blue); box-shadow: var(--shadow); }
.entry-content .cmp-table thead .cmp-plan-head:hover { background: #f5f8ff; }
.entry-content .cmp-table thead .cmp-plan-head.is-pro:hover { background: #eaf1ff; }

/* Feature cards: the only link stays on the title, the whole card is clickable (stretched link). */
.wpm-card:has(> h3 a, > h2 a) { position: relative; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.wpm-card > h3 a::after, .wpm-card > h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.wpm-card:has(> h3 a, > h2 a) a:not(h3 a):not(h2 a), .wpm-card:has(> h3 a, > h2 a) .o-link, .wpm-card:has(> h3 a, > h2 a) button { position: relative; z-index: 2; }
.wpm-card:has(> h3 a:hover, > h2 a:hover), .wpm-card:has(> h3 a, > h2 a):hover { border-color: #c9d8f3; box-shadow: var(--shadow); }
.wpm-card > h3 a:focus-visible, .wpm-card > h2 a:focus-visible { outline: none; }
.wpm-card:has(> h3 a:focus-visible, > h2 a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wpm-card:has(> h3 a, > h2 a):hover { transform: none; } }

/* Clickable cards (assets/js/ux.js .is-linkcard): pointer over the whole card, text selectable, the link's stretched
   ::after lets the pointer through (the script forwards the click). No movement on hover anywhere: shadow and
   border only, so the card never slips away from the pointer at its edges. */
.is-linkcard { cursor: pointer; }
.is-linkcard .is-cardlink::after { pointer-events: none; }
.is-linkcard :is(p, li, span, small, time, strong, em, dd, dt, figcaption) { cursor: inherit; }