/*
Theme Name: Kadence Child - JC Lalnunsanga
Template: kadence
Version: 1.0
Description: Elegant navy & gold child theme for the JC Lalnunsanga law firm site. Built on the same reusable pattern as kadence-child-babfo.
Author: FP
*/

/**
 * Structural tweaks.
 *
 * Shared brand colour tokens (light + dark mode) live in theme-colors.css -
 * keep that split, or this file and that one start fighting each other.
 */

:root {
	--jcl-radius: 3px;
	--jcl-radius-sm: 2px;
}

/* Typography - Playfair Display for headings, Work Sans for body. Fonts are enqueued in functions.php. */
body,
p,
li,
a,
input,
textarea,
button {
	font-family: 'Work Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
}

/* Post cards and the single-post / page content surface. */
.entry.loop-entry,
.entry.single-entry {
	border-radius: var( --jcl-radius );
	overflow: hidden;
}

/* Code, preformatted and pullquote panels. */
.wp-block-code,
.wp-block-preformatted,
.wp-block-pullquote {
	border-radius: var( --jcl-radius );
}

/* Group blocks only when they actually paint a background. */
.wp-block-group.has-background {
	border-radius: var( --jcl-radius );
}

/* Search field and button. */
.wp-block-search__input,
.wp-block-search__button,
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-radius: var( --jcl-radius-sm );
}

/*
 * Tables.
 * A table cannot round its corners while `border-collapse: collapse` is
 * set, so switch to `separate` and rebuild the cell borders as right +
 * bottom only. Without the rebuild, separate borders double up into 2px
 * internal lines.
 */
.wp-block-table > table,
.wp-block-calendar table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var( --jcl-radius );
	overflow: hidden;
}

.wp-block-table > table :is( td, th ),
.wp-block-calendar table :is( td, th ) {
	border-width: 0 1px 1px 0;
}

.wp-block-table > table :is( td, th ):last-child,
.wp-block-calendar table :is( td, th ):last-child {
	border-right-width: 0;
}

.wp-block-table > table tr:last-child :is( td, th ),
.wp-block-calendar table tr:last-child :is( td, th ) {
	border-bottom-width: 0;
}

/*
 * Utility classes - apply these via a block's "Additional CSS class(es)"
 * field in the editor (Advanced panel). They keep the brand's gold accent
 * and card styling reachable from ordinary core blocks.
 */

/* Solid gold button, navy text - use on a Buttons > Button block for CTAs. */
.wp-block-button__link.jcl-btn-gold {
	background-color: #d4af6a !important;
	color: #16223b !important;
	border-radius: var( --jcl-radius ) !important;
}
.wp-block-button__link.jcl-btn-gold:hover,
.wp-block-button__link.jcl-btn-gold:focus {
	background-color: #b8925a !important;
}

