/*
Theme Name:   Custom Printing NYC
Theme URI:    https://customprintingnyc.com
Description:  Child theme of Astra built for the Custom Printing NYC company directory. Powers company profile listings tagged by capability (e.g. Mylar Bag Printing, Sticker Printing) and location (e.g. Brooklyn, Queens) so visitors can find the right NYC print shop fast.
Author:       Custom Printing NYC
Template:     astra
Version:      1.6.0
Text Domain:  customprintingnyc
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
	/* Brand colors */
	--cpnyc-primary:        #FDAA48; /* main brand orange */
	--cpnyc-primary-dark:   #E88C22; /* hover / pressed state */
	--cpnyc-primary-tint:   #FFF1E0; /* very light orange for backgrounds/badges */
	--cpnyc-accent:         #234C5D; /* deep slate-navy accent, pairs with the orange */
	--cpnyc-accent-dark:    #17333F;
	--cpnyc-white:          #FFFFFF;
	--cpnyc-grey-lighter:   #F7F6F4; /* section background */
	--cpnyc-grey-light:     #ECEAE6; /* borders, dividers, card backgrounds */
	--cpnyc-grey:           #9A968E; /* muted text */
	--cpnyc-text:           #2B2A28; /* body copy */
	--cpnyc-text-heading:   #1C1B19;
	--cpnyc-success:        #2E7D53;

	/* Typography - Poppins for display text (logo, headings, buttons,
	   eyebrows) paired with Astra's default body font for readable copy. */
	--cpnyc-font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

	/* Layout */
	--cpnyc-radius-sm: 6px;
	--cpnyc-radius-md: 12px;
	--cpnyc-radius-lg: 20px;
	--cpnyc-shadow-sm: 0 1px 3px rgba(28, 27, 25, 0.08);
	--cpnyc-shadow-md: 0 8px 24px rgba(28, 27, 25, 0.10);
	--cpnyc-shadow-lg: 0 16px 40px rgba(28, 27, 25, 0.14);
	--cpnyc-container: 1240px;
}

/* ==========================================================================
   2. BASE / RESET TOUCHES
   ========================================================================== */
body {
	color: var(--cpnyc-text);
	background-color: var(--cpnyc-white);
}

a {
	color: var(--cpnyc-accent);
	transition: color .15s ease-in-out;
}

a:hover,
a:focus {
	color: var(--cpnyc-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--cpnyc-text-heading);
	font-weight: 700;
	font-family: var(--cpnyc-font-display);
}

.cpnyc-btn,
.cpnyc-eyebrow,
.cpnyc-pill,
.cpnyc-term-card__title {
	font-family: var(--cpnyc-font-display);
}

.cpnyc-container {
	max-width: var(--cpnyc-container);
	margin: 0 auto;
	padding: 0 20px;
}

section {
	position: relative;
}

img {
	height: auto;
}

/* Buttons */
.cpnyc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--cpnyc-radius-sm);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all .15s ease-in-out;
}

.cpnyc-btn-primary {
	background-color: var(--cpnyc-primary);
	color: var(--cpnyc-accent-dark);
	border-color: var(--cpnyc-primary);
}

.cpnyc-btn-primary:hover,
.cpnyc-btn-primary:focus {
	background-color: var(--cpnyc-primary-dark);
	border-color: var(--cpnyc-primary-dark);
	color: var(--cpnyc-white);
}

.cpnyc-btn-dark {
	background-color: var(--cpnyc-accent);
	color: var(--cpnyc-white);
	border-color: var(--cpnyc-accent);
}

.cpnyc-btn-dark:hover,
.cpnyc-btn-dark:focus {
	background-color: var(--cpnyc-accent-dark);
	border-color: var(--cpnyc-accent-dark);
	color: var(--cpnyc-white);
}

.cpnyc-btn-outline {
	background-color: transparent;
	color: var(--cpnyc-accent);
	border-color: var(--cpnyc-grey-light);
}

.cpnyc-btn-outline:hover,
.cpnyc-btn-outline:focus {
	border-color: var(--cpnyc-accent);
	color: var(--cpnyc-accent);
}

.cpnyc-btn-sm {
	padding: 8px 16px;
	font-size: 13px;
}

