/* ════════════════════════════════════════════════════════════
   Ciphers Digital Footer — Frontend
   All colors driven by CSS variables set inline on the wrapper.
   This is what makes the plugin truly white-label.
════════════════════════════════════════════════════════════ */

/* ── Variable defaults (used if inline style is missing) ─── */
.cdf-section,
.cdf-hours-standalone,
.cdf-nap {
	--cdf-primary:      #2D3561;
	--cdf-accent:       #3A4480;
	--cdf-pattern-dot:  #CDD2EE;
	--cdf-text:         #FFFFFF;
	--cdf-text-muted:   #CDD2EE;
	--cdf-cta-bg:       #C09A5A;
	--cdf-cta-bg-hover: #D4B47A;
	--cdf-cta-text:     #FFFFFF;
	--cdf-badge-open:   #5DCAA5;
	--cdf-badge-closed: #F09595;
	--cdf-radius:       0px;
}

/* ════════════════════════════════════════════════════════════
   MAIN SECTION
════════════════════════════════════════════════════════════ */
.cdf-section {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 520px;
	background: var(--cdf-primary);
	color: var(--cdf-text);
	overflow: hidden;
	font-family: inherit;
	border-radius: var(--cdf-radius);
	box-sizing: border-box;
}
.cdf-section * { box-sizing: border-box; }

/* SVG decorative pattern */
.cdf-pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.cdf-pattern svg { width: 100%; height: 100%; display: block; }
.cdf-pattern-blobs ellipse,
.cdf-pattern-blobs path { fill: var(--cdf-accent); }
.cdf-pattern-accent { fill: var(--cdf-accent) !important; }
.cdf-pattern-dots circle { fill: var(--cdf-pattern-dot); }

/* ── Map column ── */
.cdf-map {
	position: relative;
	width: 50%;
	flex-shrink: 0;
	z-index: 1;
	min-height: 320px;
}
.cdf-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ── Info column ── */
.cdf-info {
	position: relative;
	z-index: 1;
	flex: 1 1 100%;
	padding: 64px clamp(28px, 5vw, 80px);
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* Business header — centered (shared across single + multi layouts) */
.cdf-business { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.cdf-logo {
	max-height: 48px;
	width: auto;
	margin-bottom: 6px;
	object-fit: contain;
}
.cdf-biz-name {
	font-size: 24px;
	font-weight: 600;
	color: var(--cdf-text);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
	font-family: inherit;
}
.cdf-biz-tag {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cdf-text-muted) 55%, transparent);
}

/* Reusable label */
.cdf-lbl {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cdf-text-muted) 50%, transparent);
	margin-bottom: 6px;
}

/* Contact row */
.cdf-contact-row {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.cdf-contact-block { display: flex; flex-direction: column; }
.cdf-val {
	font-size: 16px;
	font-weight: 400;
	color: var(--cdf-text);
	text-decoration: none;
	transition: color 0.25s;
}
.cdf-val:hover { color: var(--cdf-text-muted); }
.cdf-val-note {
	font-size: 11px;
	color: color-mix(in srgb, var(--cdf-text-muted) 45%, transparent);
	margin-top: 3px;
}

/* Physical address */
.cdf-address { font-style: normal; line-height: 1.5; }
.cdf-addr-line { font-size: 14px; color: var(--cdf-text); }
.cdf-directions {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--cdf-cta-bg);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.cdf-directions:hover { color: var(--cdf-cta-bg-hover); }

/* Service areas pill list */
.cdf-service-areas { display: flex; flex-direction: column; }
.cdf-area-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cdf-area {
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 100px;
	background: color-mix(in srgb, var(--cdf-text) 8%, transparent);
	color: var(--cdf-text);
	border: 1px solid color-mix(in srgb, var(--cdf-text) 12%, transparent);
}

/* Hours */
.cdf-hours-wrap { display: flex; flex-direction: column; }
.cdf-hours-list {
	display: flex;
	flex-direction: column;
	background: color-mix(in srgb, var(--cdf-text) 7%, transparent);
	border-radius: 12px;
	padding: 4px 16px;
	margin-top: 2px;
}

.cdf-day-row {
	display: flex;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--cdf-text) 7%, transparent);
	font-size: 13px;
	color: color-mix(in srgb, var(--cdf-text) 48%, transparent);
	gap: 12px;
}
.cdf-day-row:last-child { border-bottom: none; }
.cdf-today {
	color: var(--cdf-text);
	font-weight: 500;
}
.cdf-dn { flex: 1; }
.cdf-dh {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
	text-align: right;
}

/* Open / Closed badge */
.cdf-badge {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 100px;
	flex-shrink: 0;
}
.cdf-badge-open {
	background: color-mix(in srgb, var(--cdf-badge-open) 22%, transparent);
	color: var(--cdf-badge-open);
}
.cdf-badge-closed {
	background: color-mix(in srgb, var(--cdf-badge-closed) 18%, transparent);
	color: var(--cdf-badge-closed);
}

