/*
Theme Name:   Capital Foods Child
Theme URI:    https://capitalfoodsintl.com
Description:  Child theme for capitalfoodsintl.com — warm heritage B2B wholesale catalog. All custom CSS and template overrides live here.
Author:       Capital Foods International
Author URI:   https://capitalfoodsintl.com
Template:     oceanwp
Version:      0.2.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  capitalfoods-child
*/

/* SITE-WIDE HEADER LOGO
   Image-replacement technique — OceanWP 3.0.7 outputs its own site-title link
   (<a class="site-title site-logo-text">...</a>) and doesn't respect WP core's
   get_custom_logo() filter. We replace the visible text with our SVG via a
   background image while keeping the underlying <a> intact (link still works,
   screen readers still read the site name from the href / link label).
   ========================================================================= */

#site-logo .site-logo-text,
#site-logo .site-title,
.site-logo-text,
.site-title.site-logo-text {
	display: block !important;
	width: 220px !important;
	height: 47px !important;
	max-width: 100% !important;
	text-indent: 100% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	background-image: url("assets/logos/capital-foods.svg") !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: contain !important;
	color: transparent !important;
	font-size: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

@media (max-width: 640px) {
	#site-logo .site-logo-text,
	#site-logo .site-title,
	.site-logo-text,
	.site-title.site-logo-text {
		width: 170px;
		height: 36px;
	}
}

/* ============================================================================
   CF-HOME — ESCAPE OCEANWP'S CONTAINER/SIDEBAR ON THE FRONT PAGE
   OceanWP wraps <main> content in #content-wrap.container (max 1200px) and
   adds a right sidebar by default. Our front page needs full bleed. Also hides
   the OceanWP page-title bar since our hero replaces it.
   ========================================================================= */

body.cf-home #content-wrap,
body.cf-home #content-wrap.container,
body.cf-home #main,
body.cf-home .site-main {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.cf-home #primary,
body.cf-home #content,
body.cf-home .content-area {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

body.cf-home #right-sidebar,
body.cf-home #left-sidebar,
body.cf-home .sidebar,
body.cf-home .widget-area,
body.cf-home aside.sidebar-primary {
	display: none !important;
}

/* Hide OceanWP's page-title bar + breadcrumbs on front page — our hero covers this */
body.cf-home #title-container,
body.cf-home .page-header,
body.cf-home .site-breadcrumbs,
body.cf-home .page-header-wrap,
body.cf-home .single-breadcrumbs-wrap {
	display: none !important;
}

/* Remove any stray default article/entry padding that OceanWP/Elementor apply */
body.cf-home .entry,
body.cf-home article.page,
body.cf-home .entry-content {
	padding: 0 !important;
	margin: 0 !important;
}

/* ============================================================================
   SITE-WIDE HEADER LOGO

:root {
	--cf-bg:          #f7f2e9;
	--cf-bg-deep:     #efe8d9;
	--cf-ink:         #1a2560;
	--cf-ink-soft:    #2a3572;
	--cf-accent:      #cc1a20;
	--cf-accent-dark: #a0141a;
	--cf-muted:       #5a5045;
	--cf-surface:     #ffffff;
	--cf-border:      #e3dbc9;

	--cf-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--cf-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--cf-radius:      6px;
	--cf-radius-lg:   12px;
	--cf-shadow-sm:   0 1px 2px rgba(26, 37, 96, 0.06);
	--cf-shadow-md:   0 8px 24px rgba(26, 37, 96, 0.08);
	--cf-shadow-lg:   0 20px 48px rgba(26, 37, 96, 0.12);

	--cf-container:   1280px;
	--cf-gutter:      clamp(20px, 4vw, 48px);
}

/* ============================================================================
   HOMEPAGE OVERRIDES — scoped to .cf-home so we don't affect interior pages
   ========================================================================= */

body.cf-home,
.cf-home .cf-home-main {
	background: var(--cf-bg);
	color: var(--cf-ink);
	font-family: var(--cf-font-body) !important;
	font-size: 17px !important;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.cf-home .cf-home-main h1,
body.cf-home .cf-home-main h2,
body.cf-home .cf-home-main h3 {
	font-family: var(--cf-font-display) !important;
	color: var(--cf-ink);
	letter-spacing: -0.01em;
	line-height: 1.15;
	font-weight: 400;
	margin: 0;
}

.cf-home h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.cf-home h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.cf-home h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.cf-home p { margin: 0; }

.cf-home a { color: var(--cf-accent); text-decoration: none; }
.cf-home a:hover { color: var(--cf-accent-dark); }

.cf-container {
	max-width: var(--cf-container);
	margin: 0 auto;
	padding-left:  var(--cf-gutter);
	padding-right: var(--cf-gutter);
}

.cf-eyebrow {
	font-family: var(--cf-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cf-accent);
	margin-bottom: 1rem;
}

.cf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.75rem;
	border-radius: var(--cf-radius);
	font-family: var(--cf-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
	cursor: pointer;
	border: 1px solid transparent;
}

.cf-btn-primary {
	background: var(--cf-accent);
	color: #fff !important;
	box-shadow: var(--cf-shadow-sm);
}
.cf-btn-primary:hover {
	background: var(--cf-accent-dark);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: var(--cf-shadow-md);
}

.cf-btn-secondary {
	background: transparent;
	color: var(--cf-ink) !important;
	border-color: var(--cf-ink);
}
.cf-btn-secondary:hover {
	background: var(--cf-ink);
	color: #fff !important;
}

/* ============================================================================
   HERO
   ========================================================================= */

.cf-hero {
	position: relative;
	padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
	overflow: hidden;
}

.cf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at top right, rgba(204, 26, 32, 0.04), transparent 50%),
		radial-gradient(ellipse at bottom left, rgba(26, 37, 96, 0.04), transparent 60%);
	pointer-events: none;
}

.cf-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

@media (max-width: 880px) {
	.cf-hero-inner { grid-template-columns: 1fr; }
}

.cf-hero-content {
	max-width: 38rem;
}

.cf-hero h1 {
	margin-bottom: 1.5rem;
}

.cf-hero h1 .cf-emph {
	font-style: italic;
	color: var(--cf-accent);
}

.cf-hero-lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.6;
	color: var(--cf-muted);
	margin-bottom: 2rem;
	max-width: 34rem;
}

.cf-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
}