/* Badges / pills used for taxonomy terms */
.cpnyc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cpnyc-primary-tint);
	color: var(--cpnyc-accent-dark);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba(253, 170, 72, .35);
	transition: all .15s ease-in-out;
}

.cpnyc-pill:hover,
.cpnyc-pill:focus {
	background: var(--cpnyc-primary);
	color: var(--cpnyc-accent-dark);
}

.cpnyc-pill--location {
	background: var(--cpnyc-grey-lighter);
	border-color: var(--cpnyc-grey-light);
	color: var(--cpnyc-accent);
}

.cpnyc-pill--location:hover {
	background: var(--cpnyc-accent);
	color: var(--cpnyc-white);
}

/* Section spacing helpers */
.cpnyc-section {
	padding: 64px 0;
}

.cpnyc-section--tight {
	padding: 40px 0;
}

.cpnyc-section--grey {
	background: var(--cpnyc-grey-lighter);
}

.cpnyc-eyebrow {
	display: inline-block;
	color: var(--cpnyc-primary-dark);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.cpnyc-section-head {
	max-width: 640px;
	margin: 0 0 36px;
}

.cpnyc-section-head.cpnyc-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.cpnyc-section-head p {
	color: var(--cpnyc-grey);
	font-size: 16px;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.cpnyc-topbar {
	background: var(--cpnyc-accent);
	color: var(--cpnyc-white);
	font-size: 13px;
}

.cpnyc-topbar .cpnyc-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.cpnyc-topbar a {
	color: var(--cpnyc-white);
}

.cpnyc-topbar a:hover {
	color: var(--cpnyc-primary);
}

.cpnyc-topbar__links {
	display: flex;
	gap: 18px;
	align-items: center;
}

.site-header .ast-container,
.cpnyc-site-branding {
	display: flex;
	align-items: center;
}

.site-logo-img img,
.custom-logo-link img {
	max-height: 52px;
	width: auto;
}

.cpnyc-text-logo {
	font-family: var(--cpnyc-font-display);
	font-weight: 800;
	font-size: 23px;
	letter-spacing: -0.01em;
	color: var(--cpnyc-text-heading);
	text-decoration: none;
}

.cpnyc-text-logo:hover {
	color: var(--cpnyc-text-heading);
}

.cpnyc-text-logo__dot {
	color: var(--cpnyc-primary);
}

.main-header-bar {
	border-bottom: 1px solid var(--cpnyc-grey-light);
}

/* Reset Astra's own generic header spacing (min-height/padding intended
   for Astra's own header layout, not this one) so this theme's header
   height is only ever whatever cpnyc-header-row below actually needs -
   this is what was leaving a large empty gap above the mobile nav panel. */
.cpnyc-masthead {
	padding: 0 !important;
	min-height: 0 !important;
}

.cpnyc-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
	gap: 20px;
	flex-wrap: wrap;
}

/* Sticky header on desktop: stays visible while the page scrolls. The
   topbar above it (phone-free now) is intentionally left out of this -
   it scrolls away normally, and the moment it's scrolled past, the main
   header bar sticks to the very top of the viewport.

   Root cause this was never actually appearing: `.site-header { position:
   relative; }` further down this file (needed so the absolutely-positioned
   mobile search panel has a positioned ancestor) has the same specificity
   as `.cpnyc-masthead` and comes later in source order, so it was winning
   the `position` property outright and silently overriding `sticky` back
   to `relative` on every page load - a media query doesn't add specificity,
   so wrapping the rule in one didn't help it compete. Using the
   element+class selector `header.cpnyc-masthead` here raises this rule's
   specificity above `.site-header` alone, so it wins regardless of source
   order. Confirmed with a headless-browser check of the computed
   `position` value before/after this change. */
@media (min-width: 769px) {
	header.cpnyc-masthead {
		position: sticky;
		top: 0;
		z-index: 200;
		background: var(--cpnyc-white);
	}
}

/* Base (desktop) nav layout - lays menu items out in a row. Deliberately
   namespaced as .cpnyc-nav rather than reusing Astra's own ".main-navigation"
   class: Astra's parent stylesheet defines its own rules for that exact
   class name (including its own mobile show/hide behavior for ITS OWN
   toggle system), which is what was overriding this theme's rules and
   causing the menu to render stacked/always-visible regardless of screen
   size. Using a namespaced class removes that conflict at the root instead
   of fighting it with specificity/!important. */
.cpnyc-nav .menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cpnyc-nav .menu > .menu-item > a {
	font-weight: 600;
	color: var(--cpnyc-text-heading);
	text-decoration: none;
}

.cpnyc-nav .menu > .menu-item > a:hover {
	color: var(--cpnyc-primary-dark);
}

/* Search form + CTA duplicated inside the mobile nav panel (see header.php)
   so the collapsible hamburger panel holds everything on small screens;
   hidden on desktop, where the header's own search icon + CTA button
   (in .cpnyc-header-icons) already cover this. */
.cpnyc-nav__mobile-extra {
	display: none;
}

.cpnyc-header-cta {
	margin-left: 12px;
}

/* ---- Header icon row: search toggle, CTA, mobile menu toggle ---- */
.cpnyc-header-icons {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Every property here that could otherwise be overridden by Astra's own
   generic button styling (box-sizing, padding, border-radius) is pinned
   with !important - these are small, fixed-size icon buttons where any
   inherited padding/box-sizing difference visibly breaks the circle
   shape, so this theme's own rule needs to win outright rather than
   compete on specificity. */
.cpnyc-search-toggle {
	box-sizing: border-box !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0;
	border-radius: 50% !important;
	border: 1px solid var(--cpnyc-grey-light);
	background: var(--cpnyc-white);
	color: var(--cpnyc-accent);
	cursor: pointer;
	transition: all .15s ease-in-out;
	flex: 0 0 auto;
	overflow: hidden;
}

.cpnyc-search-toggle:hover,
.cpnyc-search-toggle[aria-expanded="true"] {
	background: var(--cpnyc-primary);
	border-color: var(--cpnyc-primary);
	color: var(--cpnyc-accent-dark);
}

/* Search overlay panel that drops down from the header */
.cpnyc-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--cpnyc-white);
	border-bottom: 1px solid var(--cpnyc-grey-light);
	box-shadow: var(--cpnyc-shadow-md);
	padding: 20px 0;
	z-index: 50;
}

