/*
Theme Name: Humable (GeneratePress Child)
Template: generatepress
Version: 2.3.0
Description: Complete Humable storefront child theme for GeneratePress. Bundles every page template (home, about, contact, FAQ, blog archive, collections, consult, doctors & clinics, locations, media, careers, Find My Support quiz), the Fit Finder shortcode, shop + product styling, the global UI (announcement bar, mega-menu, footer), and the homepage product tabs — no Code Snippets plugin required. Requires GeneratePress + WooCommerce.
Author: Humable
Text Domain: humable
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  GeneratePress overrides (global)
   2.  Header / mega-menu
   3.  Footer
   4.  FAQ page
   5.  Contact page
   6.  Consult page
   7.  Collections page
   8.  About page
   9.  Location pages
   10. Shop & product pages
   11. Responsive catch-all
   ============================================================ */


/* ============================================================
   1. GENERATEPRESS OVERRIDES — global
   ============================================================ */

/*
 * GeneratePress renders its own header (logo + primary nav) below the
 * Humable mega-menu. Since the mega-menu already contains the logo,
 * search, WhatsApp button and full navigation, the GP header is
 * redundant and must be hidden.
 */
.site-header {
	display: none !important;
}

/*
 * GP adds top padding to the body to compensate for a sticky header.
 * With the header hidden we reclaim that space.
 */
.has-sticky-header .site-content,
.js-sticky-header .site-content {
	padding-top: 0 !important;
}

/*
 * GP's global <button> rule (dark background, white text, border-radius,
 * text-transform) bleeds into every template that uses <button> elements
 * — the FAQ accordion, the Consult form submit, the quiz nav buttons, etc.
 * Reset here; each component re-applies what it actually wants.
 */
.hfaq-item__q,
.hcst-submit,
.hqz-btn,
.hloc-hero__btns .hloc-btn,
.hdoc-submit {
	background: transparent;
	color: inherit;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	font-weight: inherit;
	padding: 0;
	line-height: inherit;
}

/*
 * GP adds left/right padding to .content-area that competes with the
 * full-bleed sections (heroes, dark bands) inside page templates.
 * Templates that need zero-gap full-bleed use .hml, .hab, .hcon etc.
 * We zero the extra padding on those wrappers only.
 */
.page-template-template-humable-home     .content-area,
.page-template-template-humable-about    .content-area,
.page-template-template-humable-contact  .content-area,
.page-template-template-humable-faq      .content-area,
.page-template-template-humable-consult  .content-area,
.page-template-template-humable-doctors  .content-area,
.page-template-template-humable-location .content-area,
.page-template-template-humable-collections .content-area,
.page-template-template-humable-media    .content-area,
.page-template-template-humable-careers  .content-area,
.page-template-template-humable-quiz     .content-area,
.page-template-template-humable-legal    .content-area,
.page-template-template-humable-returns  .content-area {
	padding: 0 !important;
	max-width: 100% !important;
}

/* Remove GP's site-main top/bottom margin on full-bleed templates */
.page-template-template-humable-home     .site-main,
.page-template-template-humable-about    .site-main,
.page-template-template-humable-contact  .site-main,
.page-template-template-humable-faq      .site-main,
.page-template-template-humable-consult  .site-main,
.page-template-template-humable-doctors  .site-main,
.page-template-template-humable-location .site-main,
.page-template-template-humable-collections .site-main,
.page-template-template-humable-media    .site-main,
.page-template-template-humable-careers  .site-main,
.page-template-template-humable-quiz     .site-main,
.page-template-template-humable-legal    .site-main,
.page-template-template-humable-returns  .site-main {
	margin: 0 !important;
	padding: 0 !important;
}


/* ============================================================
   2. HEADER / MEGA-MENU
   ============================================================ */

/*
 * The announcement bar is inserted via wp_body_open. Give it full
 * width and make sure GP's body padding doesn't create a gap above it.
 */
.hml-topbar {
	width: 100%;
	position: relative;
	z-index: 9999;
}

/* Mega-menu sits directly below the announcement bar */
.hml-nav {
	position: sticky;
	top: 0;
	z-index: 9998;
}


/* ============================================================
   3. FOOTER
   ============================================================ */

/*
 * GP appends its own ".site-footer" below the Humable custom footer.
 * Hide it so there are never two footers.
 */
.site-footer {
	display: none !important;
}

/*
 * The Humable footer is injected via generate_footer hook as .hml-footer.
 * Ensure it always runs to full viewport width.
 */
