/* Group Tactical Security (GTAC) sections: only what blocks cannot say. The sections are core blocks styled by theme.json, block style
   variations (Hero, Card, Mark, Soft, Tint, Deep, Arrow, Outline arrow, Accordion) and block attributes
   (tools/build-site.py). Here: the overlay hero's phone art direction and the whole-card link of linked cards.
   Token variables only; raw values are limited to 0, hairlines and image focus points. */

/* ---------- overlay hero (Hero cover) ---------- */
.wp-block-cover.is-style-hero { min-height: var(--wp--custom--layout--hero-min); }
/* the photo runs full width, the copy sits on the site's wide edge (core sets width:auto with a stronger selector) */
.wp-block-cover.is-style-hero.has-custom-content-position[class*="is-position-"] .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--custom--layout--wide); margin-inline: auto; }
.wp-block-cover.is-style-hero .gt-hero__picture { position: absolute; inset: 0; display: block; }
/* phones: the copy on the page ground first, then a full-width photo window (no scrim over faces) */
@media (max-width: 781px) {
	.wp-block-cover.is-style-hero.gt-hero--tone-light { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0 !important; background: var(--wp--preset--color--base); }
	.wp-block-cover.is-style-hero.gt-hero--tone-light .wp-block-cover__background { display: none; }
	.wp-block-cover.is-style-hero.gt-hero--tone-light .wp-block-cover__inner-container { order: 1; padding: var(--wp--preset--spacing--60) var(--wp--custom--layout--gutter-mobile) var(--wp--preset--spacing--50); box-sizing: border-box; }
	.wp-block-cover.is-style-hero.gt-hero--tone-light .gt-hero__picture { order: 2; position: relative; width: 100%; aspect-ratio: var(--wp--custom--image--hero-tall); }
	.wp-block-cover.is-style-hero.gt-hero--tone-light img.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- linked cards: the whole card is the link (the title link stretches over it) ---------- */
.gt-card { position: relative; transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base); }
.gt-card :where(h3) a { color: inherit; text-decoration: none; }
.gt-card :where(h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* a link inside the card's text (the issuing authority on a certificate card) sits above the stretched title link */
.gt-card p a { position: relative; z-index: 1; }
.gt-card:has(h3 a):hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--md); }
.gt-card:has(h3 a:focus-visible) { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }
.gt-card h3 a:focus-visible { outline: 0; }
.gt-card .wp-block-image { margin: 0; }

/* ---------- dot wave hero (assets/js/dot-wave.js draws the canvas; the Deep dots stay as the no-JavaScript ground) ---------- */
.gt-dot-wave .dot-wave__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* the hero is a constrained layout, which caps its children at the wide size: the canvas spans the whole width */
.gt-dot-wave > .dot-wave__canvas.dot-wave__canvas { max-width: none; margin: 0; }
.gt-dot-wave.has-dot-wave::before { background: var(--wp--custom--pattern--glow); -webkit-mask: none; mask: none; }

/* ---------- dots that drift slowly (Deep grounds and the edge dots of white sections) ---------- */
@keyframes gt-drift { to { background-position: 0 0, var(--wp--custom--pattern--dot-gap) calc(var(--wp--custom--pattern--dot-gap) * -1); } }
@keyframes gt-drift-light { to { background-position: var(--wp--custom--pattern--dot-gap) calc(var(--wp--custom--pattern--dot-gap) * -1); } }
@media (prefers-reduced-motion: no-preference) {
	:where(body:not(.editor-styles-wrapper)) .is-style-section-deep:not(.has-dot-wave)::before { animation: gt-drift 6s linear infinite; }
	:where(body:not(.editor-styles-wrapper)) :is(.is-style-section-dots-right, .is-style-section-dots-left)::before { animation: gt-drift-light 9s linear infinite; }
}