.cpnyc-search-panel .cpnyc-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.cpnyc-search-panel .cpnyc-site-search-form {
	flex: 1 1 auto;
}

.cpnyc-search-panel__close {
	box-sizing: border-box !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0;
	border-radius: 50% !important;
	border: 1px solid var(--cpnyc-grey-light);
	background: var(--cpnyc-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--cpnyc-grey);
	overflow: hidden;
}

.cpnyc-search-panel__close:hover {
	color: var(--cpnyc-accent);
	border-color: var(--cpnyc-accent);
}

.site-header {
	position: relative;
}

/* Reusable search form markup (searchform.php) */
.cpnyc-site-search-form {
	display: flex;
	gap: 10px;
}

.cpnyc-site-search-input {
	flex: 1 1 auto;
	padding: 12px 16px;
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-sm);
	background: var(--cpnyc-grey-lighter);
	font-size: 15px;
	color: var(--cpnyc-text);
}

.cpnyc-site-search-form .cpnyc-btn {
	flex: 0 0 auto;
}

/* Honeypot field on the front-end submission form: hidden from sighted
   users and screen readers alike, but still present in the DOM/tab order
   is disabled via tabindex="-1" in the markup. */
.cpnyc-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   4. HERO / SEARCH
   ========================================================================== */
.cpnyc-hero {
	background: linear-gradient(160deg, var(--cpnyc-accent) 0%, var(--cpnyc-accent-dark) 100%);
	color: var(--cpnyc-white);
	padding: 72px 0 96px;
	overflow: hidden;
	position: relative;
}

.cpnyc-hero::after {
	content: "";
	position: absolute;
	right: -120px;
	top: -120px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(253,170,72,.35) 0%, rgba(253,170,72,0) 70%);
}

.cpnyc-hero__inner {
	max-width: 760px;
	position: relative;
	z-index: 1;
}