.cf-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--cf-border);
	font-size: 0.875rem;
	color: var(--cf-muted);
}
.cf-hero-meta strong {
	display: block;
	font-family: var(--cf-font-display);
	font-size: 1.75rem;
	color: var(--cf-ink);
	font-weight: 500;
	line-height: 1;
	margin-bottom: 0.25rem;
}

/* Hero visual — brand logo grid */
.cf-hero-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 1.5rem;
	background: var(--cf-surface);
	border-radius: var(--cf-radius-lg);
	box-shadow: var(--cf-shadow-lg);
}

.cf-hero-gallery-tile {
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cf-bg);
	border-radius: var(--cf-radius);
	padding: 1.25rem;
	transition: transform 300ms ease;
}
.cf-hero-gallery-tile:hover { transform: scale(1.02); }
.cf-hero-gallery-tile img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ============================================================================
   TRUST STRIP
   ========================================================================= */

.cf-trust {
	background: var(--cf-bg-deep);
	border-top: 1px solid var(--cf-border);
	border-bottom: 1px solid var(--cf-border);
	padding: 2rem 0;
}
.cf-trust-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	align-items: center;
	text-align: center;
}
@media (max-width: 720px) {
	.cf-trust-inner { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
}
.cf-trust-item {
	font-size: 0.875rem;
	color: var(--cf-muted);
	line-height: 1.4;
}
.cf-trust-item strong {
	display: block;
	font-family: var(--cf-font-display);
	font-size: 1.25rem;
	color: var(--cf-ink);
	font-weight: 500;
	letter-spacing: 0.02em;
	margin-bottom: 0.25rem;
}

/* ============================================================================
   SECTION SCAFFOLD
   ========================================================================= */

.cf-section {
	padding: clamp(4rem, 8vw, 7rem) 0;
}

.cf-section-header {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.cf-section-header h2 { margin-bottom: 1rem; }
.cf-section-header p {
	font-size: 1.05rem;
	color: var(--cf-muted);
	line-height: 1.6;
}

/* ============================================================================
   BRAND PORTFOLIO GRID
   ========================================================================= */

.cf-brands {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
@media (max-width: 960px) { .cf-brands { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cf-brands { grid-template-columns: 1fr; } }

.cf-brand-card {
	display: flex;
	flex-direction: column;
	background: var(--cf-surface);
	border-radius: var(--cf-radius-lg);
	border: 1px solid var(--cf-border);
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
	text-decoration: none !important;
	color: inherit !important;
}
.cf-brand-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cf-shadow-md);
	border-color: var(--cf-ink);
}

.cf-brand-logo {
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.75rem;
	background: var(--cf-bg);
	border-bottom: 1px solid var(--cf-border);
}
.cf-brand-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cf-brand-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}
.cf-brand-body h3 {
	font-size: 1.25rem;
	color: var(--cf-ink);
	margin-bottom: 0.25rem;
}
.cf-brand-body p {
	color: var(--cf-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}
.cf-brand-body .cf-link-arrow {
	font-family: var(--cf-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cf-accent) !important;
	letter-spacing: 0.02em;
	margin-top: auto;
	padding-top: 1rem;
}

/* ============================================================================
   WHO WE SERVE
   ========================================================================= */

.cf-audiences {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 860px) { .cf-audiences { grid-template-columns: 1fr; } }

.cf-audience {
	padding: 2rem;
	background: var(--cf-surface);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
}
.cf-audience h3 {
	margin-bottom: 1rem;
}
.cf-audience ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cf-audience li {
	padding: 0.5rem 0 0.5rem 1.5rem;
	position: relative;
	color: var(--cf-muted);
	font-size: 0.95rem;
}
.cf-audience li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--cf-accent);
	font-weight: 600;
}

