/**
 * Design tokens for the CCW Directory front end.
 *
 * Every colour, radius, shadow and type choice used by the plugin resolves back
 * to a custom property declared here, so the client can retheme the directory
 * from one file without touching component styles.
 *
 * Selectors stay at a single class of specificity and are all prefixed ccw- so
 * Elementor never has to fight them and never wins by accident.
 *
 * @package    CCW_Directory
 * @subpackage assets/css
 * @author     Shakib Shown <hi@shakib6472.com>
 * @link       https://shakib6472.com
 * @since      1.0.0
 */

:root {
	/* Brand */
	--ccw-accent: #f5821f;
	--ccw-accent-hover: #da6f12;
	--ccw-accent-soft: #fef1e3;

	--ccw-action: #1e3a6e;
	--ccw-action-hover: #16294d;

	/* Surfaces and ink */
	--ccw-ink: #101828;
	--ccw-surface-dark: #0d1626;
	--ccw-paper: #ffffff;
	--ccw-wash: #f4f6f9;
	--ccw-line: #e2e6ec;
	--ccw-line-strong: #cbd2dc;
	--ccw-muted: #667085;

	/* Status */
	--ccw-ok: #16803c;
	--ccw-closed: #dc2626;

	/* Type */
	--ccw-font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ccw-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Shape */
	--ccw-radius-card: 8px;
	--ccw-radius-button: 8px;
	--ccw-radius-chip: 6px;
	--ccw-border: 1px solid var(--ccw-line);
	--ccw-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
	--ccw-shadow-raised: 0 4px 12px rgba(16, 24, 40, 0.08);

	/* Rhythm */
	--ccw-space-1: 4px;
	--ccw-space-2: 8px;
	--ccw-space-3: 12px;
	--ccw-space-4: 16px;
	--ccw-space-5: 24px;
	--ccw-space-6: 32px;
	--ccw-space-7: 48px;

	/* Layout */
	--ccw-container: 1200px;
}

/*
 * Border-box everywhere inside plugin markup. It was previously set only on
 * form controls, which left anchors on content-box: a link styled as a button
 * added its padding and border on top of its min-height, so the same button
 * came out 56px tall instead of 38px. Scoped to .ccw-root, so nothing outside
 * plugin markup is affected.
 */
.ccw-root,
.ccw-root *,
.ccw-root *::before,
.ccw-root *::after {
	box-sizing: border-box;
}

.ccw-root,
.ccw-root input,
.ccw-root select,
.ccw-root textarea,
.ccw-root button {
	font-family: var(--ccw-font-body);
}

/* Controls only. .ccw-root is deliberately not in this list: setting a size on
   the wrapper would resize every paragraph inside it. */
.ccw-root input,
.ccw-root select,
.ccw-root textarea,
.ccw-root button {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ccw-ink);
	box-sizing: border-box;
}

.ccw-root h1,
.ccw-root h2,
.ccw-root h3,
.ccw-root h4,
.ccw-root .ccw-numeric,
.ccw-root .ccw-button {
	font-family: var(--ccw-font-heading);
}

.ccw-root {
	color: var(--ccw-ink);
}

/*
 * Component rules are scoped under .ccw-root on purpose. The active theme and
 * the Elementor kit both style bare element selectors with a descendant
 * qualifier, which outranks a lone class. Scoping keeps plugin components
 * predictable without a single !important, and leaves the rest of the site
 * completely untouched.
 */

/*
 * Text that only a screen reader should reach. This has to live in the shared
 * layer: every plugin page uses it, and where it is missing the hidden labels
 * render as visible text and break the layout around them.
 *
 * Deliberately not scoped under .ccw-root, because WordPress core markup such
 * as paginate_links() emits this class outside plugin containers.
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- Control reset, scoped */

/*
 * This lives here rather than in the account stylesheet because selects appear
 * on public pages too: the search bar and the archive sort control. Those pages
 * load ccw-tokens and ccw-public but never ccw-auth, so a control reset kept in
 * ccw-auth reached only half the places that render a control.
 */

