/* =====================================================================
   Clean Desk – Public Front-End Styles v2.0
   ===================================================================== */

:root {
	--cd-page-bg:          #1a1b2e;
	--cd-card-bg:          #16213e;
	--cd-accent:           #0f3460;
	--cd-text:             #e0e0e0;
	--cd-link:             #e94560;
	--cd-search-bg:        #16213e;
	--cd-search-border:    #3a3f5c;
	--cd-search-icon:      #9ca3af;
	--cd-btn-color:        #e94560;
	--cd-font:             inherit;
	--cd-title-size:       2rem;
	--cd-search-radius:    2rem;
	--cd-columns:          4;
	--cd-card-radius:      8px;
	--cd-gap:              0.85rem;
	--cd-ease:             0.18s ease;
	--cd-subtext-color:    #9ca3af;
	--cd-cat-title-color:  #e94560;
	--cd-cat-title-weight: 600;
	--cd-cat-desc-color:   #6b7280;
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.cd-grid-wrap {
	background:  var(--cd-page-bg);
	color:       var(--cd-text);
	font-family: var(--cd-font);
	min-height:  100vh;
	padding:     1.5rem 1.25rem;
	box-sizing:  border-box;
}

/* ── Announcement bar ────────────────────────────────────────────── */
.cd-announcement {
	text-align:    center;
	padding:       0.6rem 1.5rem;
	font-weight:   500;
	border-radius: 4px;
	margin-bottom: 1.25rem;
	line-height:   1.5;
}

/* ── Logo ────────────────────────────────────────────────────────── */
.cd-logo-wrap          { display: flex; margin-bottom: 1.25rem; }
.cd-logo-wrap--left    { justify-content: flex-start; }
.cd-logo-wrap--center  { justify-content: center; }
.cd-logo-wrap--right   { justify-content: flex-end; }
.cd-logo               { display: block; width: auto; max-width: 100%; object-fit: contain; }

/* ── Page title ──────────────────────────────────────────────────── */
.cd-page-title {
	text-align:     center;
	font-size:      var(--cd-title-size);
	font-weight:    700;
	color:          var(--cd-text);
	font-family:    var(--cd-font);
	margin:         0 0 1.75rem;
	letter-spacing: 0.02em;
	line-height:    1.2;
}

/* ── Search wrap ─────────────────────────────────────────────────── */
.cd-search-wrap {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.6rem;
	margin-bottom:  1.75rem;
	max-width:      calc(var(--cd-columns) * 240px);
	margin-left:    auto;
	margin-right:   auto;
}

.cd-search-wrap--bottom { margin-bottom: 0; margin-top: 1.75rem; }

.cd-search-form { width: 100%; max-width: 640px; }

/* ── Search inner — Option 2 style ──────────────────────────────── */
.cd-search-inner {
	display:       flex;
	align-items:   center;
	background:    var(--cd-search-bg);
	border:        1px solid var(--cd-search-border);
	border-radius: var(--cd-search-radius);
	overflow:      hidden;
	transition:    border-color var(--cd-ease), box-shadow var(--cd-ease), background var(--cd-ease);
}

.cd-search-inner:focus-within {
	background:   rgba(255,255,255,.03);
	border-color: var(--cd-link);
	box-shadow:   0 0 0 3px rgba(233,69,96,.12);
}

/* Magnifying glass icon */
.cd-search-icon {
	display:     flex;
	align-items: center;
	padding:     0 0.45rem 0 1rem;
	flex-shrink: 0;
	color:       var(--cd-search-icon);
	transition:  color var(--cd-ease);
}

.cd-search-inner:focus-within .cd-search-icon {
	color: var(--cd-text);
	opacity: 0.7;
}

/* Engine name label */
.cd-search-engine-label {
	font-size:     0.72rem;
	font-weight:   600;
	color:         var(--cd-search-icon);
	white-space:   nowrap;
	flex-shrink:   0;
	user-select:   none;
	padding-right: 0.6rem;
	border-right:  1px solid var(--cd-search-border);
	margin-right:  0.5rem;
	line-height:   1;
}

/* Input */
.cd-search-input {
	flex:        1;
	background:  transparent;
	border:      none;
	outline:     none;
	color:       var(--cd-text);
	font-size:   0.95rem;
	font-family: var(--cd-font);
	padding:     0.8rem 0.4rem;
}

.cd-search-input::placeholder { color: rgba(224,224,224,.22); }

/* Arrow submit button — icon only, flush right */
.cd-search-btn {
	background:  transparent;
	border:      none;
	border-left: 1px solid var(--cd-search-border);
	padding:     0 1rem;
	cursor:      pointer;
	color:       var(--cd-search-icon);
	display:     flex;
	align-items: center;
	align-self:  stretch;
	flex-shrink: 0;
	transition:  color var(--cd-ease), background var(--cd-ease);
	line-height: 1;
}

.cd-search-btn:hover {
	color:      var(--cd-text);
	background: rgba(255,255,255,.06);
}

.cd-search-btn:active { background: rgba(255,255,255,.03); }

/* Internal filter bar — also has arrow on right */
.cd-search-form--internal .cd-search-inner {
	/* Same as internet bar — arrow sits right */
}

/* ── Grid ────────────────────────────────────────────────────────── */
.cd-grid {
	display:               grid;
	grid-template-columns: repeat(var(--cd-columns), minmax(0, 1fr));
	gap:                   var(--cd-gap);
	max-width:             calc(var(--cd-columns) * 240px);
	margin:                0 auto;
	width:                 100%;
}

/* ── Column card ─────────────────────────────────────────────────── */
.cd-column {
	background:    var(--cd-card-bg);
	border-radius: var(--cd-card-radius);
	padding:       0.85rem 1rem 1rem;
	min-width:     0;
	border:        1px solid rgba(255,255,255,0.05);
}

/* Multi-column category */
.cd-column--multicol .cd-bookmark-list {
	column-count: 2;
	column-gap:   0.75rem;
}

.cd-column--multicol .cd-bookmark-item { break-inside: avoid; }

/* ── Category header block ───────────────────────────────────────── */
.cd-category-header-block {
	margin-bottom:  0.75rem;
	padding-bottom: 0.5rem;
	border-bottom:  1px solid rgba(255,255,255,0.06);
}

.cd-category-title {
	font-size:      0.72rem;
	font-weight:    var(--cd-cat-title-weight);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color:          var(--cd-cat-title-color);
	margin:         0;
	font-family:    var(--cd-font);
	line-height:    1.3;
}

.cd-category-desc {
	font-size:   0.72rem;
	color:       var(--cd-cat-desc-color);
	margin:      0.3rem 0 0;
	line-height: 1.4;
	font-style:  italic;
}

/* ── Bookmark list ───────────────────────────────────────────────── */
.cd-bookmark-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.cd-bookmark-item { border-radius: 5px; }
.cd-bookmark-item:hover { background: rgba(255,255,255,.05); }

.cd-bookmark-link {
	display:         flex;
	align-items:     flex-start;
	gap:             0.5rem;
	padding:         0.4rem 0.5rem;
	color:           var(--cd-text);
	text-decoration: none;
	transition:      color var(--cd-ease);
	border-radius:   5px;
}

.cd-bookmark-link:hover { color: var(--cd-link); }

/* Icons */
.cd-favicon,
.cd-icon--dot,
.cd-icon--dash {
	flex-shrink: 0;
	margin-top:  3px;
}

.cd-favicon {
	width:        16px;
	height:       16px;
	border-radius: 3px;
	object-fit:   contain;
}

.cd-icon--dot {
	display:       inline-block;
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    var(--cd-link);
}

.cd-icon--dash {
	display:     inline-block;
	color:       var(--cd-link);
	font-size:   0.9rem;
	line-height: 1;
}

/* Bookmark body — title + sub_text stacked */
.cd-bookmark-body {
	display:        flex;
	flex-direction: column;
	gap:            1px;
	min-width:      0;
	flex:           1;
}

.cd-bookmark-title {
	font-size:     0.9rem;
	font-family:   var(--cd-font);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	line-height:   1.35;
}

.cd-bookmark-subtext {
	font-size:     0.75rem;
	color:         var(--cd-subtext-color);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	font-style:    italic;
	line-height:   1.3;
	display:       none;
}

.cd-bookmark-item:hover .cd-bookmark-subtext { display: block; }
.cd-bookmark-item.cd-subtext-always .cd-bookmark-subtext { display: block; }

/* ── Internal search filter ──────────────────────────────────────── */
.cd-bookmark-item.cd-hidden { display: none; }
.cd-column.cd-column-empty  { opacity: 0.35; }

/* ── Phone number in standard bookmark ───────────────────────────── */
.cd-bookmark-phone {
	display:         block;
	font-size:       0.78rem;
	color:           var(--cd-link);
	text-decoration: none;
	margin-top:      2px;
	font-weight:     500;
}

.cd-bookmark-phone:hover { text-decoration: underline; }

.cd-bookmark-rec {
	display:    block;
	font-size:  0.72rem;
	color:      #f6c90e;
	margin-top: 2px;
	font-style: italic;
}

/* ── Directory / Phone Directory view ────────────────────────────── */
.cd-column--directory {
	/* Slightly wider padding for contact rows */
	padding: 0.85rem 0.85rem 1rem;
}

.cd-dir-icon {
	margin-right: 0.35rem;
	font-size:    0.85em;
}

.cd-directory-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        1px;
}