.cpnyc-hero h1 {
	color: var(--cpnyc-white);
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.15;
	margin-bottom: 16px;
}

.cpnyc-hero h1 span {
	color: var(--cpnyc-primary);
}

.cpnyc-hero p {
	font-size: 18px;
	color: rgba(255,255,255,.82);
	max-width: 560px;
	margin-bottom: 32px;
}

.cpnyc-search-card {
	background: var(--cpnyc-white);
	border-radius: var(--cpnyc-radius-lg);
	padding: 20px;
	box-shadow: var(--cpnyc-shadow-lg);
	max-width: 760px;
	position: relative;
	z-index: 1;
}

.cpnyc-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cpnyc-search-form .cpnyc-field {
	flex: 1 1 200px;
	/* Without this, a flex item's default min-width is "auto" (its
	   content's own natural width), which can force a <select> wider
	   than the space actually available instead of letting it shrink -
	   the select (and its text) then overflows/clips at the edge of the
	   card instead of wrapping or eliding. */
	min-width: 0;
}

.cpnyc-search-form label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cpnyc-grey);
	margin-bottom: 6px;
}

.cpnyc-search-form select,
.cpnyc-search-form input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-sm);
	background: var(--cpnyc-grey-lighter);
	font-size: 15px;
	color: var(--cpnyc-text);
}

.cpnyc-search-form button {
	flex: 0 0 auto;
	align-self: flex-end;
}

/* Generic hand-rolled form styling (page-contact.php) - same visual
   language as the hero search form above. */
.cpnyc-plain-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
}

.cpnyc-plain-form .cpnyc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cpnyc-plain-form label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cpnyc-grey);
}

.cpnyc-plain-form input[type="text"],
.cpnyc-plain-form input[type="email"],
.cpnyc-plain-form select,
.cpnyc-plain-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-sm);
	background: var(--cpnyc-grey-lighter);
	font-size: 15px;
	color: var(--cpnyc-text);
	font-family: inherit;
}

.cpnyc-plain-form textarea {
	resize: vertical;
}

.cpnyc-plain-form button {
	align-self: flex-start;
}

/* Consistent, cross-browser <select> styling. Left to the browser default,
   a <select> draws its own native dropdown arrow on top of our padding,
   and on several browsers that made the placeholder/first-option text
   ("Any capability", "Any NYC borough") look clipped right where that
   arrow sits. Removing the native appearance and drawing one fixed
   chevron with matching reserved padding fixes it everywhere a <select>
   is used: the homepage capability/location search and the Contact page
   subject field.

   This is the third pass at the clipping specifically. The first
   (removing `overflow: hidden`) and second (an explicit `line-height`)
   each helped without fully fixing it - which makes sense in hindsight:
   a <select>'s displayed value isn't vertically centered via line-height
   the way a <div>'s text is, and that property is unreliably honored on
   this specific element across browsers. The approach that IS reliable
   everywhere: give the box a fixed `height`, drop vertical padding to 0,
   and let the browser's own native centering of the control's content
   handle the rest - every browser vertically centers a form control's
   text within its box height on its own, with no line-height math
   involved at all. A genuinely long option name is still safely
   contained by `max-width: 100%` and `box-sizing: border-box` alone. */
.cpnyc-search-form select,
.cpnyc-plain-form select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A968E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px !important;
	height: 48px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 14px !important;
	padding-right: 38px !important;
	box-sizing: border-box !important;
	min-width: 0;
	max-width: 100%;
	line-height: normal;
}

.cpnyc-hero__directory-link {
	margin: 14px 0 0;
	position: relative;
	z-index: 1;
}

.cpnyc-hero__directory-link a {
	color: var(--cpnyc-white);
	font-weight: 600;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpnyc-hero__directory-link a:hover {
	color: var(--cpnyc-primary);
}

.cpnyc-hero__stats {
	display: flex;
	gap: 28px;
	margin-top: 28px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.cpnyc-hero__stats strong {
	display: block;
	font-size: 24px;
	color: var(--cpnyc-primary);
}

.cpnyc-hero__stats span {
	font-size: 13px;
	color: rgba(255,255,255,.75);
}

/* ==========================================================================
   5. BROWSE GRIDS (capabilities / locations)
   ========================================================================== */
.cpnyc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

.cpnyc-term-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: var(--cpnyc-white);
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-md);
	text-decoration: none;
	transition: all .15s ease-in-out;
}