.hml-footer {
	width: 100%;
}


/* ============================================================
   4. FAQ PAGE
   ============================================================ */

/* GP's global button rule targets every <button>; accordion buttons need a reset */
.hfaq-item__q {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	width: 100% !important;
	padding: 16px 0 !important;
	background: #fff !important;
	color: #0B2A4A !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: "Inter", sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	cursor: pointer !important;
	transition: color .18s !important;
}

.hfaq-item__q:hover,
.hfaq-item__q:focus {
	background: #fff !important;
	color: #1854A8 !important;
	outline: none !important;
}

/* The +/× icon inside the button */
.hfaq-item__icon {
	flex: none !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: #1854A8 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	transition: transform .2s, background .2s !important;
}

.hfaq-item.is-open .hfaq-item__icon {
	background: #0C3D82 !important;
	transform: rotate(45deg) !important;
}


/* ============================================================
   5. CONTACT PAGE
   ============================================================ */

/* Hero: 2-column grid (text left, image right) */
@media (min-width: 769px) {
	.hcon-hero {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		min-height: 280px !important;
		overflow: hidden !important;
		align-items: stretch !important;
	}

	.hcon-hero__img {
		display: block !important;
		height: 100% !important;
		min-height: 280px !important;
		overflow: hidden !important;
	}

	.hcon-hero__img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: top center !important;
		display: block !important;
	}
}

@media (max-width: 768px) {
	.hcon-hero { grid-template-columns: 1fr !important; }
	.hcon-hero__img { display: none !important; }
}

/* Location pills — GP strips flex from <div> children containing <a> tags */
.hcon-locs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 10px !important;
}

.hcon-locs a {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #0B2A4A !important;
	text-decoration: none !important;
	padding: 5px 14px !important;
	border: 1.5px solid #E4EAF1 !important;
	border-radius: 999px !important;
	background: #F4F7FB !important;
	transition: border-color .18s, color .18s !important;
}

.hcon-locs a:hover {
	border-color: #1854A8 !important;
	color: #1854A8 !important;
	background: #EAF2FD !important;
}

/* 2-col body grid */
@media (min-width: 769px) {
	.hcon-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: clamp(32px, 5vw, 72px) !important;
		align-items: start !important;
	}
}


/* ============================================================
   6. CONSULT PAGE
   ============================================================ */

/* Hero 2-col */
@media (min-width: 769px) {
	.hcst-hero__inner {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 40px !important;
		align-items: center !important;
	}

	.hcst-hero__img {
		display: block !important;
		text-align: right !important;
	}

	.hcst-hero__img img {
		max-width: 380px !important;
		border-radius: 16px !important;
		box-shadow: 0 24px 64px -16px rgba(0,0,0,.3) !important;
		display: block !important;
		margin-left: auto !important;
	}

	/* How it works — horizontal steps */
	.hcst-steps {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr auto 1fr !important;
		align-items: center !important;
		gap: 16px !important;
		margin-top: 0 !important;
	}

	.hcst-step__arrow {
		display: block !important;
		font-size: 24px !important;
		color: #1854A8 !important;
		font-weight: 300 !important;
		flex-shrink: 0 !important;
		text-align: center !important;
	}

	/* Form + trust panel side by side */
	.hcst-grid {
		display: grid !important;
		grid-template-columns: 1.4fr 1fr !important;
		gap: 48px !important;
		align-items: start !important;
	}

	/* Inline field rows inside the form */
	.hcst-form__row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 16px !important;
	}

	/* FAQ 2-col at the bottom */
	.hcst-faq-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 20px !important;
	}
}

@media (max-width: 768px) {
	.hcst-hero__img { display: none !important; }
	.hcst-step__arrow { display: none !important; }
}

/* Submit button — GP resets removed above; re-apply Humable styles */
.hcst-submit {
	background: #1854A8 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: "Poppins", "Inter", sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 14px 32px !important;
	cursor: pointer !important;
	transition: background .18s !important;
	align-self: flex-start !important;
}

.hcst-submit:hover {
	background: #0C3D82 !important;
}


/* ============================================================
   7. COLLECTIONS PAGE
   ============================================================ */

/* Hero 2-col */
@media (min-width: 769px) {
	.hcol-hero__inner {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 32px !important;
		align-items: center !important;
	}

	.hcol-hero__img {
		display: block !important;
		text-align: right !important;
	}
}

