/*
Theme Name: Social Growth
Theme URI: https://example.com/social-growth
Author: Social Services Manager
Description: A lightweight, WooCommerce-compatible theme designed for social media growth service businesses. No page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: social-growth
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready
*/

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

:root {
	--sg-primary: #4f46e5;
	--sg-secondary: #0ea5e9;
	--sg-text: #0f172a;
	--sg-muted: #64748b;
	--sg-bg: #ffffff;
	--sg-surface: #f8fafc;
	--sg-border: #e2e8f0;
	--sg-success: #16a34a;
	--sg-danger: #dc2626;
	--sg-radius: 16px;
	--sg-radius-sm: 10px;
	--sg-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
	--sg-container: 1200px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sg-text);
	background: var(--sg-bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sg-primary); }
a:hover { color: #4338ca; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }

.sg-container { max-width: var(--sg-container); margin: 0 auto; padding: 0 20px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--sg-secondary); outline-offset: 2px; }

/* Buttons */
.sg-btn, .wp-block-button__link, button, input[type="submit"], .button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px; border-radius: var(--sg-radius-sm);
	background: var(--sg-primary); color: #fff !important;
	font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
	transition: background .15s ease;
}
.sg-btn:hover, .button:hover, input[type="submit"]:hover { background: #4338ca; }
.sg-btn--ghost { background: transparent; color: var(--sg-text) !important; border: 1px solid var(--sg-border); }
.sg-btn--ghost:hover { background: var(--sg-surface); }

/* Header */
/* ==============================================================
 * HEADER
 * ============================================================== */

.sg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.95);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--sg-border);
}

.sg-header__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 68px;
	position: relative;
	justify-content: space-between;
}

.sg-header__logo {
	font-size: 20px;
	font-weight: 800;
	text-decoration: none;
	color: var(--sg-text);
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}
.sg-header__logo img { max-height: 40px; width: auto; }

/* --------------------------------------------------------------
 * CSS-drawn hamburger
 * ------------------------------------------------------------ */
.sg-menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--sg-border);
	border-radius: 10px;
	color: var(--sg-text);
	width: 44px;
	height: 44px;
	padding: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: 0 0 auto;
	position: relative;
}
.sg-menu-toggle:focus-visible { outline: 3px solid var(--sg-secondary); outline-offset: 2px; }

/* The three-line burger. */
.sg-burger {
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	background: #000;
	border-radius: 1px;
}
.sg-burger::before,
.sg-burger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: #000;
	border-radius: 1px;
}
.sg-burger::before { top: -6px; }
.sg-burger::after  { top:  6px; }

/* The X shown when the menu is open. */
.sg-burger-close {
	display: none;
	position: relative;
	width: 20px;
	height: 20px;
}
.sg-burger-close::before,
.sg-burger-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background: #000;
	border-radius: 1px;
}
.sg-burger-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sg-burger-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.sg-menu-toggle[aria-expanded="true"] .sg-burger       { display: none; }
.sg-menu-toggle[aria-expanded="true"] .sg-burger-close { display: block; }

/* --------------------------------------------------------------
 * CSS-drawn chevron for parent items
 * ------------------------------------------------------------ */
.sg-chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .2s ease;
	pointer-events: none;
}
.sg-nav li.is-open > .sg-submenu-toggle .sg-chevron {
	transform: rotate(-135deg) translate(-3px, -3px);
}

/* Parent caret on desktop (small, next to the label). */
.sg-nav .sg-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -2px);
	opacity: .7;
}

/* --------------------------------------------------------------
 * Account / Cart icons — data-URI SVG in CSS, cannot be stripped
 * ------------------------------------------------------------ */
.sg-header__icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: var(--sg-text);
	text-decoration: none;
	flex: 0 0 auto;
}
.sg-header__icon-link:hover { background: var(--sg-surface); color: var(--sg-primary); }

.sg-header__icon-link--account::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.sg-header__icon-link--account:hover::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

.sg-header__icon-link--cart::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.sg-header__icon-link--cart:hover::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
}

/* Cart badge */
.sg-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 9px;
	background: var(--sg-primary);
	color: #fff;
	font-size: 11px;
	padding: 0 5px;
}

/* --------------------------------------------------------------
 * Desktop navigation
 * ------------------------------------------------------------ */
.sg-nav {
	flex: 0 1 auto;
	min-width: 0;
}
.sg-nav__inner { min-width: 0; }
.sg-nav__footer { display: none; }

.sg-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
}

.sg-nav li { position: relative; }

.sg-nav a {
	display: inline-block;
	padding: 8px 2px;
	text-decoration: none;
	color: var(--sg-text);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	white-space: nowrap;
}
.sg-nav a:hover { color: var(--sg-primary); }

/* Submenu: hidden on desktop until hover/focus. */
.sg-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sg-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15,23,42,.10);
	opacity: 0;
	align-items: flex-start;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 20;
	flex-direction: column;
	flex-wrap: nowrap;
}
.sg-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