.ccw-root input[type='text'],
.ccw-root input[type='search'],
.ccw-root input[type='email'],
.ccw-root input[type='tel'],
.ccw-root input[type='url'],
.ccw-root input[type='number'],
.ccw-root input[type='password'],
.ccw-root select,
.ccw-root textarea {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--ccw-line);
	border-radius: var(--ccw-radius-button);
	background-color: var(--ccw-paper);
	box-shadow: none;
	box-sizing: border-box;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ccw-ink);
	/* The chevron below replaces the native one, so the native one has to go
	   or the control shows two arrows. */
	appearance: none;
	-webkit-appearance: none;
}

.ccw-root select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}

.ccw-root textarea {
	min-height: 120px;
	resize: vertical;
}

.ccw-root input:focus,
.ccw-root select:focus,
.ccw-root textarea:focus {
	outline: 2px solid var(--ccw-accent);
	outline-offset: 1px;
	border-color: var(--ccw-accent);
}

.ccw-root input::placeholder,
.ccw-root textarea::placeholder {
	color: var(--ccw-muted);
	opacity: 1;
}

.ccw-root input[type='checkbox'] {
	width: 18px;
	min-height: 0;
	height: 18px;
	padding: 0;
	border-radius: 4px;
	accent-color: var(--ccw-accent);
}

/* ------------------------------------------------------------- Buttons */

/*
 * Also here rather than in the account stylesheet: the listing cards, the
 * archive and the contact form all use these, and those pages load only
 * ccw-tokens and ccw-public. Declared in full so the Elementor kit's own button
 * background cannot leak in.
 */

.ccw-root .ccw-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ccw-space-2);
	min-height: 46px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--ccw-radius-button);
	background-color: var(--ccw-accent);
	color: var(--ccw-paper);
	font-family: var(--ccw-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
}

.ccw-root .ccw-button--primary,
.ccw-root .ccw-button--primary:visited {
	background-color: var(--ccw-accent);
	color: var(--ccw-paper);
}

.ccw-root .ccw-button--primary:hover,
.ccw-root .ccw-button--primary:focus {
	background-color: var(--ccw-accent-hover);
	color: var(--ccw-paper);
}

.ccw-root .ccw-button--action,
.ccw-root .ccw-button--action:visited {
	background-color: var(--ccw-action);
	color: var(--ccw-paper);
}

.ccw-root .ccw-button--action:hover,
.ccw-root .ccw-button--action:focus {
	background-color: var(--ccw-action-hover);
	color: var(--ccw-paper);
}

.ccw-root .ccw-button--ghost {
	background-color: var(--ccw-paper);
	border-color: var(--ccw-line);
	color: var(--ccw-ink);
}

.ccw-root .ccw-button--danger {
	background-color: var(--ccw-paper);
	border-color: var(--ccw-closed);
	color: var(--ccw-closed);
}

.ccw-root .ccw-button--danger:hover,
.ccw-root .ccw-button--danger:focus {
	background-color: var(--ccw-closed);
	color: var(--ccw-paper);
}

.ccw-root .ccw-button--block {
	width: 100%;
}

/* -------------------------------------------------- Field, label, checkbox */

.ccw-field-group {
	margin-bottom: var(--ccw-space-4);
}

.ccw-root .ccw-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ccw-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ccw-muted);
}

.ccw-field-group.is-invalid .ccw-input {
	border-color: var(--ccw-closed);
}

.ccw-hint {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ccw-muted);
}

.ccw-root .ccw-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ccw-ink);
	cursor: pointer;
}

.ccw-checkbox--block {
	display: flex;
}

.ccw-root .ccw-checkbox input {
	flex: 0 0 auto;
	margin: 1px 0 0;
}

/* --------------------------------------------------------------- Text links */

.ccw-root .ccw-link {
	color: var(--ccw-accent);
	font-weight: 600;
	text-decoration: none;
}