/* ---------- scroll reveal (assets/js/motion.js arms html.gt-motion; without it everything is visible) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html.gt-motion .gt-reveal { opacity: 0; translate: 0 var(--wp--custom--motion--rise); transition: opacity var(--wp--custom--transition--reveal), translate var(--wp--custom--transition--reveal); }
	html.gt-motion .gt-reveal.is-in { opacity: 1; translate: 0 0; }
	html.gt-motion .gt-reveal :is(.is-layout-grid, .wp-block-post-template) > * { opacity: 0; translate: 0 var(--wp--custom--motion--rise); transition: opacity var(--wp--custom--transition--reveal), translate var(--wp--custom--transition--reveal); }
	html.gt-motion .gt-reveal.is-in :is(.is-layout-grid, .wp-block-post-template) > * { opacity: 1; translate: 0 0; }
	html.gt-motion .gt-reveal.is-in :is(.is-layout-grid, .wp-block-post-template) > :nth-child(2) { transition-delay: var(--wp--custom--transition--reveal-step); }
	html.gt-motion .gt-reveal.is-in :is(.is-layout-grid, .wp-block-post-template) > :nth-child(3) { transition-delay: calc(var(--wp--custom--transition--reveal-step) * 2); }
	html.gt-motion .gt-reveal.is-in :is(.is-layout-grid, .wp-block-post-template) > :nth-child(n + 4) { transition-delay: calc(var(--wp--custom--transition--reveal-step) * 3); }
}

/* ---------- stats band ---------- */
.gt-stat__value { margin: 0; letter-spacing: var(--wp--custom--letter-spacing--display); font-variant-numeric: tabular-nums; }

/* ---------- icons that lift on hover (feature marks) ---------- */
/* the icon's box is as wide as the card: shrink it to the icon and turn it on its left foot, so it lifts upward */
.wp-block-icon.is-style-mark { width: fit-content; transform-origin: left bottom; transition: transform var(--wp--custom--transition--base); }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-group:hover > .wp-block-icon.is-style-mark { transform: translateY(-4px) rotate(-4deg); }
}

/* ---------- media cards and certificates ---------- */
.is-style-media-card.gt-card:has(h3 a):hover { transform: none; box-shadow: none; }
.is-style-media-card.gt-card:has(h3 a):hover h3 { color: var(--wp--preset--color--accent-1); }
:is(.is-style-media-card, .is-style-doc-card) :is(.wp-block-image, .wp-block-post-featured-image) { overflow: hidden; border-radius: var(--wp--custom--radius--image); }
:is(.is-style-media-card, .is-style-doc-card) :is(.wp-block-image, .wp-block-post-featured-image) img { transition: transform var(--wp--custom--transition--reveal); }
.is-style-media-card:hover :is(.wp-block-image, .wp-block-post-featured-image) img { transform: scale(1.04); }
.is-style-doc-card:hover .wp-block-image img { transform: scale(1.03); }
/* certificate scans: no drag-out or long-press save (assets/js/protect.js blocks the menu); a screenshot still works */
:is(.gt-protect, .is-style-doc-card, .wp-lightbox-overlay) img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* ---------- page intro breadcrumbs (Rank Math prints them with BreadcrumbList schema) ---------- */
.gt-intro .rank-math-breadcrumb p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-dark-muted); }
.gt-intro .rank-math-breadcrumb a { color: var(--wp--preset--color--on-accent); }
.gt-intro .rank-math-breadcrumb .separator { padding-inline: var(--wp--preset--spacing--20); }

/* ---------- contact header: copy on the left (sticky on desktop), the form card on the right ---------- */
@media (min-width: 1024px) {
	.gt-contact-hero .wp-block-columns { align-items: flex-start; }
	.gt-contact-hero .wp-block-column:first-child { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--50)); }
}
.gt-contact-hero .wp-block-heading:where(h1) { font-size: var(--wp--preset--font-size--xxx-large); }
.gt-points p { margin: 0; }
.gt-proof-line { padding-top: var(--wp--preset--spacing--40); border-top: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--wp--preset--color--on-accent) 16%, transparent); font-weight: var(--wp--custom--font-weight--semibold); }
.gt-form-card:hover { transform: none; }
.gt-form-panel[hidden] { display: none; }
.gt-form-card.has-tabs .gt-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* tabs: built by assets/js/tabs.js from the panel headings */
.gt-tabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20); border-radius: var(--wp--custom--radius--button); background: var(--wp--preset--color--accent-5); }
.gt-tabs__tab { min-height: var(--wp--custom--control--min); padding: 0 var(--wp--preset--spacing--30); border: 0; border-radius: var(--wp--custom--radius--button); background: transparent; color: var(--wp--preset--color--accent-4); font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); cursor: pointer; transition: background var(--wp--custom--transition--base), color var(--wp--custom--transition--base); }
.gt-tabs__tab:hover { color: var(--wp--preset--color--contrast); }
.gt-tabs__tab[aria-selected="true"] { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); box-shadow: var(--wp--preset--shadow--md); }

