/*
Theme Name:   GeneratePress Child - SHG Portal
Theme URI:    https://propelstudios.net
Description:  Child theme for the Secure Headset Group reseller portal. Holds portal-specific templates and styles so GeneratePress can update safely.
Author:       Propel Studios
Author URI:   https://propelstudios.net
Template:     generatepress
Version:      0.1.0
License:      GNU General Public License v2 or later
Text Domain:  generatepress-child
*/

/* Portal styles. Keep it lean - this is a utility library, not a marketing site. */

/* Poppins everywhere to match the SHG storefront (body 400, headings 600). */
body,
button,
input,
select,
textarea,
.shg-header__nav,
.shg-btn,
.shg-chip {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.shg-hero__title,
.shg-tile__title,
.shg-doc-card__title,
.shg-archive__title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
}

/* Comfortable side gutters so bars and content don't hug the screen edges. */
.shg-topbar__inner,
.shg-header,
.shg-front,
.shg-archive,
.shg-single,
.shg-footer-contact__inner {
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* Header + topbar live inside GeneratePress's header, whose inline CSS outranks
   the plain selectors above. Target them with higher specificity so the side
   gutter actually applies and the header aligns with the content below. */
.shg-topbar .shg-topbar__inner,
.site-header .inside-header.shg-header,
.shg-footer-contact .shg-footer-contact__inner {
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* ===========================================================================
   HEADER / TOPBAR
   =========================================================================== */
.shg-topbar {
	background: #ec1b24;
	color: #fff;
	font-size: 0.8rem;
}

.shg-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.35rem 24px;
	gap: 1rem;
}

.shg-topbar a {
	color: #fff;
	text-decoration: none;
}

.shg-topbar a:hover {
	text-decoration: underline;
}

.shg-topbar__sep {
	opacity: 0.6;
	margin: 0 0.4rem;
}

.shg-topbar__label {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.72rem;
	white-space: nowrap;
}

/* Header bar: clean white, so the red/black logo reads and it clearly is NOT
   the public black-header storefront. */
.site-header {
	background: #fff;
	border-bottom: 3px solid #ec1b24;
}

.shg-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.75rem 24px;
	flex-wrap: wrap;
}

.shg-header__brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.shg-header__logo img {
	height: 46px;
	width: auto;
	display: block;
}

.shg-header__badge {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ec1b24;
	border: 1px solid #ec1b24;
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	white-space: nowrap;
}

.shg-header__nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.shg-header__nav > a {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
	white-space: nowrap;
}

.shg-header__nav > a:hover {
	color: #ec1b24;
}

/* WordPress-managed menu in the header (Appearance -> Menus) */
.shg-header__menu {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shg-header__menu li {
	margin: 0;
}

.shg-header__menu a {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
	white-space: nowrap;
}

.shg-header__menu a:hover {
	color: #ec1b24;
}

.shg-header__search {
	display: flex;
	align-items: center;
}

.shg-header__search input[type="search"] {
	border: 1px solid #d6d6d6;
	border-radius: 6px 0 0 6px;
	padding: 0.4rem 0.6rem;
	font-size: 0.85rem;
	min-width: 180px;
	margin: 0;
	height: auto;
}

.shg-header__search button {
	border: none;
	background: #1a1a1a;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.45rem 0.8rem;
	border-radius: 0 6px 6px 0;
	cursor: pointer;
}

.shg-header__search button:hover {
	background: #ec1b24;
}

/* ===========================================================================
   HERO
   =========================================================================== */
.shg-front {
	width: 100%;
	padding-bottom: 3rem;
}

.shg-hero {
	background: #1a1a1a;
	color: #fff;
	border-radius: 12px;
	padding: 2.75rem 2.5rem;
	margin: 1.75rem 0 2rem;
}

.shg-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	font-weight: 700;
	color: #ff5a6e;
	margin: 0 0 0.4rem;
}

.shg-hero__title {
	color: #fff;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	line-height: 1.1;
	margin: 0 0 0.6rem;
}

.shg-hero__intro {
	color: #cfcfcf;
	max-width: 40rem;
	margin: 0 0 1.5rem;
}

.shg-hero__search {
	display: flex;
	max-width: 34rem;
}