/* CTA */
.cdf-cta { margin-top: auto; text-align: center; }
.cdf-cta a {
	display: inline-block;
	background: var(--cdf-cta-bg);
	color: var(--cdf-cta-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 14px 32px;
	border-radius: 100px;
	text-decoration: none;
	transition: background 0.25s, transform 0.2s;
}
.cdf-cta a:hover {
	background: var(--cdf-cta-bg-hover);
	transform: translateY(-2px);
}

/* Social icons — inherit currentColor so they re-theme automatically */
.cdf-socials {
	--cdf-social-size: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
.cdf-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--cdf-social-size) + 18px);
	height: calc(var(--cdf-social-size) + 18px);
	border-radius: 50%;
	background: color-mix(in srgb, var(--cdf-text) 8%, transparent);
	color: var(--cdf-text);
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}
.cdf-social:hover,
.cdf-social:focus-visible {
	background: var(--cdf-cta-bg);
	color: var(--cdf-cta-text);
	transform: translateY(-2px);
}
.cdf-social:focus-visible {
	outline: 2px solid var(--cdf-cta-bg);
	outline-offset: 2px;
}
.cdf-social svg {
	width: var(--cdf-social-size);
	height: var(--cdf-social-size);
	display: block;
}

/* Standalone social row — for [ciphers_socials] outside the dark section */
.cdf-socials-standalone .cdf-social {
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
}
.cdf-socials-standalone .cdf-social:hover {
	background: currentColor;
	color: #fff;
	filter: invert(0);
}

/* ════════════════════════════════════════════════════════════
   STANDALONE WRAPPERS — for [ciphers_hours], [ciphers_map], [ciphers_nap]
════════════════════════════════════════════════════════════ */
.cdf-hours-standalone {
	background: var(--cdf-primary);
	color: var(--cdf-text);
	padding: 24px;
	border-radius: 12px;
}

.cdf-map-standalone {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.cdf-map-standalone iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cdf-nap {
	font-family: inherit;
	color: inherit;
	line-height: 1.5;
}
.cdf-nap-name { font-weight: 600; font-size: 16px; }
.cdf-nap-addr { font-style: normal; font-size: 14px; margin: 4px 0; }
.cdf-nap-phone {
	display: inline-block;
	font-size: 15px;
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}
.cdf-nap-phone:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.cdf-section { flex-direction: column; }
	.cdf-map { width: 100%; height: 320px; }
	.cdf-info { padding: 40px 28px; }
	.cdf-contact-row { gap: 24px; }
	.cdf-biz-name { font-size: 22px; }
}
@media (max-width: 560px) {
	.cdf-info { padding: 32px 20px; gap: 22px; }
	.cdf-contact-row { gap: 18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cdf-cta a { transition: none; }
	.cdf-cta a:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   MULTI-LOCATION ADDITIONS
   Two (or more) location columns inside the same dark .cdf-info panel.
════════════════════════════════════════════════════════════ */
.cdf-locations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}
.cdf-location-col {
	display: flex;
	flex-direction: column;
	gap: 22px;
	text-align: left;
}
.cdf-location-col .cdf-loc-name {
	font-size: 17px;
	font-weight: 600;
	color: var(--cdf-text);
	letter-spacing: 0.01em;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid color-mix(in srgb, var(--cdf-text) 14%, transparent);
}
/* One location (e.g. on a hub page): collapse to a clean, centered single block */
.cdf-locations--single {
	grid-template-columns: minmax(0, 760px);
	justify-content: center;
}
@media (max-width: 900px) {
	.cdf-locations { gap: 32px; }
}

/* Per-location map (multi-location footer) — sharp card: taller, hairline border, soft shadow */
.cdf-loc-map {
	position: relative;
	width: 100%;
	height: 360px;
	border-radius: 14px;
	overflow: hidden;
	background: color-mix(in srgb, var(--cdf-text) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--cdf-text) 14%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.cdf-loc-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
@media (max-width: 560px) {
	.cdf-loc-map { height: 240px; }
}

/* ════════════════════════════════════════════════════════════
   FULL-BLEED
   The footer always spans the full viewport width, regardless of the
   theme/builder container it's dropped into (Bricks section, column, etc.).
   This is what makes the section reach edge-to-edge without per-site CSS.

   To opt OUT (boxed footer) on a specific site, override with:
     .cdf-section { width:100%; max-width:none; margin-left:0; margin-right:0; }
   If a thin horizontal scrollbar ever appears, add to that site:
     html, body { overflow-x: hidden; }
════════════════════════════════════════════════════════════ */
.cdf-section {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}