.cpnyc-term-card:hover {
	border-color: var(--cpnyc-primary);
	box-shadow: var(--cpnyc-shadow-sm);
	transform: translateY(-2px);
}

.cpnyc-term-card__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--cpnyc-radius-sm);
	background: var(--cpnyc-primary-tint);
	color: var(--cpnyc-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.cpnyc-term-card__title {
	font-weight: 700;
	color: var(--cpnyc-text-heading);
	display: block;
}

.cpnyc-term-card__count {
	font-size: 12px;
	color: var(--cpnyc-grey);
}

/* Capability/Location hub pages (page-capability-hub.php, page-location-hub.php):
   one block per top-level term, with any child terms listed as pills
   inside that same block - works whether terms are flat or hierarchical. */
.cpnyc-term-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
	align-items: start;
}

.cpnyc-term-block {
	background: var(--cpnyc-white);
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-md);
	padding: 8px;
	transition: border-color .15s ease-in-out;
}

.cpnyc-term-block:hover {
	border-color: var(--cpnyc-primary);
}

.cpnyc-term-block__header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	text-decoration: none;
	border-radius: var(--cpnyc-radius-sm);
}

.cpnyc-term-block__children {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px 10px 10px;
}

.cpnyc-term-block__child-count {
	opacity: .7;
	font-size: 10px;
}

/* ==========================================================================
   6. COMPANY LISTINGS
   A horizontal row per company (logo left, details right) stacked as a
   single-column list - reads far less "vertical" per listing than a
   Pinterest-style card grid, and suits a directory with descriptions and
   several tags per entry. Collapses to a stacked column on small screens.
   ========================================================================== */
.cpnyc-companies-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cpnyc-company-card {
	background: var(--cpnyc-white);
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-md);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	transition: box-shadow .15s ease-in-out, transform .15s ease-in-out, border-color .15s ease-in-out;
	position: relative;
}

.cpnyc-company-card:hover {
	box-shadow: var(--cpnyc-shadow-md);
	transform: translateY(-2px);
	border-color: var(--cpnyc-primary);
}

.cpnyc-company-card__media {
	flex: 0 0 auto;
	width: 112px;
	height: 112px;
	border-radius: var(--cpnyc-radius-sm);
	background: var(--cpnyc-white);
	border: 1px solid var(--cpnyc-grey-light);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cpnyc-company-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
}

.cpnyc-company-card__media .cpnyc-logo-fallback {
	font-size: 22px;
	font-weight: 700;
	color: var(--cpnyc-accent);
	font-family: var(--cpnyc-font-display);
}

.cpnyc-company-card__body {
	flex: 1 1 auto;
	min-width: 0; /* lets long titles/text wrap instead of stretching the row */
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cpnyc-company-card__title {
	font-size: 18px;
	margin: 0;
}

.cpnyc-company-card__title a {
	color: var(--cpnyc-text-heading);
	text-decoration: none;
}

.cpnyc-company-card__title a:hover {
	color: var(--cpnyc-primary-dark);
}

.cpnyc-company-card__meta {
	font-size: 13px;
	color: var(--cpnyc-grey);
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.cpnyc-company-card__excerpt {
	font-size: 14px;
	color: var(--cpnyc-text);
	line-height: 1.5;
}

.cpnyc-company-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cpnyc-company-card__terms .cpnyc-pill,
.cpnyc-company-card__terms .cpnyc-pill--location {
	font-size: 11px;
	padding: 4px 10px;
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
}

.cpnyc-company-card__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

@media (max-width: 640px) {
	.cpnyc-company-card {
		flex-direction: column;
	}
	.cpnyc-company-card__media {
		width: 100%;
		height: 140px;
	}
	.cpnyc-company-card__footer .cpnyc-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ==========================================================================
   7. DIRECTORY / ARCHIVE LAYOUT (filters + results)
   ========================================================================== */
.cpnyc-directory {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
}

.cpnyc-filters {
	background: var(--cpnyc-white);
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-md);
	padding: 22px;
	position: sticky;
	top: 20px;
}

.cpnyc-filters h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 14px;
	color: var(--cpnyc-grey);
}

.cpnyc-filters fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 24px;
}