.shg-hero__search input[type="search"] {
	flex: 1;
	border: none;
	border-radius: 8px 0 0 8px;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	margin: 0;
	height: auto;
}

.shg-hero__search button {
	border: none;
	background: #ec1b24;
	color: #fff;
	font-weight: 700;
	padding: 0 1.5rem;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
}

.shg-hero__search button:hover {
	filter: brightness(0.92);
}

/* ===========================================================================
   LANDING
   =========================================================================== */
.shg-landing {
	padding: 2rem 0 3rem;
}

.shg-notice {
	background: #fdf3f4;
	border: 1px solid #f3c9cf;
	border-radius: 8px;
	padding: 0.9rem 1.1rem;
	font-size: 0.9rem;
	margin: 0 0 2rem;
}

.shg-landing__featured {
	margin-bottom: 2rem;
}

/* Section tiles */
.shg-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
	margin: 1rem 0 0;
}

.shg-tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fff;
	padding: 1.25rem;
	text-decoration: none;
	color: #1a1a1a;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
	min-height: 190px;
}

a.shg-tile:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
	border-color: #ec1b24;
}

.shg-tile--soon {
	background: #fafafa;
	border-style: dashed;
	color: #8a8a8a;
}

.shg-tile__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.shg-tile__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #1a1a1a;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

.shg-tile--soon .shg-tile__num {
	background: #c9c9c9;
}

.shg-tile__count {
	font-size: 0.72rem;
	font-weight: 600;
	color: #6b6b6b;
	background: #f0f0f1;
	border-radius: 999px;
	padding: 0.2rem 0.55rem;
}

.shg-tile__soon {
	font-size: 0.72rem;
	font-weight: 600;
	color: #9a9a9a;
	background: #efefef;
	border-radius: 999px;
	padding: 0.2rem 0.55rem;
}

.shg-tile__title {
	font-size: 1.15rem;
	margin: 0.2rem 0 0;
	line-height: 1.2;
}

.shg-tile__desc {
	font-size: 0.85rem;
	color: #6b6b6b;
	margin: 0;
	flex: 1;
}

.shg-tile--soon .shg-tile__desc {
	color: #9a9a9a;
}

.shg-tile__cta {
	font-size: 0.85rem;
	font-weight: 700;
	color: #ec1b24;
	margin-top: auto;
}

.shg-tile--soon .shg-tile__cta {
	color: #b0b0b0;
}

/* ===========================================================================
   FOOTER CONTACT
   =========================================================================== */
.shg-footer-contact {
	background: #1a1a1a;
	color: #e8e8e8;
	padding: 2rem 0;
}

.shg-footer-contact__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem;
}

.shg-footer-contact__head {
	color: #fff;
	font-size: 1.2rem;
	margin: 0 0 0.5rem;
}

.shg-footer-contact__meta {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
}

.shg-footer-contact a {
	color: #ff8a97;
	text-decoration: none;
}

.shg-footer-contact a:hover {
	text-decoration: underline;
}

.shg-footer-contact__note {
	font-size: 0.8rem;
	color: #9a9a9a;
	align-self: flex-end;
}

/* ===========================================================================
   RESOURCE HUB (FacetWP)
   =========================================================================== */
.shg-hub {
	padding: 1.5rem 24px 3rem;
}

.shg-hub__layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.shg-hub__filters {
	position: sticky;
	top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.1rem;
	border: 1px solid var(--shg-line);
	border-radius: 10px;
	background: #fff;
}

.shg-facet__label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--shg-muted);
	margin: 0 0 0.5rem;
}

.shg-hub__count {
	font-size: 0.85rem;
	color: var(--shg-muted);
	margin: 0 0 1rem;
}

.shg-hub__pager {
	margin-top: 1.5rem;
}

/* FacetWP element theming to match the portal */
.facetwp-search {
	width: 100%;
}

.facetwp-search .facetwp-search-input,
input.facetwp-search {
	width: 100%;
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	padding: 0.5rem 0.65rem;
	font-size: 0.9rem;
	box-sizing: border-box;
}

.facetwp-checkbox {
	font-size: 0.88rem;
	margin-bottom: 0.35rem;
	background-image: none;
	padding-left: 0;
}

