/**
 * WPMR Custom Post Types - front-end styles.
 *
 * @package WPMR_CPT
 * @version 3.0.0
 */

/* -------------------------------------------------------------------------- */
/* Breadcrumbs                                                                */
/* -------------------------------------------------------------------------- */
.breadcrumb-trail {
	display: block;
	width: 100%;
	margin-bottom: 30px;
	padding-bottom: 15px;
	font-size: 14px;
	color: #666;
	clear: both;
}

.breadcrumb-trail .breadcrumb-title {
	font-weight: 600;
	margin-right: 6px;
}

.breadcrumb-trail .sep {
	margin: 0 5px;
	color: #999;
}

.breadcrumb-trail a {
	color: #0073aa;
	text-decoration: none;
}

.breadcrumb-trail a:hover {
	text-decoration: underline;
}

.breadcrumb-trail .trail-end {
	font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* Help Center docs menu ([wpmr_docs_menu])                                   */
/* -------------------------------------------------------------------------- */
.menu-help-center_item {
	font-size: 17px;
}

#menu-help-center {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li.menu-help-center-item {
	padding: 8px;
	margin-bottom: 2px;
	border-radius: 4px;
}

li.menu-help-center-item a:hover {
	text-decoration: underline !important;
}

.wpmr-docs-back-to-parent {
	margin-top: 10px;
	font-style: italic;
}

/* -------------------------------------------------------------------------- */
/* Related items (Auto Category Menu widget + [wpmr_related])                 */
/* -------------------------------------------------------------------------- */
.wpmr-category-posts-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpmr-category-posts-menu .wpmr-cat-item {
	margin-bottom: 4px;
}

.wpmr-related-title {
	margin-bottom: 8px;
}