.cpnyc-filters fieldset:last-of-type {
	margin-bottom: 0;
}

.cpnyc-filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 6px 0;
	color: var(--cpnyc-text);
}

.cpnyc-filter-option input {
	accent-color: var(--cpnyc-primary);
}

/* A term name inside a filter option is also a direct link to the
   dedicated "[Capability] in [Location]" combo page for that pair (see
   filter-form.php) - styled like plain text until hovered, so it reads
   as a label first and a link second. */
.cpnyc-filter-option a {
	color: inherit;
	text-decoration: none;
}

.cpnyc-filter-option a:hover {
	color: var(--cpnyc-primary-dark);
	text-decoration: underline;
}

.cpnyc-filters .cpnyc-btn {
	width: 100%;
	margin-top: 6px;
}

.cpnyc-results-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cpnyc-grey-light);
}

.cpnyc-results-toolbar .cpnyc-active-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cpnyc-active-filters a {
	font-size: 12px;
}

.cpnyc-empty-state {
	text-align: center;
	padding: 60px 20px;
	background: var(--cpnyc-grey-lighter);
	border-radius: var(--cpnyc-radius-md);
}

@media (max-width: 800px) {
	.cpnyc-directory {
		grid-template-columns: 1fr;
	}
	.cpnyc-filters {
		position: static;
	}
}

/* ==========================================================================
   8. SINGLE COMPANY PROFILE
   ========================================================================== */
.cpnyc-profile-hero {
	background: var(--cpnyc-grey-lighter);
	border-bottom: 1px solid var(--cpnyc-grey-light);
	padding: 44px 0;
}

.cpnyc-profile-hero__row {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.cpnyc-profile-logo {
	width: 100px;
	height: 100px;
	border-radius: var(--cpnyc-radius-md);
	background: var(--cpnyc-white);
	border: 1px solid var(--cpnyc-grey-light);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 0 0 auto;
}

.cpnyc-profile-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpnyc-profile-heading {
	flex: 1 1 320px;
}

.cpnyc-profile-heading h1 {
	margin-bottom: 6px;
	font-size: clamp(24px, 3vw, 34px);
}

.cpnyc-profile-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cpnyc-profile-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cpnyc-profile-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	align-items: start;
	padding: 48px 0 72px;
}

/* Used on single-company-profile.php: no sidebar, since the real data
   model is just logo + site_url (both already shown in the hero) plus
   the description below. */
.cpnyc-profile-layout--single {
	grid-template-columns: 1fr;
	max-width: 780px;
}

.cpnyc-profile-main h2 {
	font-size: 20px;
	margin: 36px 0 14px;
}

.cpnyc-profile-main h2:first-child {
	margin-top: 0;
}

.cpnyc-profile-main .cpnyc-description {
	font-size: 16px;
	line-height: 1.75;
}

.cpnyc-facts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cpnyc-facts-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cpnyc-grey-light);
	font-size: 14px;
}

.cpnyc-facts-list li:last-child {
	border-bottom: 0;
}

.cpnyc-facts-list span:first-child {
	color: var(--cpnyc-grey);
}

.cpnyc-facts-list span:last-child {
	font-weight: 600;
	text-align: right;
}

.cpnyc-sidebar-card {
	background: var(--cpnyc-white);
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: var(--cpnyc-radius-md);
	padding: 24px;
	margin-bottom: 24px;
}

.cpnyc-sidebar-card h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cpnyc-grey);
	margin: 0 0 16px;
}

.cpnyc-related {
	padding: 56px 0 72px;
	border-top: 1px solid var(--cpnyc-grey-light);
}