.ccw-root .ccw-link:hover,
.ccw-root .ccw-link:focus {
	color: var(--ccw-accent-hover);
	text-decoration: underline;
}

.ccw-root .ccw-link--button {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	background-color: transparent;
	font: inherit;
	font-weight: 600;
	color: var(--ccw-accent);
	cursor: pointer;
}

.ccw-root .ccw-link--button[disabled] {
	color: var(--ccw-muted);
	cursor: not-allowed;
	text-decoration: none;
}

/*
 * Inline text actions (Respond, Edit, Delete, Resend) sit on one line of type,
 * which is a small target on a phone. Padding plus a matching negative margin
 * grows the hit area without moving anything around it.
 */
@media (max-width: 767px) {
	.ccw-root button.ccw-link,
	.ccw-root summary.ccw-link,
	.ccw-root .ccw-link--button {
		display: inline-block;
		padding: 9px 4px;
		margin: -9px -4px;
	}
}

/* ------------------------------------------------------------------ Notices */

.ccw-notice {
	margin: 0 0 var(--ccw-space-4);
	padding: 12px 16px;
	border: 1px solid var(--ccw-line);
	border-left-width: 4px;
	border-radius: var(--ccw-radius-chip);
	background-color: var(--ccw-wash);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.ccw-notice p,
.ccw-notice ul {
	margin: 0;
}

.ccw-notice ul {
	padding-left: 18px;
}

.ccw-notice--error {
	border-left-color: var(--ccw-closed);
	background-color: #fdf2f2;
	color: #7f1d1d;
}

.ccw-notice--success {
	border-left-color: var(--ccw-ok);
	background-color: #f0fdf4;
	color: #14532d;
}

.ccw-notice--info {
	border-left-color: var(--ccw-action);
	background-color: var(--ccw-wash);
	color: var(--ccw-ink);
}

/* ------------------------------------------------------------------- Switch */

.ccw-switch {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	cursor: pointer;
}

.ccw-root .ccw-switch input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.ccw-switch__track {
	display: block;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background-color: #cbd2dc;
	transition: background-color 0.15s ease;
	pointer-events: none;
}

.ccw-switch__track::after {
	position: absolute;
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	margin: 3px;
	border-radius: 50%;
	background-color: #fff;
	transition: transform 0.15s ease;
}

.ccw-switch input:checked + .ccw-switch__track {
	background-color: var(--ccw-accent);
}

.ccw-switch input:checked + .ccw-switch__track::after {
	transform: translateX(20px);
}

.ccw-switch input:focus-visible + .ccw-switch__track {
	outline: 2px solid var(--ccw-accent);
	outline-offset: 2px;
}

.ccw-switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ccw-space-4);
	cursor: pointer;
}

.ccw-switch-row__text {
	font-weight: 600;
	line-height: 1.5;
}

/* --------------------------------------------------------------------- Map */

.ccw-map {
	height: 280px;
	margin-bottom: 8px;
	border: 1px solid var(--ccw-line);
	border-radius: var(--ccw-radius-card);
	background-color: var(--ccw-wash);
	overflow: hidden;
}

.ccw-map__coords {
	margin-top: var(--ccw-space-3);
}

.ccw-root .ccw-card {
	background-color: var(--ccw-paper);
	border: var(--ccw-border);
	border-radius: var(--ccw-radius-card);
	box-shadow: var(--ccw-shadow);
}

.ccw-root .ccw-chip {
	display: inline-block;
	padding: 2px var(--ccw-space-2);
	border: var(--ccw-border);
	border-radius: var(--ccw-radius-chip);
	font-size: 12px;
	line-height: 1.6;
	color: var(--ccw-muted);
	background-color: var(--ccw-wash);
}

.ccw-root .ccw-chip--ok {
	color: var(--ccw-ok);
}

.ccw-root .ccw-chip--closed {
	color: var(--ccw-closed);
}

/* Respect a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.ccw-root * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}