.sg-nav li:hover > .sub-menu,
.sg-nav li:focus-within > .sub-menu,
.sg-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sg-nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	white-space: nowrap;
}
.sg-nav .sub-menu a:hover,
.sg-nav .sub-menu a:focus {
	background: var(--sg-surface);
	color: var(--sg-primary);
}

/* Toggle button hidden on desktop. */
.sg-submenu-toggle { display: none; }

/* Currency form sits in the header on desktop; the mobile dropdown hides it. */
.sg-currency-form { margin-left: 6px; }
.sg-currency-select {
	border: 1px solid var(--sg-border);
	border-radius: 8px;
	padding: 6px 8px;
	font-size: 14px;
	background: #fff;
	color: var(--sg-text);
	max-width: 100px;
}

/* ==============================================================
 * <= 1100px : collapse to hamburger dropdown
 * ============================================================== */
@media (max-width: 1100px) {

	.sg-menu-toggle { display: inline-flex; margin-left: auto; }

	/* Hide the desktop currency switch from the header; it appears in
	   the mobile dropdown footer instead. */
	.sg-header__inner > .sg-currency-form { display: none; }
	.sg-nav__footer {
		display: block;
		padding: 16px 4px 4px;
		border-top: 1px solid var(--sg-border);
		margin-top: 8px;
	}
	.sg-nav__footer .sg-currency-form { margin: 0; }
	.sg-nav__footer .sg-currency-select { max-width: 100%; width: 100%; padding: 10px 12px; font-size: 15px; }

	/* Slide-down menu panel. */
	.sg-nav {
		position: absolute;
		top: calc(100% + 1px);
		left: -20px;
		right: -20px;
		background: #fff;
		border-bottom: 1px solid var(--sg-border);
		box-shadow: 0 12px 24px rgba(15,23,42,.08);
		padding: 4px 20px 20px;
		max-height: calc(100vh - 68px);
		overflow-y: auto;
		display: none;
		z-index: 90;
	}
	.sg-nav.is-open { display: block; }

	.sg-nav ul {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
	}
	.sg-nav li { width: 100%; position: relative; }
	.sg-nav a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--sg-border);
		font-size: 16px;
	}

	/* Show the accordion toggle. */
	.sg-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--sg-muted);
		cursor: pointer;
		position: absolute;
		right: 0;
		top: 4px;
	}
	.sg-nav li.is-open > .sg-submenu-toggle { color: var(--sg-primary); }

	/* Hide the desktop caret on mobile. */
	.sg-nav .sg-has-children > a::after { display: none; }
	.sg-nav .sg-has-children > a { padding-right: 52px;padding-left: 15px; }

	/* Submenu: collapse by default, expand on .is-open. */
	.sg-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: var(--sg-surface);
		margin: 0;
		padding: 0 0 0 16px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
		min-width: 0;
		display: block;
		flex-direction: column;
	}
	.sg-nav li.is-open > .sub-menu { max-height: 1200px; }
	.sg-nav .sub-menu::before { display: none; }

	.sg-nav .sub-menu a {
		padding: 12px 16px;
		border-bottom: 1px solid var(--sg-border);
		background: transparent;
		font-size: 15px;
	}
	.sg-nav .sub-menu a:hover,
	.sg-nav .sub-menu a:focus { background: #eef2ff; }
}

/* ==============================================================
 * <= 520px : tighter header
 * ============================================================== */
@media (max-width: 520px) {
	.sg-header__inner { min-height: 60px; gap: 8px; }
	.sg-header__logo { font-size: 18px; max-width: 140px; }
	.sg-header__icon-link { width: 36px; height: 36px; }
	.sg-header__icon-link::before { width: 18px; height: 18px; }
	.sg-menu-toggle { width: 40px; height: 40px; }
	.sg-cart-count { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
}
/* --------------------------------------------------------------
 * Parent / child menu items — desktop
 * ------------------------------------------------------------ */

.sg-nav li {
	position: relative;
}

/* Toggle button is hidden on desktop; parents open on hover/focus. */
.sg-submenu-toggle { display: none; }

/* Dropdown container. */
.sg-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sg-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15,23,42,.10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 20;
}

/* Small invisible bridge so the dropdown doesn't close while moving
   the pointer from the parent to the submenu. */
.sg-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

.sg-nav li:hover > .sub-menu,
.sg-nav li:focus-within > .sub-menu,
.sg-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Give parents a small caret so users know there's more below. */
.sg-nav .sg-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -2px);
	opacity: .7;
}

/* Submenu link styling — flatter, full-width rows. */
.sg-nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sg-text);
	white-space: nowrap;
}
.sg-nav .sub-menu a:hover,
.sg-nav .sub-menu a:focus {
	background: var(--sg-surface);
	color: var(--sg-primary);
}
/* --------------------------------------------------------------
 * Collapse to hamburger at 1,100px. This is the point at which a
 * 5-item primary menu plus logo plus currency/account/cart stops
 * fitting cleanly. Below that, the whole nav becomes a dropdown.
 * ------------------------------------------------------------ */