@media (max-width: 900px) {
	.cpnyc-profile-layout {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   9. CTA BAND / FOOTER
   ========================================================================== */
.cpnyc-cta-band {
	background: var(--cpnyc-accent);
	color: var(--cpnyc-white);
	padding: 56px 0;
	text-align: center;
}

.cpnyc-cta-band h2 {
	color: var(--cpnyc-white);
	font-size: 28px;
	margin-bottom: 12px;
}

.cpnyc-cta-band p {
	color: rgba(255,255,255,.8);
	max-width: 560px;
	margin: 0 auto 26px;
}

.site-footer,
.cpnyc-footer {
	background: var(--cpnyc-text-heading);
	color: rgba(255,255,255,.75);
	padding: 56px 0 0;
}

.cpnyc-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}

.cpnyc-footer__grid h4 {
	color: var(--cpnyc-white);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 16px;
}

.cpnyc-footer__grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cpnyc-footer__grid li {
	margin-bottom: 10px;
}

.cpnyc-footer__grid a {
	color: rgba(255,255,255,.75);
	text-decoration: none;
	font-size: 14px;
}

.cpnyc-footer__grid a:hover {
	color: var(--cpnyc-primary);
}

.cpnyc-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 22px 0;
	font-size: 13px;
}

.cpnyc-footer-bottom a {
	color: rgba(255,255,255,.75);
}

@media (max-width: 900px) {
	.cpnyc-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.cpnyc-footer__grid {
		grid-template-columns: 1fr;
	}
	.cpnyc-hero {
		padding: 52px 0 72px;
	}
}

/* ==========================================================================
   10. MOBILE HEADER + NAV PANEL

   On phones/tablets the header row collapses to just: logo | search icon |
   hamburger. Tapping the hamburger opens ONE panel holding the nav links,
   then (folded in via .cpnyc-nav__mobile-extra, see header.php) the search
   form and the "List Your Company" CTA - one organized, full-width panel
   instead of four small controls competing for space on one line.
   ========================================================================== */
.cpnyc-menu-toggle {
	box-sizing: border-box !important;
	display: none;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	margin: 0;
	background: transparent;
	border: 1px solid var(--cpnyc-grey-light);
	border-radius: 50% !important;
	padding: 0 !important;
	cursor: pointer;
	color: var(--cpnyc-accent);
	flex: 0 0 auto;
	overflow: hidden;
}

/* Lock every inline icon to a real, fixed 20x20 box. Many themes
   (Astra included) ship a generic responsive-media reset along the lines
   of `svg { max-width: 100%; height: auto; }` intended for content
   images - applied to a small UI icon inside a fixed-size circular
   button, that reset is exactly what made the search/menu icon buttons
   above render oversized/invisible and stretched the button into an
   oval. Re-declaring an explicit width/height/max on our own icon class
   overrides that regardless of where else "svg" is styled. */
.cpnyc-icon {
	display: block;
	width: 20px !important;
	height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	flex: 0 0 auto;
}

/* Hamburger shows by default; swaps to an "x" once open. Both icons are
   always in the markup (see header.php) - only visibility toggles here,
   driven by the aria-expanded state main.js already sets. */
.cpnyc-menu-toggle .cpnyc-icon--close {
	display: none;
}
.cpnyc-menu-toggle[aria-expanded="true"] .cpnyc-icon--menu {
	display: none;
}
.cpnyc-menu-toggle[aria-expanded="true"] .cpnyc-icon--close {
	display: inline-block;
}
.cpnyc-menu-toggle[aria-expanded="true"] {
	background: var(--cpnyc-primary);
	border-color: var(--cpnyc-primary);
	color: var(--cpnyc-accent-dark);
}