@media (max-width: 768px) {
	.hcol-hero__img { display: none !important; }
}

/* Category grid — 5 columns on wide, step down gracefully */
@media (min-width: 1025px) {
	.hcol-grid {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr) !important;
		gap: 20px !important;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.hcol-grid {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 18px !important;
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	.hcol-grid {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 14px !important;
	}
}

@media (max-width: 480px) {
	.hcol-grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
}

/* CTA band at the bottom */
@media (min-width: 769px) {
	.hcol-cta__inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 24px !important;
		flex-wrap: wrap !important;
	}
}


/* ============================================================
   8. ABOUT PAGE
   ============================================================ */

/* Journey and VMC rows: 2-col side by side */
@media (min-width: 769px) {
	.hab-2col {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: clamp(32px, 5vw, 72px) !important;
		align-items: center !important;
	}

	.hab-vmc__row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: clamp(32px, 5vw, 72px) !important;
		align-items: center !important;
	}

	/* Reverse alternating rows */
	.hab-vmc__row--rev .hab-vmc__img { order: 2 !important; }
	.hab-vmc__row--rev .hab-vmc__text { order: 1 !important; }
}

/* What We Do: 4-col grid */
@media (min-width: 769px) {
	.hab-cards {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 20px !important;
	}
}

@media (max-width: 768px) {
	.hab-cards {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 16px !important;
	}
}

@media (max-width: 480px) {
	.hab-cards { grid-template-columns: 1fr !important; }
}


/* ============================================================
   9. LOCATION PAGES
   ============================================================ */

/* Clinic card: 2-col (info left, map right) */
@media (min-width: 769px) {
	.hloc-clinic__card {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 28px !important;
		align-items: start !important;
	}
}

/* Delivery cards: 4-col */
@media (min-width: 769px) {
	.hloc-delivery__grid {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 16px !important;
	}
}

@media (max-width: 768px) {
	.hloc-delivery__grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 14px !important;
	}
}

/* Popular products: 4-col */
@media (min-width: 769px) {
	.hloc-products__grid {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 16px !important;
	}
}

@media (max-width: 768px) {
	.hloc-products__grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
	}
}

/* Why grid: 2-col */
@media (min-width: 769px) {
	.hloc-why__grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 16px !important;
	}
}

/* Nearby pills: flex wrap */
.hloc-nearby__pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

/* CTA band */
@media (min-width: 769px) {
	.hloc-cta__inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 24px !important;
		flex-wrap: wrap !important;
	}
}


/* ============================================================
   10. SHOP & PRODUCT PAGES
   ============================================================ */

/*
 * GP can render a right sidebar on WooCommerce pages.
 * If the Customizer "No Sidebar" setting isn't applied, force it here.
 */
.woocommerce .content-area,
.woocommerce-page .content-area {
	width: 100% !important;
	float: none !important;
}

.woocommerce .widget-area,
.woocommerce-page .widget-area {
	display: none !important;
}

/* Shop hero — always full width, never a left column */
.hshop-hero {
	width: 100% !important;
	float: none !important;
	clear: both !important;
}


/* ============================================================
   11. RESPONSIVE CATCH-ALL
   ============================================================ */

@media (max-width: 768px) {
	/* Doctors page: hero + form grid collapse cleanly */
	.hdoc-hero__inner,
	.hdoc-form-grid { grid-template-columns: 1fr !important; }
	.hdoc-hero__img { display: none !important; }

	/* Stats strip: 2×2 on mobile */
	.hdoc-stats__grid { grid-template-columns: 1fr 1fr !important; }

	/* Doctors cards: single column */
	.hdoc-cards { grid-template-columns: 1fr !important; }

	/* About message card: full width */
	.hab-message__card { padding: 24px 18px !important; }

	/* Consult trust panel: stacks below form on mobile */
	.hcst-trust { margin-top: 0 !important; }

	/* CTA bands: stack vertically */
	.hloc-cta__inner,
	.hcol-cta__inner,
	.hdoc-cat-band__inner { flex-direction: column !important; align-items: flex-start !important; }
}

@media (max-width: 480px) {
	/* Certification grids */
	.hab-certs__row,
	.hdoc-certs__row { grid-template-columns: repeat(2, 1fr) !important; }

	/* Location page: stack all grids */
	.hloc-delivery__grid,
	.hloc-products__grid,
	.hloc-why__grid { grid-template-columns: 1fr !important; }
}