.facetwp-counter {
	color: var(--shg-muted);
	font-size: 0.78rem;
}

.facetwp-facet {
	margin-bottom: 0 !important;
}

.shg-facet--reset .facetwp-reset,
.facetwp-reset {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--shg-red);
	cursor: pointer;
}

.facetwp-pager .facetwp-page {
	display: inline-block;
	padding: 0.35rem 0.65rem;
	margin: 0 0.15rem;
	border: 1px solid var(--shg-line);
	border-radius: 5px;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: none;
	color: var(--shg-ink);
}

.facetwp-pager .facetwp-page.active {
	background: var(--shg-red);
	border-color: var(--shg-red);
	color: #fff;
}

/* ===========================================================================
   LOGIN PAGE (branded, hosts the MemberPress login form)
   =========================================================================== */
.shg-login {
	padding: 3rem 24px 4rem;
	display: flex;
	justify-content: center;
}

.shg-login__card {
	width: 100%;
	max-width: 440px;
	border: 1px solid var(--shg-line);
	border-top: 4px solid var(--shg-red);
	border-radius: 12px;
	background: #fff;
	padding: 2.25rem 2rem 2.5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.shg-login__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--shg-red);
	margin: 0 0 0.3rem;
}

.shg-login__title {
	margin: 0 0 0.5rem;
	font-size: 1.6rem;
}

.shg-login__intro {
	color: var(--shg-muted);
	font-size: 0.9rem;
	margin: 0 0 1.5rem;
}

.shg-login__form label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--shg-ink);
	margin: 0.75rem 0 0.3rem;
}

.shg-login__form input[type="text"],
.shg-login__form input[type="email"],
.shg-login__form input[type="password"] {
	width: 100%;
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	padding: 0.6rem 0.7rem;
	font-size: 0.95rem;
	box-sizing: border-box;
}

.shg-login__form input[type="submit"],
.shg-login__form button[type="submit"] {
	width: 100%;
	margin-top: 1.1rem;
	background: var(--shg-red);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.7rem 1rem;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
}

.shg-login__form input[type="submit"]:hover,
.shg-login__form button[type="submit"]:hover {
	filter: brightness(0.92);
}

.shg-login__form a {
	color: var(--shg-red);
	font-size: 0.85rem;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 900px) {
	.shg-hub__layout {
		grid-template-columns: 1fr;
	}

	.shg-hub__filters {
		position: static;
	}
}

@media (max-width: 768px) {
	.shg-header {
		justify-content: center;
		text-align: center;
	}

	.shg-header__nav {
		justify-content: center;
	}
}

:root {
	--shg-red: #ec1b24;      /* SHG accent (red + black brand). Adjust to exact brand hex. */
	--shg-ink: #1a1a1a;
	--shg-muted: #6b6b6b;
	--shg-line: #e3e3e3;
	--shg-bg-soft: #f6f6f7;
}

/* ---- Grid ---- */
.shg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.25rem;
	margin: 1rem 0 2rem;
}

/* ---- Document card ---- */
.shg-doc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--shg-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.shg-doc-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.shg-doc-thumb {
	position: relative;
	display: block;
	background: var(--shg-bg-soft);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.shg-doc-thumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.shg-doc-thumb__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--shg-muted);
	background: var(--shg-bg-soft);
}

.shg-doc-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.9rem 1rem 1.1rem;
	flex: 1;
}

.shg-doc-card__type,
.shg-archive__eyebrow {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--shg-muted);
	margin: 0;
}

.shg-doc-card__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.shg-doc-card__title a {
	color: var(--shg-ink);
	text-decoration: none;
}

.shg-doc-card__title a:hover {
	color: var(--shg-red);
}

.shg-doc-card__meta {
	margin: 0.1rem 0 0;
}

.shg-doc-card__actions {
	margin-top: auto;
	padding-top: 0.6rem;
}

.shg-doc-card__nofile,
.shg-single__nofile {
	font-size: 0.85rem;
	color: var(--shg-muted);
	font-style: italic;
}