/* ============================================================================
   HERITAGE / STORY
   ========================================================================= */

.cf-heritage {
	background: var(--cf-ink);
	color: #fff;
}
.cf-heritage h2,
.cf-heritage h3 { color: #fff; }
.cf-heritage-inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
@media (max-width: 880px) { .cf-heritage-inner { grid-template-columns: 1fr; } }
.cf-heritage-intro p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.8);
	margin-top: 1.5rem;
}
.cf-heritage-intro .cf-eyebrow {
	color: #ffb3b8;
}

.cf-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.cf-timeline-item {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 1.5rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cf-timeline-year {
	font-family: var(--cf-font-display);
	font-size: 1.5rem;
	color: #ffb3b8;
	font-weight: 500;
	line-height: 1;
}
.cf-timeline-body p {
	color: rgba(255,255,255,0.75);
	font-size: 0.95rem;
	line-height: 1.5;
}
.cf-timeline-body strong {
	display: block;
	color: #fff;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

/* ============================================================================
   CTA BLOCK
   ========================================================================= */

.cf-cta {
	padding: clamp(4rem, 8vw, 6rem) 0;
	text-align: center;
}
.cf-cta-inner {
	max-width: 44rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem);
	background: var(--cf-surface);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
	box-shadow: var(--cf-shadow-lg);
}
.cf-cta h2 { margin-bottom: 1rem; }
.cf-cta p {
	color: var(--cf-muted);
	margin-bottom: 2rem;
	font-size: 1.05rem;
}
.cf-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* ============================================================================
   TYPOGRAPHY HELPERS
   ========================================================================= */

.cf-home .entry-content,
.cf-home .content-area,
.cf-home main { overflow: visible; }