/* ---------- contact channels and the coverage map key ---------- */
.gt-channel p { overflow-wrap: anywhere; }
/* contact cards: a clear gap under the icon, then label, value and note close together as one group */
.gt-channel > .wp-block-icon + p { margin-block-start: var(--wp--preset--spacing--40); }
.gt-channel > p + p { margin-block-start: var(--wp--preset--spacing--20); }
.gt-legend { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); color: var(--wp--preset--color--on-dark-muted); }
.gt-legend + .gt-legend { margin-top: var(--wp--preset--spacing--30); }
.gt-legend::before { content: ""; flex: none; width: var(--wp--custom--icon--xs); height: var(--wp--custom--icon--xs); border-radius: 50%; }
.gt-legend--hq::before { background: var(--wp--preset--color--on-accent); box-shadow: 0 0 0 3px var(--wp--preset--color--accent-3), 0 0 0 5px var(--wp--preset--color--on-accent); }
.gt-legend--sites::before { background: var(--wp--preset--color--signature); box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--signature) 30%, transparent); }

/* ---------- hero credentials strip: quiet links to the certificates ---------- */
.gt-proof a { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); text-decoration: none; }
.gt-proof a:hover { color: var(--wp--preset--color--on-accent); text-decoration: underline; }

/* ---------- certificate lightbox (assets/js/cert-lightbox.js, the hero's credential links) ---------- */
.gt-cert-dialog { width: min(100% - var(--wp--preset--spacing--40) * 2, var(--wp--custom--layout--content)); max-height: calc(100svh - var(--wp--preset--spacing--40) * 2); padding: var(--wp--preset--spacing--30); border: 0; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--surface); box-shadow: var(--wp--preset--shadow--md); overflow: auto; }
.gt-cert-dialog::backdrop { background: var(--wp--preset--color--overlay); }
.gt-cert-dialog__img { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.gt-cert-dialog__close { position: sticky; top: 0; float: right; z-index: 1; display: grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); margin: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20); padding: 0; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--icon-button); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); cursor: pointer; }
.gt-cert-dialog__close::before { content: ""; width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); background: currentColor; -webkit-mask: url(../icons/wp/x.svg) center / contain no-repeat; mask: url(../icons/wp/x.svg) center / contain no-repeat; }
.gt-cert-dialog__close:hover { background: var(--wp--preset--color--accent-5); }

/* ---------- articles (templates/single.html): one reading column for the title, the photo and the text ---------- */
.gt-article-meta :where(p, .wp-block-post-date, .wp-block-post-terms) { margin: 0; }
.gt-article-meta a { color: inherit; }

/* ---------- article extras (templates/single.html) ---------- */
/* share icons: 44px targets, the navy logo turns teal on hover */
.gt-share__links .wp-social-link a { display: grid; place-items: center; min-width: var(--wp--custom--control--min); min-height: var(--wp--custom--control--min); }
.gt-share__links .wp-social-link a:hover { color: var(--wp--preset--color--accent-1); }
.gt-share p { margin: 0; }
/* the About GTAC note: the shield keeps its size beside the text */
.gt-about-note > .wp-block-icon { flex: none; }
/* key points box: links read as a list of sections */
.gt-key-points ul { margin: 0; padding-left: var(--wp--preset--spacing--40); }
.gt-key-points a { color: inherit; text-underline-offset: 0.2em; }
.gt-key-points a:hover { color: var(--wp--preset--color--accent-1); }
/* the featured article on Insights (tools/build-site.py posts featured): the text centred beside the photo (a grid layout has no vertical alignment setting) */
.gt-featured { align-items: center; }
/* the scroll reveal moves grid children (translate), which would make the text half the frame of the title's stretched
   link and leave the photo unlinked: here the halves only fade, so the one link covers the whole card */
