/*
Theme Name: nic.TLD Registry
Theme URI: https://www.tucows.com
Author: Tucows
Author URI: https://www.tucows.com
Description: One-page registry information site for an open gTLD (nic.<TLD>). Duplicate this site per client, then set the Site Title, upload the Site Logo, edit the page text, and pick a Brand color under Appearance > Editor > Styles — no code changes needed.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nic-tld-registry
Tags: one-page, full-site-editing, block-theme
*/

/* Smooth-scroll for the in-page nav links (Home/Contact/Policies -> #anchors).
   Skipped for visitors who've asked their OS for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Section anchor offset so in-page nav links land below the sticky header */
.nic-section {
	scroll-margin-top: 88px;
}

/* Sticky header: stays pinned to the top while the page scrolls.
   WordPress wraps a template part whose area is "header" in its own
   <header class="wp-block-template-part"> element. That wrapper — not
   our own .nic-site-header block inside it — is what needs to be sticky:
   its containing block is the full page (via wp-site-blocks), giving the
   sticky element room to travel. Sticking .nic-site-header directly does
   nothing, since its own immediate parent is exactly its own height. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Dashed placeholder box shown until a real logo is uploaded (editor and front end) */
.wp-block-site-logo a,
.wp-block-site-logo .components-placeholder,
.nic-logo-placeholder {
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 6px;
}

.nic-logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	max-width: 100%;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

/* Contact / policy cards */
.nic-card {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px rgba(0, 0, 0, 0.06);
}

.nic-eyebrow {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Policy tile grid */
.nic-policy-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
}

/* Header nav: whichever link matches the section in view (or was just
   clicked) gets a brand underline, matching the Figma current-page state.
   This is a one-page site with same-page anchors, so "current page" isn't
   something WordPress can detect by URL — assets/js/nav-active.js toggles
   the "is-active" class via scroll position (IntersectionObserver) and on
   click. "Home" ships with "is-active" in the markup as the pre-JS default.
   The underline is an absolutely-positioned pseudo-element (not padding/
   border) so it doesn't add height to the link and throw off the row's
   vertical centering relative to the other links. */
.nic-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--brand-active);
}

.nic-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	background: var(--wp--preset--color--brand);
}

/* Mobile overlay menu: the panel WordPress generates ships with no
   horizontal padding, and the link list only sizes to its own content
   width — so the stacked links sit flush against the left edge with no
   breathing room. Add padding and center them. Scoped to ".is-menu-open"
   (only present while the overlay is actually open) so the desktop inline
   row, which reuses this same markup, is untouched. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 56px 32px 32px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100%;
	align-items: center;
}

/* The close (X) button ships pinned flush to the corner (top:0; right:0).
   Inset it to line up with where the hamburger sits in the closed header
   (the header's own 20px top / 24px right mobile padding), instead of
   jumping to the bare edge when the menu opens. */
.wp-block-navigation__responsive-container-close {
	top: 20px;
	right: 39px;
}

/* Shrink the wide side padding on narrower screens; Figma's Mobile frame uses 20px */
@media (max-width: 782px) {
	.alignfull {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}