@media (max-width: 768px) {
	.cpnyc-menu-toggle {
		display: inline-flex;
	}

	/* The always-visible CTA button and the separate search icon/overlay
	   both move into the nav panel below on mobile (.cpnyc-nav__mobile-extra
	   already has its own copy of the search form), so the header row
	   itself only ever holds the branding + a single hamburger button -
	   nothing left to squeeze onto one line. */
	.cpnyc-header-cta,
	.cpnyc-search-toggle {
		display: none;
	}

	.cpnyc-nav {
		display: none;
		width: 100%;
		order: 3;
	}
	.cpnyc-nav.is-open {
		display: block;
	}
	.cpnyc-nav .menu {
		display: flex;
		flex-direction: column;
		/* Overrides the desktop rule's align-items:center above, which
		   otherwise carries over here and was shrink-wrapping/centering
		   each nav item instead of letting it stretch full-width. */
		align-items: stretch;
		gap: 0;
		list-style: none;
		margin: 8px 0 0;
		padding: 0;
	}
	.cpnyc-nav .menu > .menu-item {
		width: 100%;
	}
	.cpnyc-nav .menu > .menu-item > a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 9px 4px;
		font-size: 15px;
		text-align: left;
		border-bottom: 1px solid var(--cpnyc-grey-light);
	}

	.cpnyc-nav__mobile-extra {
		display: block;
		margin: 10px 0 12px;
		padding-top: 10px;
	}
	.cpnyc-nav__mobile-extra .cpnyc-site-search-form {
		margin-bottom: 10px;
	}
	.cpnyc-nav__mobile-extra .cpnyc-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   11. MOBILE POLISH PASS
   A few additional breakpoints tightening up spacing/sizing on phones,
   layered on top of the responsive rules already inline throughout the
   sections above (hero, cards, directory, profile layout, footer).
   ========================================================================== */

/* Topbar: drop the descriptive tagline first, it's the least essential
   piece of information once space is tight. */
@media (max-width: 640px) {
	.cpnyc-topbar__links:first-child {
		display: none;
	}
	.cpnyc-topbar .cpnyc-container {
		justify-content: flex-end;
	}
}

/* Header: let the branding + icon row wrap onto two lines gracefully
   instead of squeezing the "List Your Company" button unreadably thin,
   and give every tappable icon a comfortable 44px+ touch target. */
@media (max-width: 480px) {
	.cpnyc-search-toggle,
	.cpnyc-menu-toggle {
		width: 44px;
		height: 44px;
	}
	.cpnyc-search-panel .cpnyc-container {
		flex-direction: column;
		align-items: stretch;
	}
	.cpnyc-search-panel__close {
		align-self: flex-end;
		margin-top: -8px;
	}
	.cpnyc-site-search-form {
		flex-direction: column;
	}
	.cpnyc-site-search-form .cpnyc-btn {
		width: 100%;
	}
}

/* Hero search card: stack the two selects + button on very small screens
   instead of relying on flex-wrap alone, so nothing looks squeezed.

   Root cause of the large empty gaps that used to show up here: the base
   rule for `.cpnyc-field` sets `flex: 1 1 200px` for the *desktop* row
   layout, where a 200px flex-basis means a 200px-wide column. Flipping
   `.cpnyc-search-form` to `flex-direction: column` here doesn't clear that
   shorthand - a flex-basis is read along whichever axis is now the main
   axis, so in a column container that same "200px" was being applied as a
   200px-tall row instead of a 200px-wide one, forcing each field wrapper
   (and its ~65px-tall label+select) to a fixed 200px height and leaving a
   large blank gap below it. Confirmed by measuring the rendered field
   height in a headless browser: it came back as exactly 200px. Explicitly
   resetting `flex` back to `0 0 auto` here makes each field's height
   content-based again, matching its actual label+select instead of the
   leftover desktop width value. */
@media (max-width: 560px) {
	.cpnyc-search-form {
		flex-direction: column;
	}
	.cpnyc-search-form .cpnyc-field,
	.cpnyc-search-form button {
		width: 100%;
		flex: 0 0 auto;
	}
	.cpnyc-hero__stats {
		gap: 20px;
	}
}

@media (max-width: 560px) {
	.cpnyc-profile-actions {
		width: 100%;
	}
	.cpnyc-profile-actions .cpnyc-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	.cpnyc-profile-hero__row {
		align-items: flex-start;
	}
	.cpnyc-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Directory filters: bigger checkbox tap targets on touch screens. */
@media (max-width: 800px) {
	.cpnyc-filter-option {
		padding: 9px 0;
		font-size: 15px;
	}
	.cpnyc-filter-option input {
		width: 18px;
		height: 18px;
	}
}

/* Accessibility */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--cpnyc-accent);
	color: var(--cpnyc-white);
	padding: 10px 16px;
	z-index: 999999;
}

.skip-link:focus {
	left: 10px;
	top: 10px;
}