/* -------------------------------------------------------------------------- */
/* Article count ([article_count])                                           */
/* -------------------------------------------------------------------------- */
.wpmr-article-count {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Channel sections
 *
 * Elementor cannot loop ACF repeater rows, so the card grids are rendered by
 * the plugin. Values below mirror the Google Shopping design page exactly:
 * 24px padding, 12px radius, 1px #E4E6F0 border, 0 8px 30px shadow, 22px gap.
 * Change a token, the whole channel page follows.
 * ---------------------------------------------------------------------- */
:root {
	--wpmr-navy:        #16233D;
	--wpmr-navy-soft:   #1E2C4A;
	--wpmr-accent:      #E2662B;
	--wpmr-ink:         #16233D;
	--wpmr-muted:       #5A6785;
	--wpmr-muted-light: #C3CBDD;
	--wpmr-surface:     #FFFFFF;
	--wpmr-border:      #E4E6F0;
	--wpmr-radius:      12px;
	--wpmr-gap:         22px;
	--wpmr-shadow:      0 8px 30px rgba(22, 35, 61, .07);
}

.wpmr-cards,
.wpmr-steps,
.wpmr-others {
	display: grid;
	gap: var(--wpmr-gap);
	grid-template-columns: repeat(var(--wpmr-cols, 4), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.wpmr-grid--1 { --wpmr-cols: 1; }
.wpmr-grid--2 { --wpmr-cols: 2; }
.wpmr-grid--3 { --wpmr-cols: 3; }
.wpmr-grid--4 { --wpmr-cols: 4; }
.wpmr-grid--5 { --wpmr-cols: 5; }
.wpmr-grid--6 { --wpmr-cols: 6; }

@media (max-width: 1024px) {
	.wpmr-cards, .wpmr-steps, .wpmr-others { --wpmr-cols: 2 !important; }
}
@media (max-width: 640px) {
	.wpmr-cards, .wpmr-steps, .wpmr-others { --wpmr-cols: 1 !important; }
}

.wpmr-card {
	background: var(--wpmr-surface);
	border: 1px solid var(--wpmr-border);
	border-radius: var(--wpmr-radius);
	box-shadow: var(--wpmr-shadow);
	padding: 24px;
	text-align: left;
}
.wpmr-step {
	padding: 0;
	text-align: left;
}
@media (max-width: 640px) {
	.wpmr-card { padding: 16px; }
}

/* Steps render as a plain vertical list, never a card grid. */
.wpmr-steps {
	grid-template-columns: 1fr;
}

/* Benefits: 2 columns, no icon, but every row shows (some channels have 3,
 * some have 6). Scoped to the benefits shortcode widget's Elementor element
 * id directly (elementor-element-c6b3ead): the container "classes" setting
 * in the Single Channel template does not actually render a class, so
 * section-level wpmr-sec-* selectors do not exist in the DOM. Confirmed
 * against the live rendered markup on the Google Shopping channel page. */
.elementor-element-c6b3ead .wpmr-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.elementor-element-c6b3ead .wpmr-card__icon {
	display: none;
}
@media (max-width: 640px) {
	.elementor-element-c6b3ead .wpmr-cards {
		grid-template-columns: 1fr !important;
	}
}

.wpmr-card__icon {
	display: block;
	color: var(--wpmr-accent);
	font-size: 26px;
	line-height: 1;
	margin-bottom: 14px;
}
.wpmr-card__title,
.wpmr-step__title {
	color: var(--wpmr-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}
.wpmr-card__body,
.wpmr-step__body {
	color: var(--wpmr-muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}
.wpmr-step__title { grid-area: title; }
.wpmr-step__body { grid-area: body; }

/* Number circle sits to the left of the title/body text. Grid areas let the
 * circle span both text rows and stay vertically centered, without needing
 * a markup change in the plugin's PHP renderer. */
.wpmr-step {
	counter-increment: none;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"num title"
		"num body";
	column-gap: 20px;
	align-items: start;
}
.wpmr-step__num {
	grid-area: num;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wpmr-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0;
}
.wpmr-step__link {
	grid-column: 1 / -1;
	color: var(--wpmr-accent);
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	margin-top: 10px;
}
@media (max-width: 480px) {
	.wpmr-step {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"num title"
			". body";
		column-gap: 14px;
		row-gap: 4px;
	}
}

/* Feed specification table. The PHP renderer only outputs an attribute name
 * (<code>) and puts the description in a hidden title="" tooltip, since the
 * ACF schema has no separate "requirement level" field and I can't edit the
 * render file directly. Rebuilt entirely with CSS, styled as one continuous
 * table (header + hairline row dividers) instead of separate cards:
 *  - the description is pulled out of the hidden title="" via content:attr()
 *  - the header row is a plain-HTML widget inserted directly above this
 *    shortcode in the shared template, matching these grid columns
 *  - the "Required"/"Conditional" badge has no per-channel ACF data behind
 *    it (same PHP limit), so it's set per channel below via nth-child
 *    ranges that match the row order each channel's attributes are written
 *    in (required rows first, conditional after). A channel with no rule
 *    below simply shows no badge rather than a guessed label. */
/* The column holding this header + the pills table below it uses Elementor's
 * flex gap (28px) between widgets. Pull the header down into that gap so it
 * reads as one fused table instead of two separate boxes with a visible
 * space between them. */
.elementor-element-wpmrfshdr1 {
	margin-bottom: -28px !important;
}
.wpmr-pills-header {
	display: grid !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	grid-template-columns: 190px auto 1fr;
	column-gap: 20px;
	align-items: center;
	background: #F2F3F8;
	border: 1px solid var(--wpmr-border);
	border-bottom: none;
	border-radius: var(--wpmr-radius) var(--wpmr-radius) 0 0;
	padding: 13px 20px;
}
.elementor-element-wpmrfshdr1,
.elementor-element-wpmrfshdr1 .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
}
.wpmr-pills-header span {
	color: var(--wpmr-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
}
@media (max-width: 900px) {
	.wpmr-pills-header span:nth-child(3) { display: none; }
}

.wpmr-pills {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background: var(--wpmr-surface);
	border: 1px solid var(--wpmr-border);
	border-radius: 0 0 var(--wpmr-radius) var(--wpmr-radius);
	overflow: hidden;
}
.wpmr-pill {
	display: grid;
	grid-template-columns: 190px auto 1fr;
	grid-template-areas: "attr badge desc";
	align-items: center;
	column-gap: 20px;
	margin: 0;
	list-style: none;
	text-align: left;
	padding: 16px 20px;
	border-bottom: 1px solid var(--wpmr-border);
}
.wpmr-pill:last-child {
	border-bottom: none;
}
.wpmr-pill code {
	grid-area: attr;
	background: none;
	padding: 0;
	color: var(--wpmr-ink);
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 14px;
	font-weight: 700;
}
.wpmr-pill::before {
	grid-area: badge;
	justify-self: start;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.wpmr-pill::after {
	content: attr(title);
	grid-area: desc;
	color: var(--wpmr-muted);
	font-size: 14px;
	line-height: 1.6;
}
@media (max-width: 900px) {
	.wpmr-pill {
		grid-template-columns: 1fr;
		grid-template-areas:
			"attr badge"
			"desc desc";
		row-gap: 8px;
	}
}

/* Requirement levels are now real per-row ACF data (wpmr_feed_attributes.level),
 * output by the renderer as wpmr-pill--{level}. Global rules, works for every
 * channel automatically, no more per-post nth-child guessing. */
.wpmr-pill--required::before {
	content: "Required";
	background: #FDF0E7;
	color: var(--wpmr-accent);
}
.wpmr-pill--conditional::before {
	content: "Conditional";
	background: #EDEFF5;
	color: var(--wpmr-muted);
}
.wpmr-pill--optional::before {
	content: "Optional";
	background: #EDEFF5;
	color: var(--wpmr-muted);
}

.wpmr-docs { list-style: none; margin: 0; padding: 0; width: 100%; }
.wpmr-docs__item { border-bottom: 1px solid var(--wpmr-border); }
.wpmr-docs__item:last-child { border-bottom: 0; }
.wpmr-docs__item a {
	display: block;
	padding: 13px 0;
	color: var(--wpmr-ink);
	font-weight: 600;
	text-decoration: none;
}
.wpmr-docs__item a:hover { color: var(--wpmr-accent); }

.wpmr-others__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--wpmr-surface);
	border: 1px solid var(--wpmr-border);
	border-radius: var(--wpmr-radius);
	box-shadow: var(--wpmr-shadow);
	padding: 20px 14px;
	color: var(--wpmr-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
	transition: border-color .2s, color .2s;
}
.wpmr-others__item:hover { border-color: var(--wpmr-accent); color: var(--wpmr-accent); }
.wpmr-others__logo { width: 24px; height: 24px; object-fit: contain; }

/* Collapse the whole band when a section has no content at all.
 * Body classes come from WPMR_CPT_Channel_Render::body_class(). */
.wpmr-no-about        .wpmr-sec-about,
.wpmr-no-benefits     .wpmr-sec-benefits,
.wpmr-no-feed-spec    .wpmr-sec-feed-spec,
.wpmr-no-submit       .wpmr-sec-submit,
.wpmr-no-optimization .wpmr-sec-optimization,
.wpmr-no-cta          .wpmr-sec-cta,
.wpmr-no-docs         .wpmr-sec-docs { display: none !important; }

/* -------------------------------------------------------------------------
 * Channels overview grid (/shopping-channels/)
 * ---------------------------------------------------------------------- */
.wpmr-chgroup { width: 100%; margin: 0 0 40px; }
.wpmr-chgroup:last-child { margin-bottom: 0; }
.wpmr-chgroup__title {
	color: var(--wpmr-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin: 0 0 18px;
	text-align: left;
}
.wpmr-chgrid {
	display: grid;
	gap: var(--wpmr-gap);
	grid-template-columns: repeat(var(--wpmr-cols, 4), minmax(0, 1fr));
	width: 100%;
}
@media (max-width: 1024px) { .wpmr-chgrid { --wpmr-cols: 3 !important; } }
@media (max-width: 760px)  { .wpmr-chgrid { --wpmr-cols: 2 !important; } }
@media (max-width: 460px)  { .wpmr-chgrid { --wpmr-cols: 1 !important; } }

.wpmr-chcard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	background: var(--wpmr-surface);
	border: 1px solid var(--wpmr-border);
	border-radius: var(--wpmr-radius);
	box-shadow: var(--wpmr-shadow);
	padding: 20px;
	text-decoration: none;
	transition: border-color .2s, transform .2s;
}
.wpmr-chcard:hover { border-color: var(--wpmr-accent); transform: translateY(-2px); }
.wpmr-chcard__logo img { width: 32px; height: 32px; object-fit: contain; margin-bottom: 4px; }
.wpmr-chcard__name { color: var(--wpmr-ink); font-size: 16px; font-weight: 700; line-height: 1.3; }
.wpmr-chcard__meta { color: var(--wpmr-muted); font-size: 13px; line-height: 1.4; }
.wpmr-chcard__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	padding: 3px 8px;
	border-radius: 999px;
}
.wpmr-chcard__badge--beta    { background: #FDF0E7; color: var(--wpmr-accent); }
.wpmr-chcard__badge--planned { background: var(--wpmr-border); color: var(--wpmr-muted); }


/* Extra channel-specific sections (e.g. Google Shopping supplemental feeds). */
.wpmr-extra {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 28px;
}
.wpmr-extra__block {
	background: var(--wpmr-surface);
	border: 1px solid var(--wpmr-border);
	border-radius: var(--wpmr-radius);
	padding: 24px;
}
.wpmr-extra__heading {
	color: var(--wpmr-ink);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
}
.wpmr-extra__intro {
	color: var(--wpmr-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
}
.wpmr-extra__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}
.wpmr-extra__item {
	position: relative;
	padding-left: 28px;
	color: var(--wpmr-ink);
	font-size: 14px;
	line-height: 1.4;
}
.wpmr-extra__item::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wpmr-accent);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	font-weight: 700;
}
@media (max-width: 640px) {
	.wpmr-extra__list { grid-template-columns: 1fr; }
}

/* The pills-table widget (a0c3cb4) is a flex child with no explicit width, so
 * browsers size it intrinsically off the longest attribute/description text
 * in each channel's own data. Channels with shorter copy shrink and center
 * instead of stretching, same fix pattern already used for the header widget. */
.elementor-element-a0c3cb4,
.elementor-element-a0c3cb4 .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
}
/* -------------------------------------------------------------------------
 * Knowledge Base overview (/knowledge-base/)
 * ---------------------------------------------------------------------- */
.wpmr-kb-stats {
	color: var(--wpmr-muted-light);
	font-size: 14px;
}

.wpmr-kb-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wpmr-gap);
	width: 100%;
}
@media (max-width: 1024px) { .wpmr-kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .wpmr-kb-grid { grid-template-columns: 1fr; } }