/* White card with a hairline border - use on a Group block wrapping a practice-area or ruling card. */
.jcl-card {
	background: var( --card-bg, #ffffff );
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: var( --jcl-radius );
	padding: 28px;
}

/* Small caps gold label - use on a Paragraph block above a section heading. */
.jcl-eyebrow {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #b8925a;
	font-weight: 600;
}

/*
 * Court verdict / document attachments - the core File block. All colours
 * below read the theme-colors.css tokens, so this already follows dark
 * mode without a separate override.
 */
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: var( --card-bg, #ffffff );
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: var( --jcl-radius );
	padding: 16px 20px;
	margin: 24px 0;
}
.wp-block-file a:first-child {
	font-weight: 600;
	color: var( --heading-color, #16223b );
}
.wp-block-file .wp-block-file__button {
	margin-left: auto !important;
	background-color: #16223b !important;
	color: #faf8f4 !important;
	border-radius: var( --jcl-radius-sm ) !important;
	padding: 8px 18px !important;
	font-size: 13px;
	text-decoration: none !important;
}
.wp-block-file .wp-block-file__button:hover {
	background-color: #1f3157 !important;
}

/* Audio attachments - the core Audio block. */
.wp-block-audio {
	background: var( --card-bg, #ffffff );
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: var( --jcl-radius );
	padding: 20px;
	margin: 24px 0;
}
.wp-block-audio audio {
	width: 100%;
}

/* Facebook / WhatsApp share row, printed after single-post content. */
.jcl-share {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 40px 0 8px;
	padding-top: 24px;
	border-top: 1px solid var( --border-color, #e2ddd3 );
}
.jcl-share__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --muted-color, #6b7280 );
	text-transform: uppercase;
	letter-spacing: 1.5px;
}
.jcl-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #ffffff;
}
.jcl-share__btn--facebook {
	background: #1877f2;
}
.jcl-share__btn--facebook:hover {
	background: #145dbf;
}
.jcl-share__btn--whatsapp {
	background: #25d366;
}
.jcl-share__btn--whatsapp:hover {
	background: #1da851;
}

/*
 * Homepage "Recent Court Rulings" - a live Query Loop block (see
 * homepage-sample.html), not hand-typed cards. Styling each generated
 * post item to match .jcl-card so it keeps the same look automatically.
 */
.jcl-rulings-query .wp-block-post {
	background: var( --card-bg, #ffffff );
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: var( --jcl-radius );
	overflow: hidden; /* clips the featured image to the card's rounded corners */
	padding: 0;
}
/* Featured image sits flush against the card edges; everything below it gets padding instead. */
.jcl-rulings-query .wp-block-post-featured-image {
	margin: 0 0 20px;
}
.jcl-rulings-query .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.jcl-rulings-query .wp-block-post-terms,
.jcl-rulings-query .wp-block-post-title,
.jcl-rulings-query .wp-block-post-excerpt,
.jcl-rulings-query .wp-block-post-date {
	margin-left: 24px;
	margin-right: 24px;
}
.jcl-rulings-query .wp-block-post-terms {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #b8925a;
	letter-spacing: 1px;
}
.jcl-rulings-query .wp-block-post-title {
	margin-top: 8px;
}
.jcl-rulings-query .wp-block-post-title a {
	color: var( --heading-color, #16223b );
	text-decoration: none;
}
.jcl-rulings-query .wp-block-post-date {
	display: block;
	margin-top: 12px;
	margin-bottom: 24px;
	font-size: 12.5px;
	color: var( --muted-color, #6b7280 );
}

/*
 * Blog filter bar (see jcl_child_blog_filter_bar in functions.php) -
 * search box + category pills, printed above the post list on the Blog
 * page, category archives, and search results.
 *
 * Kadence's blog/archive layout can lay posts out either as a CSS Grid or
 * as a CSS multi-column ("masonry") flow depending on the layout chosen in
 * Customize > Posts/Pages Layout > Archive Layout - without help, our
 * short filter bar was being treated as one grid/column cell next to the
 * (much taller) post card, splitting the page into two side-by-side
 * columns instead of sitting above it as a single bar. `grid-column: 1/-1`
 * covers the Grid case and `column-span: all` covers the multi-column
 * case; whichever one actually applies takes effect, the other is
 * harmlessly ignored, so this is safe either way.
 *
 * `.jcl-blog-filter` itself stays a plain block (not a flex container) so
 * that placement is reliable; the actual search+pills row lives on the
 * `__bar` child instead.
 */
.jcl-blog-filter {
	display: block;
	grid-column: 1 / -1;
	column-span: all;
	-webkit-column-span: all;
	width: 100%;
	margin: 0 0 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var( --border-color, #e2ddd3 );
}
/* A single compact row: search first, then pills - wraps onto more lines on narrow screens instead of stretching tall. */
.jcl-blog-filter__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}
.jcl-blog-filter__search {
	display: flex;
	align-items: center;
	flex: 0 1 280px;
	min-width: 180px;
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: 50px;
	overflow: hidden;
	background: var( --card-bg, #ffffff );
}
.jcl-blog-filter__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 9px 14px;
	color: var( --text-color, #262a33 );
	font-family: 'Work Sans', sans-serif;
}
.jcl-blog-filter__search input[type="search"]:focus {
	outline: none;
}
.jcl-blog-filter__search button {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: none;
	background: #16223b;
	color: #faf8f4;
	font-size: 14px;
	cursor: pointer;
}
.jcl-blog-filter__search button:hover {
	background: #1f3157;
}
.jcl-blog-filter__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
}
.jcl-blog-filter__pill {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 50px;
	background: var( --card-bg, #ffffff );
	border: 1px solid var( --border-color, #e2ddd3 );
	color: var( --text-color, #262a33 );
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	white-space: nowrap;
}
.jcl-blog-filter__pill--sub {
	font-weight: 500;
	opacity: 0.85;
}
.jcl-blog-filter__pill:hover,
.jcl-blog-filter__pill.is-active {
	background: #16223b;
	border-color: #16223b;
	color: #faf8f4;
}

/* Post entries in the blog/archive/search grid - keep each card intact instead of splitting across a masonry-style flow. */
.blog #primary .entry.loop-entry,
.archive #primary .entry.loop-entry,
.search #primary .entry.loop-entry {
	break-inside: avoid;
}

@media ( max-width: 480px ) {
	.jcl-blog-filter__search {
		flex-basis: 100%;
	}
}

/* Comments. */
.comments-area {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var( --border-color, #e2ddd3 );
}
.comments-area .comments-title,
.comments-area .comment-reply-title {
	font-family: 'Playfair Display', serif;
}
.comment-list .comment-body {
	background: var( --card-bg, #ffffff );
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: var( --jcl-radius );
	padding: 20px;
	margin-bottom: 16px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	background: var( --card-bg, #ffffff );
	color: var( --text-color, #262a33 );
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: var( --jcl-radius-sm );
}
.comment-form .form-submit input[type="submit"] {
	background-color: #16223b;
	color: #faf8f4;
	border-radius: var( --jcl-radius-sm );
	border: none;
	padding: 10px 24px;
	cursor: pointer;
}
.comment-form .form-submit input[type="submit"]:hover {
	background-color: #1f3157;
}

/*
 * BCI disclaimer gate (see functions.php + bci-disclaimer.js). Hidden by
 * default via the [hidden] attribute in the markup; the script removes it
 * on first visit only.
 */
.jcl-no-scroll {
	overflow: hidden;
}
.jcl-bci-disclaimer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 15, 23, 43, 0.92 );
}
.jcl-bci-disclaimer__card {
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: var( --card-bg, #ffffff );
	color: var( --text-color, #262a33 );
	border-radius: var( --jcl-radius );
	padding: 36px;
}
.jcl-bci-disclaimer__lang {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}
.jcl-bci-disclaimer__lang button {
	padding: 6px 14px;
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: 50px;
	background: transparent;
	color: var( --muted-color, #6b7280 );
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	font-family: 'Work Sans', sans-serif;
}
.jcl-bci-disclaimer__lang button.is-active {
	background: #16223b;
	color: #faf8f4;
	border-color: #16223b;
}
.jcl-bci-disclaimer__card h2 {
	margin-top: 4px;
}
.jcl-bci-disclaimer__card ul {
	padding-left: 20px;
}
.jcl-bci-disclaimer__card li {
	margin-bottom: 10px;
}
.jcl-bci-disclaimer__actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

/* Contact form - the [jcl_contact_form] shortcode in functions.php. */
.jcl-contact-form p {
	margin-bottom: 18px;
}
.jcl-contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var( --heading-color, #16223b );
}
.jcl-contact-form input[type="text"],
.jcl-contact-form input[type="email"],
.jcl-contact-form input[type="tel"],
.jcl-contact-form textarea {
	width: 100%;
	background: var( --card-bg, #ffffff );
	color: var( --text-color, #262a33 );
	border: 1px solid var( --border-color, #e2ddd3 );
	border-radius: var( --jcl-radius-sm );
	padding: 10px 14px;
	font-family: 'Work Sans', sans-serif;
}
.jcl-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.jcl-form-notice {
	padding: 14px 18px;
	border-radius: var( --jcl-radius-sm );
	margin-bottom: 24px;
	font-weight: 600;
}
.jcl-form-notice--success {
	background: #e7f5ea;
	color: #1e6b34;
	border: 1px solid #b7dfc2;
}
.jcl-form-notice--error {
	background: #fbeaea;
	color: #a3312c;
	border: 1px solid #f0c4c2;
}