/**
 * Spacy Theme — Sidebar Customizer Styles
 *
 * Styles for the native "Customize Sidebar" system:
 * About Me card, native sidebar blocks, and responsive behaviour.
 *
 * Design tokens are inherited from the main stylesheet's :root variables:
 *   --color-primary   (#8E2E2E)
 *   --color-body-text (#2b2b2b)
 *
 * @package My-Spacy-Theme
 */

/* ==========================================================
 * 1. ABOUT ME CARD
 * ========================================================== */

.spacy-about-card {
	margin-bottom: 30px;
	padding: 32px 22px 30px;
	background: #ffffff;
	border: 1px solid #efefef;
	border-radius: 12px;
	box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.06 );
	text-align: center;
}

/* Title inherits base widget-title style; we only centre it */
.spacy-about-card .widget-title {
	text-align: center;
	margin-bottom: 20px;
}

/* ── Photo — square 1:1 container ────────────────────────── */

.spacy-about-photo-link {
	display:       block;
	/* width, height, and margin-bottom are set by inline CSS from the
	   Customizer size option — do not hardcode them here. */
	margin-left:   auto;
	margin-right:  auto;
	border-radius: 8px;
	border:        2px solid var( --color-primary, #8e2e2e );
	overflow:      hidden;       /* clips zoom inside rounded corners */
	outline-offset: 4px;
	box-shadow:    0 4px 18px rgba( 0, 0, 0, 0.11 );
	transition:    box-shadow 0.30s ease;
}

.spacy-about-photo-link:focus-visible {
	outline: 2px solid var( --color-primary, #8e2e2e );
}

.spacy-about-photo {
	display:          block;
	width:            100%;
	height:           100%;
	object-fit:       cover;
	object-position:  center top; /* favour the face when cropping portrait shots */
	border-radius:    6px;        /* slightly inset from the 8px container */
	transition:       transform 0.30s ease;
}

.spacy-about-photo-link:hover .spacy-about-photo,
.spacy-about-photo-link:focus .spacy-about-photo {
	transform: scale( 1.05 );
}

.spacy-about-photo-link:hover,
.spacy-about-photo-link:focus {
	box-shadow: 0 8px 26px rgba( 142, 46, 46, 0.22 );
}

/* ── Profile Image Shape modifiers ───────────────────────────
 *
 * Applied as a second class on .spacy-about-photo-link.
 * Each modifier overrides border-radius on both the wrapper
 * (which clips the image via overflow:hidden) and the <img>
 * itself (which prevents a faint un-clipped corner artefact
 * on some WebKit versions).
 *
 * The base .spacy-about-photo-link already owns overflow:hidden
 * and the hover/zoom transitions, so modifiers only need to set
 * the radius — nothing else needs repeating.
 * ──────────────────────────────────────────────────────────── */

/* Soft Rounded — default; 8px on wrapper, 6px on image */
.spacy-about-photo-link.spacy-about-image-soft {
	border-radius: 8px !important;
}

.spacy-about-photo-link.spacy-about-image-soft .spacy-about-photo {
	border-radius: 6px !important;
}

/* Circle — fully round */
.spacy-about-photo-link.spacy-about-image-circle {
	border-radius: 50% !important;
}

.spacy-about-photo-link.spacy-about-image-circle .spacy-about-photo {
	border-radius: 50% !important;
}

/* Square — sharp corners */
.spacy-about-photo-link.spacy-about-image-square {
	border-radius: 0px !important;
}

.spacy-about-photo-link.spacy-about-image-square .spacy-about-photo {
	border-radius: 0px !important;
}

/* ── Bio text ─────────────────────────────────────────────── */

.spacy-about-bio {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.75;
	color: #666;
	font-style: italic;
}

/* ── CTA button ───────────────────────────────────────────── */

.spacy-about-btn {
	display: inline-block;
	padding: 10px 26px;
	background: var( --color-primary, #8e2e2e );
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 50px; /* pill shape */
	border: 2px solid transparent;
	box-shadow: 0 3px 10px rgba( 142, 46, 46, 0.22 );
	transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
	cursor: pointer;
}

.spacy-about-btn:hover,
.spacy-about-btn:focus {
	background: #6a1e1e;
	box-shadow: 0 6px 18px rgba( 142, 46, 46, 0.35 );
	transform: translateY( -2px );
	color: #ffffff;
	text-decoration: none;
	outline: none;
}

.spacy-about-btn:focus-visible {
	outline: 2px solid var( --color-primary, #8e2e2e );
	outline-offset: 3px;
}

/* ==========================================================
 * 2. NATIVE SIDEBAR BLOCKS
 *    (Search, Recent Posts, Recent Comments, Archives, Categories)
 *
 *    These wrap in .widget-area .widget — they inherit all base
 *    widget styles from style.css automatically. Only block-
 *    specific overrides are added here.
 * ========================================================== */

/* Search form — matches existing sidebar-newsletter-form pattern */
.spacy-sidebar-search .search-form {
	display: flex;
	gap: 6px;
}

.spacy-sidebar-search .search-field {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	color: var( --color-body-text, #2b2b2b );
	background: #fff;
	transition: border-color 0.18s ease;
}

.spacy-sidebar-search .search-field:focus {
	border-color: var( --color-primary, #8e2e2e );
	outline: none;
	box-shadow: 0 0 0 2px rgba( 142, 46, 46, 0.12 );
}

.spacy-sidebar-search .search-submit {
	padding: 9px 14px;
	background: var( --color-primary, #8e2e2e );
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease;
}

.spacy-sidebar-search .search-submit:hover,
.spacy-sidebar-search .search-submit:focus {
	background: #6a1e1e;
	outline: none;
}

/* ── Shared list styles (Recent Comments, Archives, Categories)
      Recent Posts has its own layout rules below.            */

.spacy-sidebar-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spacy-sidebar-block ul li {
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	line-height: 1.4;
}

.spacy-sidebar-block ul li:last-child {
	border-bottom: none;
}

.spacy-sidebar-block ul li a {
	color: var( --color-body-text, #2b2b2b );
	text-decoration: none;
	display: block;
	transition: color 0.18s ease;
}

.spacy-sidebar-block ul li a:hover,
.spacy-sidebar-block ul li a:focus {
	color: var( --color-primary, #8e2e2e );
}

/* ── Recent Posts — thumbnail LEFT, title RIGHT ───────────────
 *
 * All selectors are prefixed with #secondary (the sidebar's <aside> ID)
 * to achieve specificity 1-1-0 or 1-2-0. This beats every rule in
 * style.css — including the global img { border-radius: 20px; height: auto }
 * at line 637 and the .widget-area rules — without needing !important on
 * layout-critical flex properties.
 *
 * The thumbnail wrapper uses display:flex (not block) so it:
 *   a) participates cleanly in the parent row as a flex item
 *   b) centres its <img> child without relying on line-height hacks
 *   c) avoids the browser ambiguity around "display:block flex-item width"
 *      that caused the thumbnail to consume the full row width
 * ──────────────────────────────────────────────────────────── */

#secondary .spacy-sidebar-recent-posts .spacy-recent-posts-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

/* FLEX ROW — each post item is one horizontal line */
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-item {
	display:        flex;
	flex-direction: row;
	flex-wrap:      nowrap;
	align-items:    center;
	gap:            12px;
	padding:        10px 0;
	border-bottom:  1px solid #f0f0f0;
	/* Reset any inherited block or float interference */
	float:  none;
	clear:  none;
	width:  auto;
}

#secondary .spacy-sidebar-recent-posts .spacy-recent-post-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* ── Thumbnail wrapper ───────────────────────────────────────
 *
 * display:flex (not block) ensures:
 *   - the element participates in the parent flex row as intended
 *   - no implicit 100% block width that fights flex-basis
 *   - overflow:hidden correctly clips the zoomed image on hover
 * flex: 0 0 55px locks the column to exactly 55 px using flex-basis
 * (flex layout reads flex-basis before width; specifying both ensures
 * maximum cross-browser compatibility).
 * ──────────────────────────────────────────────────────────── */
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-link {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex:            0 0 55px;   /* grow:0 shrink:0 basis:55px */
	width:           55px;
	height:          55px;
	min-width:       55px;
	min-height:      55px;
	border-radius:   6px;
	overflow:        hidden;
	text-decoration: none;
	line-height:     0;
	box-shadow:      0 2px 8px rgba( 0, 0, 0, 0.10 );
	transition:      box-shadow 0.24s ease, transform 0.24s ease;
}

#secondary .spacy-sidebar-recent-posts .spacy-recent-post-link:hover,
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-link:focus {
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
}

#secondary .spacy-sidebar-recent-posts .spacy-recent-post-link:focus-visible {
	outline:        2px solid var( --color-primary, #8e2e2e );
	outline-offset: 3px;
}

/* ── Thumbnail image ─────────────────────────────────────────
 *
 * All four dimension props are set explicitly to defeat the
 * sitewide  img { max-width:100%; height:auto; border-radius:20px }
 * rule in style.css without needing !important.
 * With #secondary in the selector our specificity (1-2-0) beats the
 * element-only rule (0-0-1) unconditionally.
 * ──────────────────────────────────────────────────────────── */
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-thumb {
	display:         block;
	width:           55px;
	height:          55px;
	min-width:       55px;
	min-height:      55px;
	max-width:       55px;
	max-height:      55px;
	object-fit:      cover;
	object-position: center;
	border-radius:   6px;   /* overrides global img { border-radius: 20px } */
	transition:      transform 0.24s ease;
}

#secondary .spacy-sidebar-recent-posts .spacy-recent-post-link:hover .spacy-recent-post-thumb,
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-link:focus .spacy-recent-post-thumb {
	transform: scale( 1.08 );
}

/* Placeholder — posts with no featured image */
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-thumb--placeholder {
	background:    #f0ebe8;
	border:        2px dashed #ddd;
	border-radius: 6px;
	box-shadow:    none;
}

/* ── Post title ──────────────────────────────────────────────
 *
 * flex: 1 1 0 — expands to fill remaining row width; starts
 * from 0 basis so long titles wrap neatly without pushing the
 * thumbnail off the left edge.
 * align-self: center — vertically centres multi-line titles
 * with the midpoint of the thumbnail.
 * ──────────────────────────────────────────────────────────── */
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-title {
	flex:            1 1 0;
	min-width:       0;          /* allow text to wrap inside the flex item */
	align-self:      center;
	font-size:       13.5px;
	font-weight:     600;
	line-height:     1.45;
	color:           var( --color-body-text, #2b2b2b );
	text-decoration: none;
	transition:      color 0.20s ease;
	/* Reset any inherited block width that could push to next line */
	display: block;
	float:   none;
	width:   auto;
}

#secondary .spacy-sidebar-recent-posts .spacy-recent-post-title:hover,
#secondary .spacy-sidebar-recent-posts .spacy-recent-post-title:focus {
	color:           var( --color-primary, #8e2e2e );
	text-decoration: none;
}

/* Comment author + excerpt */
.spacy-sidebar-block .comment-author-name {
	font-weight: 600;
}

.spacy-sidebar-block .comment-excerpt {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Post count badge (Archives, Categories) */
.spacy-sidebar-block .item-count {
	float: right;
	font-size: 12px;
	color: #aaa;
	font-weight: 400;
}

/* ==========================================================
 * 3. RESPONSIVE
 * ========================================================== */

@media ( max-width: 768px ) {
	.spacy-about-card {
		padding: 24px 16px 22px;
	}

	/* Photo width/height on mobile is handled by the inline CSS @media block
	   generated in spacy_customizer_inline_css() — no static override here. */

	.spacy-about-btn {
		padding:   9px 22px;
		font-size: 12px;
	}

	/* Recent Posts — keep flex row intact on mobile; slightly tighter gap */
	#secondary .spacy-sidebar-recent-posts .spacy-recent-post-item {
		gap: 10px;
	}
}