.wpmr-kb-card {
	display: flex;
	flex-direction: column;
	background: var(--wpmr-surface);
	border: 1px solid var(--wpmr-border);
	border-radius: var(--wpmr-radius);
	box-shadow: var(--wpmr-shadow);
	padding: 24px;
}
.wpmr-kb-card__title {
	color: var(--wpmr-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}
.wpmr-kb-card__desc {
	color: var(--wpmr-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
	flex-grow: 1;
}
.wpmr-kb-card__count {
	display: block;
	padding-top: 14px;
	border-top: 1px solid var(--wpmr-border);
	color: var(--wpmr-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.wpmr-kb-card__count:hover { text-decoration: underline; }

.wpmr-kb-most-read {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.wpmr-kb-most-read__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wpmr-border);
}
.wpmr-kb-most-read__item:last-child { border-bottom: none; }
.wpmr-kb-most-read__title {
	color: var(--wpmr-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.wpmr-kb-most-read__title:hover { color: var(--wpmr-accent); }
.wpmr-kb-most-read__meta {
	color: var(--wpmr-muted);
	font-size: 13px;
	white-space: nowrap;
	flex-shrink: 0;
}
@media (max-width: 480px) {
	.wpmr-kb-most-read__item { flex-direction: column; gap: 4px; }
}
/* Wiki (Knowledge Base overview) search bar. */
.wpmr-kb-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 680px;
	background: var(--wpmr-surface);
	border: none;
	border-radius: var(--wpmr-radius);
	padding: 6px 6px 6px 20px;
	box-shadow: none;
}
.wpmr-kb-search__icon { color: var(--wpmr-muted); flex-shrink: 0; }
.wpmr-kb-search__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	padding: 12px 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--wpmr-ink);
	min-width: 0;
}
.wpmr-kb-search__button {
	flex-shrink: 0;
	background: var(--wpmr-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 26px;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color .2s;
}
.wpmr-kb-search__button:hover { background: #D24A0C; }
@media (max-width: 480px) {
	.wpmr-kb-search { flex-wrap: wrap; border-radius: 20px; padding: 14px; }
	.wpmr-kb-search__input { flex-basis: 100%; padding: 6px 0; }
	.wpmr-kb-search__button { flex: 1; }
}