@media (max-width: 1100px) {
    
	/* Hide the inline nav and show the toggle. */
	.sg-nav {
		position: absolute;
		top: calc(100% + 1px);
		left: -20px;
		right: -20px;
		background: #fff;
		border-bottom: 1px solid var(--sg-border);
		box-shadow: 0 12px 24px rgba(15,23,42,.08);
		padding: 8px 20px 16px;
		max-height: calc(100vh - 68px);
		overflow-y: auto;
		display: none;
		z-index: 90;
	}
	.sg-nav.is-open { display: block; }

	.sg-nav ul {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
	}
	.sg-nav li { width: 100%; }
	.sg-nav a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--sg-border);
		font-size: 16px;
	}
	.sg-nav li:last-child a { border-bottom: 0; }

	.sg-menu-toggle { display: inline-flex; }

	/* Keep Account and Cart visible; currency selector moves inside
	   the dropdown on very small screens to save horizontal room. */
	.sg-header__actions { gap: 10px; }
		/* --------------------------------------------------------------
	 * Parent / child menu items — mobile (accordion)
	 * ------------------------------------------------------------ */

	.sg-nav li { position: static; }

	/* Show the toggle button only on mobile. */
	.sg-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--sg-muted);
		cursor: pointer;
		transition: transform .18s ease, color .15s ease;
		position: absolute;
		right: 0;
		top: 6px;
	}
	.sg-nav li.is-open > .sg-submenu-toggle {
		transform: rotate(180deg);
		color: var(--sg-primary);
	}

	/* Parent items need room for the toggle on the right. */
	.sg-nav .sg-has-children {
		position: relative;
	}
	.sg-nav .sg-has-children > a {
		padding-right: 56px;
	}
	.sg-nav .sg-has-children > a::after { display: none; }

	/* Mobile submenu: nested list, hidden until opened. */
	.sg-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: var(--sg-surface);
		margin: 0;
		padding: 0 0 0 16px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.sg-nav li.is-open > .sub-menu {
		max-height: 800px;
	}

	.sg-nav .sub-menu a {
		padding: 12px 16px;
		border-bottom: 1px solid var(--sg-border);
		background: transparent;
	}
	.sg-nav .sub-menu a:hover,
	.sg-nav .sub-menu a:focus {
		background: #eef2ff;
	}
}

@media (max-width: 520px) {
	.sg-header__inner { min-height: 60px; gap: 10px; }
	.sg-header__logo { font-size: 18px; max-width: 140px; }
	.sg-header__actions .sg-currency-form { display: none; }
	.sg-header__actions a { font-size: 13px; }
	.sg-cart-count { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
}

/* Hero */
.sg-hero {
	background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
	padding: 80px 0 64px;
}
.sg-hero__title { font-size: clamp(32px, 5vw, 56px); margin: 0 0 16px; }
.sg-hero__sub { font-size: 18px; color: var(--sg-muted); max-width: 640px; margin: 0 0 28px; }
.sg-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }

/* Sections */
.sg-section { padding: 64px 0; }
.sg-section--alt { background: var(--sg-surface); }
.sg-section__head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.sg-section__head h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 10px; }
.sg-section__head p { color: var(--sg-muted); margin: 0; }

/* Footer */
.sg-footer { background: #0f172a; color: #cbd5e1; padding: 56px 0 24px; margin-top: 60px; }
.sg-footer a { color: #cbd5e1; text-decoration: none; font-size: 14px; }
.sg-footer a:hover { color: #fff; }
.sg-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-bottom: 40px; }
.sg-footer h3 { color: #fff; font-size: 15px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .06em; }
.sg-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sg-footer__bottom { border-top: 1px solid #1e293b; padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* WooCommerce */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 0; padding: 0; }
.woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }
.woocommerce-cart .cart_totals, .woocommerce-checkout .woocommerce { max-width: 100%; }
.woocommerce table.shop_table { border-radius: var(--sg-radius-sm); overflow: hidden; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 11px 12px; border-radius: var(--sg-radius-sm); border: 1px solid var(--sg-border);
}

/* Blog / content */
.sg-content { padding: 48px 0; }
.sg-content article { margin-bottom: 48px; }
.sg-post-meta { color: var(--sg-muted); font-size: 14px; margin-bottom: 12px; }
.sg-pagination { display: flex; gap: 10px; justify-content: center; margin: 32px 0; }
.sg-pagination .page-numbers {
	padding: 8px 14px; border-radius: 8px; border: 1px solid var(--sg-border);
	text-decoration: none; color: var(--sg-text);
}
.sg-pagination .page-numbers.current { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); }

/* 404 */
.sg-404 { text-align: center; padding: 100px 20px; }
.sg-404 h1 { font-size: 72px; margin: 0 0 12px; }