/* ---- Chips (taxonomy links) ---- */
.shg-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.72rem;
	line-height: 1;
	padding: 0.3rem 0.55rem;
	border: 1px solid var(--shg-line);
	border-radius: 999px;
	color: var(--shg-ink);
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.shg-chip:hover {
	border-color: var(--shg-red);
	color: var(--shg-red);
}

.shg-chip__count {
	font-size: 0.65rem;
	color: var(--shg-muted);
	background: var(--shg-bg-soft);
	border-radius: 999px;
	padding: 0.05rem 0.35rem;
}

/* ---- Badges ---- */
.shg-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
}

.shg-badge--featured {
	color: #fff;
	background: var(--shg-red);
}

.shg-doc-thumb .shg-badge--featured {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
}

/* ---- Buttons ---- */
.shg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
	padding: 0.5rem 0.85rem;
	cursor: pointer;
}

.shg-btn--download {
	color: #fff;
	background: var(--shg-red);
}

.shg-btn--download:hover {
	color: #fff;
	filter: brightness(0.92);
}

.shg-btn--lg {
	font-size: 0.95rem;
	padding: 0.7rem 1.2rem;
}

.shg-btn__fmt {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 3px;
	padding: 0.1rem 0.35rem;
}

/* ---- Archive ---- */
.shg-archive__header {
	margin: 1.5rem 0 1rem;
}

.shg-archive__title {
	margin: 0.2rem 0 0.4rem;
}

.shg-archive__intro {
	color: var(--shg-muted);
	max-width: 46rem;
}

.shg-archive__subhead {
	font-size: 1.1rem;
	margin: 1.5rem 0 0.25rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--shg-line);
}

.shg-browse {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0;
}

.shg-browse__label {
	font-weight: 600;
	font-size: 0.85rem;
	margin-right: 0.25rem;
}

.shg-pagination {
	margin: 1.5rem 0 2.5rem;
}

/* ---- Single document ---- */
.shg-single {
	margin: 1.5rem auto;
}

.shg-single__back {
	margin: 0.5rem 0 1rem;
	font-size: 0.85rem;
}

.shg-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.shg-single__media {
	border: 1px solid var(--shg-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--shg-bg-soft);
	position: relative;
	min-height: 220px;
}

.shg-single__media .shg-doc-thumb__img {
	width: 100%;
	height: auto;
	display: block;
}

.shg-single__type {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--shg-muted);
	margin: 0 0 0.3rem;
}

.shg-single__title {
	margin: 0 0 0.75rem;
}

.shg-single__desc {
	margin: 1rem 0;
}

.shg-single__cta {
	margin: 1.25rem 0;
}

.shg-single__specs {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1rem;
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--shg-line);
	font-size: 0.9rem;
}

.shg-single__specs dt {
	font-weight: 600;
	color: var(--shg-muted);
}

.shg-single__specs dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.shg-single__grid {
		grid-template-columns: 1fr;
	}

	.shg-single__media {
		max-width: 340px;
	}
}

/* SHG: Browse above Most Requested on the Resource Library (2026-07-16) */
.shg-archive { display: flex; flex-direction: column; }
.shg-archive > .shg-archive__header    { order: 0; }
.shg-archive > .shg-browse             { order: 1; margin: .25rem 0 1.75rem; }
.shg-archive > .shg-archive__featured  { order: 2; }
.shg-archive > section:not(.shg-archive__featured):not(.shg-archive__header) { order: 3; }


/* SHG: View button (opens PDF inline) as outline secondary beside Download (2026-07-16). box-shadow inset keeps its height identical to the solid Download button. */
.shg-doc-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.shg-btn--view {
	background: #fff;
	color: #ec1b24;
	box-shadow: inset 0 0 0 1px #ec1b24;
}
.shg-btn--view:hover,
.shg-btn--view:focus {
	background: #ec1b24;
	color: #fff;
}


/* SHG: Browse the Portal above Most Requested on the home page (2026-07-16) */
.shg-front { display: flex; flex-direction: column; }
.shg-front > .shg-hero                      { order: 0; }
.shg-front > .shg-notice                    { order: 1; }
.shg-front > [aria-label="Portal sections"] { order: 2; }
.shg-front > .shg-landing__featured         { order: 3; }


/* SHG: single-doc CTA lays View + Download side by side (2026-07-16) */
.shg-single__cta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }