/* Hero — dot-grid pattern echoes a coordinate grid, tying into "this is
   a map of real infrastructure" rather than being decoration for its
   own sake. Full-bleed, sits outside the 900px .ddc-page container. */
.ddc-hero {
	position: relative;
	background: var(--ddc-ink);
	color: #fff;
	padding: 88px 24px 76px;
	text-align: center;
	overflow: hidden;
	background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
	background-size: 26px 26px;
}
.ddc-hero::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at center, rgba(26,26,26,0) 0%, var(--ddc-ink) 78%);
}
.ddc-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.ddc-hero-eyebrow { font-family: var(--ddc-font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #F0A5C0; margin-bottom: 18px; }
.ddc-hero h1 { font-size: 42px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; font-weight: 700; }
.ddc-hero h1 span { color: #F0A5C0; }
.ddc-hero p { font-size: 18px; color: #C9C9C9; margin: 0 0 36px; line-height: 1.6; }

.ddc-search-box {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 999px; padding: 6px 6px 6px 22px;
	box-shadow: var(--ddc-shadow-lift); max-width: 560px; margin: 0 auto;
}
.ddc-search-box input { flex: 1; min-width: 0; border: none; outline: none; font-size: 17px; padding: 12px 0; color: var(--ddc-ink); background: transparent; }
.ddc-search-box input::placeholder { color: #999; }
.ddc-search-box button { background: var(--ddc-crimson); color: #fff; border: none; border-radius: 999px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; }
.ddc-search-box button:hover { background: var(--ddc-crimson-dark); }
.ddc-search-hint { margin-top: 14px; font-size: 13px; color: #999; }
.ddc-search-hint a { color: #F0A5C0; text-decoration: none; }

/* Status readout — reuses the verified-green dot language from the
   badge already used sitewide, styled like a live infrastructure
   dashboard rather than a generic "impressive numbers" stat block.
   This is the homepage's signature element. */
.ddc-readout {
	max-width: 900px; margin: -34px auto 0; position: relative; z-index: 2;
	background: #fff; border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius);
	box-shadow: var(--ddc-shadow-md);
	display: grid; grid-template-columns: repeat(4, 1fr);
}
.ddc-readout-cell { padding: 22px 20px; text-align: center; border-right: 1px solid var(--ddc-hairline); }
.ddc-readout-cell:last-child { border-right: none; }
.ddc-readout-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ddc-verified); margin-right: 6px; }
.ddc-readout-num { font-family: var(--ddc-font-mono); font-size: 26px; font-weight: 700; color: var(--ddc-ink); }
.ddc-readout-label { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; }

.ddc-homepage .ddc-section { padding: 56px 0; }
.ddc-homepage .ddc-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.ddc-homepage .ddc-section-head h2 { font-size: 22px; margin: 0; border-bottom: 2px solid var(--ddc-crimson); padding-bottom: 8px; }
.ddc-homepage .ddc-see-all { font-size: 14px; font-weight: 600; color: var(--ddc-crimson); text-decoration: none; }
.ddc-homepage .ddc-see-all:hover { text-decoration: underline; }

/* Top locations */
.ddc-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ddc-loc-card {
	background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm);
	padding: 18px 20px; box-shadow: var(--ddc-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease;
	text-decoration: none; color: inherit; display: block;
}
.ddc-loc-card:hover { box-shadow: var(--ddc-shadow-md); transform: translateY(-2px); }
.ddc-loc-card .name { font-weight: 700; font-size: 17px; margin-bottom: 4px; color: var(--ddc-ink); }
.ddc-loc-card .count { font-size: 13px; color: var(--ddc-teal); }

/* Top companies */
.ddc-co-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ddc-co-card {
	background: #fff; border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm);
	padding: 18px 16px; box-shadow: var(--ddc-shadow-sm); text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease; text-decoration: none; color: inherit; display: block;
}
.ddc-co-card:hover { box-shadow: var(--ddc-shadow-md); transform: translateY(-2px); }
/* v2.57.0 — was 40px. The box itself was small independent of the
   fetch-side fill-ratio fix in v2.56.0, which only ever affected how
   much of the stored 256px canvas the logo content fills, not how big
   this display box is. Raised to 64px; the underlying <img> request
   also raised (see template-homepage.php) so there's real resolution
   available at this larger size, not just a bigger box around the
   same small source. */
.ddc-co-logo, .ddc-co-logo-img { width: 64px; height: 64px; border-radius: 8px; background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; object-fit: contain; }
.ddc-co-card .name { font-weight: 600; font-size: 15px; color: var(--ddc-ink); }
.ddc-co-card .type { font-size: 12px; color: #888; margin-top: 2px; }

/* Browse by continent */
.ddc-continent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ddc-continent-card {
	position: relative; border-radius: var(--ddc-radius-sm); overflow: hidden; height: 108px;
	display: flex; align-items: flex-end; padding: 16px; text-decoration: none;
	background: linear-gradient(135deg, var(--ddc-teal), #12505c);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Same theme a:hover-vs-specificity fix as .ddc-ai-teaser above (v2.34.9),
   applied here too (v2.34.10) — found live right after that fix shipped:
   this card has the identical shape (gradient background on the base
   class, no :hover rule reasserting it) and is exposed to the exact same
   generic a:hover reset from the theme. Swept every other homepage/
   directory card for the same pattern while in here — .ddc-loc-card,
   .ddc-co-card, .ddc-nav-tile, .ddc-top-card, .ddc-search-result, and
   .ddc-404-links all use light/white backgrounds, so the same theme
   override technically happens there too, it's just invisible against a
   white page — not a real, visible bug, left untouched. */
.ddc-continent-card:hover {
	background: linear-gradient(135deg, var(--ddc-teal), #12505c) !important;
	box-shadow: var(--ddc-shadow-md);
	transform: translateY(-2px);
}
.ddc-continent-card .name { color: #fff; font-weight: 700; font-size: 17px; position: relative; z-index: 1; }
.ddc-continent-card .count { color: rgba(255,255,255,0.75); font-size: 12px; position: relative; z-index: 1; }
.ddc-continent-card::before {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
	background-size: 16px 16px;
}

/* AI Data Centers teaser — deliberately placed last among the content
   sections (after locations/companies/continents), matching the site's
   locked SEO priority: data centers first, colocation second, AI data
   centers weighted below both. Teal rather than crimson so it doesn't
   visually compete with the primary CTA below it, and reuses the
   hero's dot-grid texture to tie the two together as the same "network"
   visual language. Hidden entirely when there are zero AI-flagged
   facilities — same graceful-absence rule as everywhere else in this
   build; no reason to link toward an empty hub page. */
.ddc-ai-teaser {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: linear-gradient(135deg, var(--ddc-teal), #12505c);
	border-radius: var(--ddc-radius);
	padding: 32px 36px;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ddc-ai-teaser::before {
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
	background-size: 20px 20px;
}
.ddc-ai-teaser:hover {
	/* Reasserts this box's own gradient on hover (v2.34.9) — found live,
	   root-caused via DevTools, not guessed: a generic theme rule
	   `a:hover { background: none; }` was winning against this box's
	   base `.ddc-ai-teaser { background: linear-gradient(...) }` on
	   plain CSS specificity — `a:hover` (element + pseudo-class,
	   specificity 0,1,1) beats a single class selector (0,1,0), since a
	   pseudo-class counts in the same specificity column as a real
	   class and `a` adds one more element-level match on top of that.
	   This box is an <a> tag, like most link-styled CTAs, so it was
	   exposed to exactly this class of theme reset.
	   Two classes (.ddc-ai-teaser:hover, specificity 0,2,0) already
	   beats a bare `a:hover` outright, which covers the overwhelming
	   majority of themes — but not a theme using !important or an
	   ID-anchored selector on its own link-hover reset, and this
	   plugin has no way to know what any given theme does. Since this
	   box has exactly one deliberate design and no legitimate reason a
	   theme should ever override it, !important is used here as a
	   genuine belt-and-suspenders measure, not a lazy substitute for
	   the specificity fix above — deliberately scoped to only the one
	   property actually being fought over (background), not applied
	   to box-shadow/transform below, which were never contested. */
	background: linear-gradient(135deg, var(--ddc-teal), #12505c) !important;
	box-shadow: var(--ddc-shadow-lift);
	transform: translateY(-2px);
}
.ddc-ai-teaser-text { position: relative; z-index: 1; }
/* Higher specificity than the generic .ddc-page h2 rule (crimson
   underline, meant for the light card sections) — this h2 sits on a
   dark background and needs its own look, not the shared default. */
.ddc-homepage .ddc-ai-teaser-text h2 { color: #fff; font-size: 22px; margin: 0 0 8px; border: none; padding: 0; }
.ddc-ai-teaser-text p { color: rgba(255,255,255,0.85); font-size: 17px; line-height: 1.6; margin: 0; max-width: 520px; }
.ddc-ai-teaser-cta {
	position: relative; z-index: 1; flex-shrink: 0;
	background: #fff; color: var(--ddc-teal); font-weight: 700; font-size: 15px;
	padding: 12px 22px; border-radius: 999px; white-space: nowrap;
}

@media (max-width: 760px) {
	.ddc-hero { padding: 64px 16px 56px; }
	.ddc-hero h1 { font-size: 30px; }
	/* AUDIT FIX: min-width:0 above (not this block) is the actual root
	   cause fix -- flex items default to min-width:auto, so without it
	   the input refused to shrink below the width of its own placeholder
	   text ('Try "Mumbai", "AWS", or "Northern California"'), pushing the
	   whole pill wider than its mobile container regardless of anything
	   set here. These two rules are just comfortable mobile sizing on
	   top of that fix, not the fix itself. */
	.ddc-search-box { padding: 6px 6px 6px 16px; }
	.ddc-search-box button { padding: 10px 18px; font-size: 14px; }
	.ddc-readout { grid-template-columns: repeat(2, 1fr); }
	.ddc-readout-cell:nth-child(2) { border-right: none; }
	.ddc-loc-grid, .ddc-continent-grid { grid-template-columns: repeat(2, 1fr); }
	.ddc-co-grid { grid-template-columns: repeat(2, 1fr); }
	.ddc-ai-teaser { flex-direction: column; align-items: flex-start; text-align: left; }
}