html.gt-motion .gt-reveal .gt-featured > * { translate: none !important; } /* outranks the revealed state (translate 0 0, still a containing block) */
.gt-featured:has(h3 a:hover) .wp-block-post-featured-image img { transform: scale(1.04); }
.gt-featured .wp-block-post-featured-image img { transition: transform var(--wp--custom--transition--reveal); }
@media (max-width: 599px) {
	/* phones: the shield above the text, so the text keeps the full width */
	.gt-about-note { flex-wrap: wrap !important; }
}

/* edge dots next to a navy section: the dots layer stops at the section's own edge (it bleeds into the white gap
   between white sections only), so white dots and navy never touch */
:is(.is-style-section-dots-right, .is-style-section-dots-left):is(:first-child, .is-style-section-deep + *)::before { top: 0; }
:is(.is-style-section-dots-right, .is-style-section-dots-left):is(:last-child, :has(+ .is-style-section-deep))::before { bottom: 0; }

/* the reply promise in the closing bands (inc/sections.php adds it under the quotation button) */
/* close to the button it belongs to, but clearly apart (the band's block gap would push it as far as the heading) */
.gt-reply-note { margin-block: var(--wp--preset--spacing--30) 0 !important; text-align: center; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-dark-muted); }

/* edge dots: the radial mask softens the screen side; this vertical fade softens the top and the bottom, so the dots
   fade in and out wherever the layer stops (pattern tokens edge-right / edge-left x fade-y) */
.is-style-section-dots-right::before { -webkit-mask: var(--wp--custom--pattern--edge-right), var(--wp--custom--pattern--fade-y); -webkit-mask-composite: source-in; mask: var(--wp--custom--pattern--edge-right), var(--wp--custom--pattern--fade-y); mask-composite: intersect; }
.is-style-section-dots-left::before { -webkit-mask: var(--wp--custom--pattern--edge-left), var(--wp--custom--pattern--fade-y); -webkit-mask-composite: source-in; mask: var(--wp--custom--pattern--edge-left), var(--wp--custom--pattern--fade-y); mask-composite: intersect; }

/* lightboxes (core image lightbox on About, the credential dialog on Home): the sticky header's glass behind the
   certificate, white controls on it; a solid navy ground where the browser has no backdrop blur */
.wp-lightbox-overlay .scrim { background-color: var(--wp--preset--color--accent-3) !important; }
.gt-cert-dialog::backdrop { background: var(--wp--preset--color--accent-3); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-lightbox-overlay .scrim { background-color: var(--wp--preset--color--glass) !important; -webkit-backdrop-filter: var(--wp--custom--glass--blur); backdrop-filter: var(--wp--custom--glass--blur); }
	.gt-cert-dialog::backdrop { background: var(--wp--preset--color--glass); -webkit-backdrop-filter: var(--wp--custom--glass--blur); backdrop-filter: var(--wp--custom--glass--blur); }
}
.wp-lightbox-overlay :is(.wp-lightbox-close-button, .wp-lightbox-navigation-button) { fill: var(--wp--preset--color--on-accent) !important; color: var(--wp--preset--color--on-accent); }

/* coverage map on a navy panel (Contact, Negeri Sembilan): a soft navy halo behind the map hides the panel's own dot
   pattern where it would run across the map's dots, and fades it back in around it (the map file is its own dot grid) */
.is-style-section-deep .wp-block-image:has(img[src*="coverage-map"]) { position: relative; isolation: isolate; }
.is-style-section-deep .wp-block-image:has(img[src*="coverage-map"])::before { content: ""; position: absolute; inset: -10% -16% -45%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--wp--preset--color--accent-3) 58%, transparent 100%); }

/* article tables: rounded like the cards (outer line, corners and header colour in theme.json core/table). Core sets border-collapse:
   collapse, which cannot be rounded, and theme.json selectors (:where) cannot outrank it. */
figure.wp-block-table > table { border-collapse: separate; }
figure.wp-block-table :is(th, td) { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); text-align: start; vertical-align: top; border: 0; border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); border-inline-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
figure.wp-block-table tr > :last-child { border-inline-end: 0; }
figure.wp-block-table tbody tr:last-child > * { border-block-end: 0; }