/*
Theme Name: FDG Theme
Theme URI: https://fuqdagram.com
Author: fuqdagram.com
Author URI: https://fuqdagram.com
Description: A responsive, widget-driven magazine-style base theme built for use with the Fuqdagram plugin suite (Hero Video, Stories, Shootouts, Store Widget, JH Newsletter, JIH Page Views, and related plugins). Classic Editor / widgets-based, no block templates. Full-width header and footer, flexible two-thirds/one-third content zones on the homepage, and a widgetized sidebar.
Version: 1.0.33
License: Proprietary
Text Domain: fdg-theme
*/

/* ---------- Color variables (overridden inline by the Customizer — see functions.php fdg_customizer_css) ---------- */
:root {
	--fdg-nav-bg: #222222;
	--fdg-nav-text: #ffffff;
	--fdg-nav-hover-bg: var(--fdg-accent);
	--fdg-nav-hover-text: #ffffff;
	--fdg-accent: #f2a900;
	--fdg-footer-bg: #222222;
	--fdg-footer-text: #ffffff;
	--fdg-site-title-color: #222222;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #222;
	width: 100%;
	overflow-x: hidden;
	/* Background color/image is controlled by Appearance > Customize >
	   Background Image (custom-background theme support) — intentionally
	   not hardcoded here so that control actually works. */
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: #222;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Layout wrapper ---------- */
/* This is the centered "column" (matches jayinhouston.com's white
   column) — the body's background color/image (Appearance >
   Customize > Background Image) shows on the sides of THIS wrapper,
   for the full height of the page, header through footer. */
.fdg-site {
	width: 100%;
	max-width: 1080px; /* matches the 1080 x 250 header banner spec exactly, so the banner is never upscaled */
	margin: 0 auto;
	background: #ffffff;
}

/* Regions that span the full width of the column (not the browser
   viewport) — header banner, nav, and footer all reach the edges of
   the centered column, with the body background visible outside it. */
.fdg-full-width {
	width: 100%;
}

/* Constrained inner wrapper used inside full-width regions.
   Restored the 20px side padding (this is the "1.1.1 padding" that
   looked right) — the earlier fix for the nav-to-content gap was a
   VERTICAL spacing issue (see .fdg-home-zone below), not this
   horizontal one. Widgets still sit right under the nav with no
   vertical gap, but now keep a little breathing room on the sides. */
.fdg-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* ---------- Header ---------- */
.fdg-site-title,
.fdg-site-title a {
	color: var(--fdg-site-title-color);
}

.fdg-header-banner {
	width: 100%;
}

.fdg-header-banner img {
	width: 100%;
	height: auto;
	display: block;
}

/* Header image + optional overlaid site title/tagline text
   (toggled by the "Display Site Title & Tagline" checkbox in
   Appearance > Customize > Header Image) */
.fdg-header-image-wrap {
	position: relative;
}

.fdg-header-text-overlay {
	position: absolute;
	max-width: 90%;
}

/* Title text position — set via Appearance > Customize > Header Image >
   Title Text Position */
.fdg-pos-top-left {
	top: 5%;
	left: 5%;
}

.fdg-pos-bottom-left {
	bottom: 5%;
	left: 5%;
}

.fdg-pos-center-left {
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
}

.fdg-pos-top-right {
	top: 5%;
	right: 5%;
	text-align: right;
}

.fdg-pos-bottom-right {
	bottom: 5%;
	right: 5%;
	text-align: right;
}

.fdg-pos-center-right {
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	text-align: right;
}

.fdg-pos-center-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.fdg-header-text-overlay .fdg-site-title {
	margin: 0;
	font-size: clamp(20px, 4vw, 40px);
	text-shadow:
		0 0 8px rgba(0, 0, 0, 0.85),
		0 0 16px rgba(0, 0, 0, 0.6),
		2px 2px 3px rgba(0, 0, 0, 0.9);
}

.fdg-header-text-overlay .fdg-site-title a {
	color: inherit;
}

.fdg-header-text-overlay .fdg-site-tagline {
	margin: 4px 0 0;
	font-size: clamp(12px, 1.6vw, 16px);
	text-shadow:
		0 0 6px rgba(0, 0, 0, 0.85),
		1px 1px 2px rgba(0, 0, 0, 0.9);
}

@media (max-width: 480px) {
	.fdg-header-text-overlay {
		left: 4%;
	}
}

/* Header advertisement widget areas (Header 1 / Header 2) */
.fdg-header-ads {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 0;
}

.fdg-header-ads .widget {
	flex: 1 1 300px;
}

/* ---------- Primary navigation ---------- */
.fdg-nav-wrap {
	width: 100%;
	background: var(--fdg-nav-bg);
}

.fdg-nav {
	display: flex;
	align-items: center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.fdg-nav ul {
	display: flex;
}

.fdg-nav li {
	flex: 0 0 auto;
}

.fdg-nav a {
	display: block;
	padding: 8px 16px;
	color: var(--fdg-nav-text);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-size: 13px;
}

/* WordPress marks the active menu item with current-* classes.
   FDG intentionally keeps those items visually identical to the rest
   of the bar; only an actual hover/focus changes the button color. */
.fdg-nav .current-menu-item > a,
.fdg-nav .current_page_item > a,
.fdg-nav .current-menu-parent > a,
.fdg-nav .current_page_parent > a,
.fdg-nav .current-menu-ancestor > a,
.fdg-nav .current_page_ancestor > a {
	background: var(--fdg-nav-bg);
	color: var(--fdg-nav-text);
}

.fdg-nav a:hover,
.fdg-nav a:focus-visible,
.fdg-nav .current-menu-item > a:hover,
.fdg-nav .current_page_item > a:hover,
.fdg-nav .current-menu-parent > a:hover,
.fdg-nav .current_page_parent > a:hover,
.fdg-nav .current-menu-ancestor > a:hover,
.fdg-nav .current_page_ancestor > a:hover {
	background: var(--fdg-nav-hover-bg);
	color: var(--fdg-nav-hover-text) !important;
	text-decoration: none;
}

/* "Inside Navigation Bar" option (Customize > FDG Layout Options >
   Search Bar Position) */
.fdg-search-toggle {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 0 16px;
}

/* "Below Navigation Bar" option — right-aligned white strip under
   the nav, matching jayinhouston.com. This is the default. */
.fdg-below-nav-search {
	width: 100%;
	background: #ffffff;
	padding: 12px 0;
}

.fdg-below-nav-search .fdg-search-form {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* Mobile: menu becomes a horizontally-scrollable strip (matches classic
   magazine-theme mobile behavior — no off-canvas drawer required) */
@media (max-width: 767px) {
	.fdg-nav a {
		padding: 10px 14px;
		font-size: 13px;
	}
}

/* Widget zone wrapper (output by fdg_sidebar() in functions.php).
   position: relative gives any absolutely-positioned elements a
   widget outputs (like/comment counters, nav arrows, dots, etc.)
   the correct containing box to anchor to — without this, removing
   the old padding caused those elements to anchor to the page
   instead and appear stuck to the far edge. */
.fdg-widget-zone {
	position: relative;
	/* If a widget (like Stories) uses position:fixed for its own
	   controls (prev/next arrows, etc.), a plain position:relative
	   ancestor does NOT contain it — fixed always anchors to the
	   browser viewport unless an ancestor has a transform/filter/
	   perspective, which creates a new containing block. This
	   transform is a no-op visually but forces exactly that, so
	   those controls anchor to the widget's own box instead of the
	   edges of the browser window. */
	transform: translateZ(0);
}

/* Scoped ONLY to full-width zones (Home 1 / 7 / 11 — where the
   Stories slider lives) so a stray negatively-offset element from
   that widget gets clipped, without touching the 2/3 or 1/3 zones
   where plain images (like a sidebar photo) need their full box. */
.fdg-widget-zone.fdg-zone-full {
	overflow: hidden;
}

/* ---------- Homepage widget zones (Home 1 - Home 11) ---------- */
/* Each zone is full width by default; add a width modifier class in
   front-page.php depending on which zone is being rendered. */
.fdg-home-zone {
	width: 100%;
	/* No imposed padding — a widget like Stories or Hero Video should
	   be able to butt directly against the nav bar above it, exactly
	   as on jayinhouston.com. Widgets that want breathing room should
	   bring their own spacing. */
}

.fdg-home-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	width: 100%;
}

.fdg-zone-full {
	flex: 1 1 100%;
}

.fdg-zone-two-thirds {
	/* Locked to an exact 2/3 of the row (accounting for half the 30px
	   gap), rather than an approximate flex-grow ratio. */
	flex: 0 1 calc(66.666% - 15px);
	min-width: 0;
}

.fdg-zone-one-third {
	flex: 0 1 calc(33.333% - 15px);
	min-width: 0;
}

/* Wraps Home 3 + Home 4 (or similar stacked pairs) so they sit
   together in the 1/3 column next to a 2/3 zone, instead of each
   individually competing for row space. */
.fdg-zone-one-third-stack {
	flex: 0 1 calc(33.333% - 15px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

@media (max-width: 767px) {
	.fdg-home-row {
		flex-direction: column;
		gap: 20px;
	}

	.fdg-zone-two-thirds,
	.fdg-zone-one-third,
	.fdg-zone-one-third-stack {
		flex: 1 1 100%;
	}
}

/* ---------- Main content layout (single/page/archive: 2/3 content + 1/3 sidebar) ---------- */
.fdg-content-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding: 30px 20px;
	align-items: flex-start;
	box-sizing: border-box;
}

.fdg-main-content {
	flex: 2 1 600px;
	min-width: 0;
}

.fdg-sidebar {
	flex: 1 1 300px;
	min-width: 0;
}

.fdg-sidebar .widget {
	margin-bottom: 30px;
}

/* Center a plain image-widget's photo within its box when narrower
   than the column. Scoped ONLY to the core "Image" widget type
   (widget_media_image) — NOT a blanket ".widget img" rule, since that
   also caught small inline images (like an avatar next to a name)
   inside other widgets (e.g. the Stories feed) and, via the flexbox
   auto-margin behavior, shoved unrelated content out of place. */
.widget_media_image img {
	margin-left: auto;
	margin-right: auto;
}

/* Widget title base styling — the actual look is picked via
   Appearance > Customize > FDG Layout Options > Widget Title Style,
   which adds a body class (fdg-title-style-...) selecting one of
   the variants below. */
.widgettitle {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Style 1: Colored Bar — solid background label (default) */
body.fdg-title-style-colored_bar .widgettitle {
	background: var(--fdg-nav-bg);
	color: var(--fdg-nav-text);
	padding: 10px 16px;
	margin: 0 0 14px;
}

/* Style 2: Underline — plain text with an accent-colored rule beneath */
body.fdg-title-style-underline .widgettitle {
	color: #222;
	padding: 0 0 10px;
	border-bottom: 3px solid var(--fdg-accent);
}

/* Style 3: Left Border Accent — plain text with a colored bar on the left */
body.fdg-title-style-border_left .widgettitle {
	color: #222;
	padding: 4px 0 4px 14px;
	border-left: 4px solid var(--fdg-nav-bg);
}

/* Style 4: Plain Text — no decoration at all */
body.fdg-title-style-plain .widgettitle {
	color: #222;
}

@media (max-width: 767px) {
	.fdg-content-layout {
		flex-direction: column;
		gap: 30px;
	}
}

/* Breadcrumb — Home / Category / Post Title */
.fdg-breadcrumb {
	font-size: 13px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 18px;
}

.fdg-breadcrumb a {
	color: #888;
}

.fdg-breadcrumb a:hover {
	color: var(--fdg-nav-bg);
	text-decoration: none;
}

.fdg-breadcrumb-sep {
	margin: 0 8px;
	color: #ccc;
}

.fdg-breadcrumb-current {
	color: #444;
}

/* Post title + meta typography */
.fdg-entry-title {
	font-size: 38px;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 14px;
	letter-spacing: -.01em;
}

.fdg-entry-meta {
	font-size: 14px;
	color: #888;
	margin: 0 0 24px;
}

.fdg-entry-meta a {
	color: #888;
}

.fdg-entry-meta a:hover {
	color: var(--fdg-nav-bg);
}

.fdg-meta-sep {
	margin: 0 6px;
	color: #ccc;
}

.fdg-featured-image {
	margin-bottom: 24px;
}

.fdg-entry-content {
	font-size: 18px;
	line-height: 1.75;
	color: #333;
}

.fdg-entry-content p {
	margin: 0 0 22px;
}

/* No-sidebar layout: main content takes the full row */
.fdg-content-layout.fdg-no-sidebar .fdg-main-content {
	flex: 1 1 100%;
}

/* Posts 1-2 / Pages 1-2 advertisement slots (render above/below the loop) */
.fdg-inline-ad {
	width: 100%;
	margin: 20px 0;
}

/* ---------- Footer ---------- */
.fdg-footer {
	width: 100%;
	background: var(--fdg-footer-bg);
	color: var(--fdg-footer-text);
	padding: 40px 0 20px;
}

.fdg-footer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.fdg-footer-col {
	flex: 1 1 250px;
}

.fdg-footer-bottom {
	width: 100%;
	text-align: center;
	padding: 20px 0;
	font-size: 13px;
	opacity: .7;
}

@media (max-width: 767px) {
	.fdg-footer-row {
		flex-direction: column;
	}
}

/* ---------- Utility ---------- */
.fdg-screen-reader-text {
	position: absolute;
	left: -9999px;
}