.cd-directory-item {
	padding:       0.55rem 0.5rem;
	border-radius: 6px;
	border-bottom: 1px solid rgba(255,255,255,.04);
	display:       flex;
	flex-direction: column;
	gap:           3px;
	transition:    background var(--cd-ease);
}

.cd-directory-item:last-child { border-bottom: none; }
.cd-directory-item:hover      { background: rgba(255,255,255,.05); }

.cd-directory-name {
	font-size:   0.9rem;
	font-weight: 600;
	color:       var(--cd-text);
	font-family: var(--cd-font);
}

.cd-directory-phone {
	font-size:       0.92rem;
	color:           var(--cd-link);
	text-decoration: none;
	font-weight:     600;
	letter-spacing:  0.01em;
}

.cd-directory-phone:hover { text-decoration: underline; }

.cd-directory-note {
	font-size:  0.75rem;
	color:      var(--cd-subtext-color);
	font-style: italic;
}

.cd-directory-rec {
	font-size:  0.72rem;
	color:      #f6c90e;
	font-style: italic;
}

.cd-directory-link {
	font-size:       0.72rem;
	color:           rgba(224,224,224,.4);
	text-decoration: none;
	margin-top:      1px;
}

.cd-directory-link:hover { color: var(--cd-text); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.cd-grid {
		grid-template-columns: repeat(min(var(--cd-columns), 3), minmax(0, 1fr));
		max-width: calc(min(var(--cd-columns), 3) * 240px);
	}
}

@media (max-width: 640px) {
	.cd-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
	.cd-column--multicol .cd-bookmark-list { column-count: 1; }
}

@media (max-width: 400px) {
	.cd-grid      { grid-template-columns: 1fr; max-width: 100%; }
	.cd-grid-wrap { padding: 1rem 0.75rem; }
	.cd-search-form { max-width: 100%; }
}