/*
Theme Name: Mass Marketing Tools
Theme URI: https://massmarketingtools.com
Author: Mass Marketing Tools
Author URI: https://massmarketingtools.com
Description: Conversion-focused theme for MassMarketingTools.com with custom logo resizing and landing page layout.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: massmarketingtools
*/

/* CSS Variables for brand */
:root {
	--color-primary: #3793e7;
	--color-secondary: #2d78c0;
	--color-bg: #fafbfc;
	--color-text: #0f172a;
	--color-muted: #6b7280;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
	--shadow-md: 0 8px 24px rgba(0,0,0,0.08);
}

/* Base Reset-ish */
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.6;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
a {
	color: var(--color-primary);
	text-decoration: none;
}
a:hover {
	color: var(--color-secondary);
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	background: #fff;
	box-shadow: var(--shadow-sm);
	z-index: 1000;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
}
.site-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.site-logo img {
	display: block;
	max-height: 48px;
	width: auto;
}
.site-title {
	font-weight: 700;
	font-size: 18px;
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}
.primary-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
}
.primary-nav .menu a {
	color: var(--color-text);
	opacity: 0.9;
}
.primary-nav .menu a:hover {
	opacity: 1;
	color: var(--color-primary);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	border-radius: var(--radius-sm);
	padding: 10px 16px;
	transition: all .2s ease;
	box-shadow: var(--shadow-sm);
}
.btn-primary {
	background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
	color: #fff;
}
.btn:focus, .btn:focus-visible { outline: none; }
.btn-primary:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: #fff;
}
.btn-ghost {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid rgba(55,147,231,0.3);
}
.btn-ghost:hover {
	background: rgba(55,147,231,0.06);
}

/* Hero */
.hero {
	padding: 64px 0 24px;
	background: linear-gradient(180deg, #ffffff, var(--color-bg));
}
.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	text-align: center;
}
.hero h1 {
	margin: 0;
	font-size: 40px;
	line-height: 1.2;
}
.hero p.lead {
	margin: 0 auto;
	max-width: 760px;
	font-size: 18px;
	color: var(--color-muted);
}
.hero .cta-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 16px;
}

/* Services */
.services {
	padding: 24px 0 64px;
}
.cards {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 16px;
	margin-top: 16px;
}
.card {
	background: #fff;
	padding: 20px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	border: 1px solid #eef2f7;
}
.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; color: var(--color-muted); }

/* Footer */
.site-footer {
	margin-top: 40px;
	background: #fff;
	border-top: 1px solid #eef2f7;
	padding: 24px 0;
	color: var(--color-muted);
}

/* Responsive */
@media (min-width: 900px) {
	.hero__inner { text-align: left; grid-template-columns: 1.2fr 0.8fr; align-items: center; }
	.hero .cta-row { justify-content: flex-start; }
	.cards { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile tweaks */
@media (max-width: 899px) {
	.service-icons { display: none; }
	.announcements { display: none; }
	.topbar__inner { justify-content: center; }
	.login-link { margin: 0 auto; }
	.site-header__inner { flex-direction: row; align-items: center; row-gap: 0; flex-wrap: nowrap; padding: 10px 0; }
	.site-brand { flex: 1 1 auto; }
	.primary-nav { justify-content: flex-end; gap: 12px; margin-left: auto; }
	.primary-nav .menu { display: none; }
	.site-logo img { max-height: 40px; }
	.site-title { font-size: 16px; }
	.hero h1 { font-size: 32px; }
	.primary-nav .btn { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
}

@media (min-width: 900px) {
	/* Desktop refine: slightly bigger arrows */
	.announcements-prev, .announcements-next { width:24px; height:24px; }
}

/* Small devices: center login in topbar */
@media (max-width: 599px) {
	.topbar__inner { justify-content: center; }
	.site-title { display: none; }
	.service-icons { display: none; }
	.login-link { margin: 0 auto; }
}

/* Medium screens: 2-up cards */
@media (min-width: 600px) and (max-width: 899px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
}

/* Fluid heading scaling */
.hero h1 { font-size: clamp(28px, 4.5vw, 40px); }

/* Very small screens */
@media (max-width: 480px) {
	.btn { padding: 10px 14px; }
	.container { padding: 0 12px; }
	.site-logo img { max-height: 32px; }
	.primary-nav .btn { padding: 8px 10px; font-size: 13px; }
}



/* Send Button */
#mmt-inquiry-form .form-actions .btn-primary {
	border-width: 0px;
	border-style: none;
}

/* Top Bar */
.topbar {
	background: #f3f4f6;
	color: #111827;
	font-size: 13px;
	box-shadow: var(--shadow-sm);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
}
.service-icons {
	display: flex;
	align-items: center;
	gap: 14px;
}
.announcements { position:relative; display:flex; align-items:center; gap: 10px; max-width: 520px; overflow: hidden; }
.announcements-track { display:flex; margin-left: 54px; width: calc(100% - 54px); }
.announcement { flex: 0 0 100%; color: var(--color-text); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 8px 20px; text-align: left; font-size: 14px; line-height: 1.4; transition: all 0.2s ease; }
.announcement:not(.is-active) { display: none; }
.announcement:hover { color: var(--color-primary); font-weight: 500; }
.announcements-prev, .announcements-next { width: 28px; height: 28px; border: 0; background: rgba(55,147,231,0.1); border-radius: 50%; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); padding: 0; box-shadow: var(--shadow-sm); z-index: 2; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.announcements-prev:hover, .announcements-next:hover { background: var(--color-primary); transform: translateY(-50%) scale(1.05); box-shadow: var(--shadow-md); }
.announcements-prev { left: 8px; right: auto; }
.announcements-next { left: 38px; right: auto; }
.announcements-prev:before, .announcements-next:before { content: ''; display: block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.announcements-prev:before { border-right: 5px solid var(--color-primary); }
.announcements-next:before { border-left: 5px solid var(--color-primary); }
.announcements-prev:hover:before, .announcements-next:hover:before { border-right-color: #fff; border-left-color: #fff; }
.service-icon { display:flex; align-items:center; gap:8px; opacity:0.9; color:#111827; }
.service-icon svg { width:18px; height:18px; }
.icon-wrap { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:#e5e7eb; border-radius:8px; overflow:hidden; font-size: 18px; }
.icon-wrap svg { width:24px; height:24px; display:block; color:#111827; max-width: 100%; max-height: 100%; }
.icon-wrap { font-size: 18px; line-height: 1; }

/* Enlarge service icons in Services section */
.services .icon-wrap { width:64px; height:64px; border-radius:12px; font-size: 32px; }
.services .icon-wrap svg { width:70%; height:70%; max-width: 100%; max-height: 100%; }

/* SVG specific styling for better rendering */
.icon-wrap svg, .service-icon svg {
    fill: currentColor;
    stroke: currentColor;
    overflow: visible;
    display: block;
    visibility: visible;
}

/* Ensure SVGs are responsive and properly sized */
.icon-wrap svg {
    min-width: 16px;
    min-height: 16px;
    width: auto;
    height: auto;
}

.services .icon-wrap svg {
    min-width: 32px;
    min-height: 32px;
    width: auto;
    height: auto;
}

/* Debug styling for empty icon containers */
.icon-wrap:empty::after {
    content: "No SVG";
    font-size: 10px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Ensure icon containers have minimum size even if SVG fails */
.icon-wrap {
    min-width: 36px;
    min-height: 36px;
}

.services .icon-wrap {
    min-width: 64px;
    min-height: 64px;
}

.services .card h3 { display:flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; text-align: center; }


.topbar a { color:#111827; }
.topbar a:hover { color:#0b1220; }

/* Login link styling */
.login-link a {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.login-link a:hover {
	color: var(--color-primary);
}

.lock-icon {
	font-size: 14px;
}

.login-text {
	font-size: 13px;
}

/* Responsive embed */
.responsive-embed { position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); background:#000; }
.responsive-embed iframe, .responsive-embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 12px 0 0; }
.checklist li { display:flex; align-items:flex-start; gap:10px; margin:8px 0; }
.check-icon { display:inline-flex; width:18px; height:18px; border-radius:4px; background:#10b981; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; flex:0 0 18px; }

/* Testimonials */
.testimonials { padding: 24px 0 64px; background: linear-gradient(180deg, var(--color-bg), #ffffff); }
.testimonials .grid { display:grid; gap:16px; grid-template-columns: repeat(1, 1fr); }
.testimonial { background:#fff; border:1px solid #eef2f7; border-radius: var(--radius-md); padding:20px; box-shadow: var(--shadow-sm); }
.testimonial blockquote { margin:0; font-style: italic; }
.testimonial .author { margin-top:12px; font-weight:600; color:#111827; }

/* Inquiry form */
.inquiry { padding: 24px 0 64px; }
.inquiry form { background:#fff; border:1px solid #eef2f7; border-radius: var(--radius-md); padding:20px; box-shadow: var(--shadow-sm); max-width:680px; }
.field { display:flex; flex-direction:column; margin-bottom:12px; }
.field label { font-weight:600; margin-bottom:6px; }
.field input { border:1px solid #d1d5db; border-radius:8px; padding:10px 12px; font-size:16px; }
.form-row { display:grid; grid-template-columns:1fr; gap:12px; }
.form-actions { display:flex; gap:12px; align-items:center; }
.form-note { color: var(--color-muted); font-size: 14px; }
.form-status { font-size:14px; }
.form-status.success { color:#059669; }
.form-status.error { color:#dc2626; }

@media (min-width: 900px) {
	.testimonials .grid { grid-template-columns: repeat(3, 1fr); }
	.form-row { grid-template-columns: 1fr 1fr; }
}


/* Pricing */
.pricing { padding: 24px 0 64px; }
.plans { display:grid; grid-template-columns: repeat(1, 1fr); gap: 16px; margin-top: 16px; }
.plan .price { display:flex; align-items:baseline; gap:6px; margin: 6px 0 12px; }
.plan .amount { font-size: 28px; font-weight: 800; color: var(--color-text); }
.plan .period { color: var(--color-muted); }
.plan-cta { margin-top: 12px; }
.plan--featured { border: 2px solid var(--color-primary); box-shadow: 0 12px 32px rgba(55,147,231,0.15); position: relative; }
.plan--featured .badge { position:absolute; top:-10px; right: 12px; background: var(--color-primary); color:#fff; padding:4px 8px; border-radius: 999px; font-size: 12px; font-weight:700; box-shadow: var(--shadow-sm); }

@media (min-width: 900px) {
	.plans { grid-template-columns: repeat(3, 1fr); }
}

/* Billing toggle */
.billing-toggle { display:inline-flex; align-items:center; gap: 6px; background:#fff; border:1px solid #e5e7eb; border-radius: 999px; padding: 4px; margin-top: 8px; box-shadow: var(--shadow-sm); }
.toggle-btn { border:0; background:transparent; padding:8px 12px; border-radius: 999px; font-weight:600; color:#374151; cursor:pointer; }
.toggle-btn.is-active { background: var(--color-primary); color:#fff; }
.toggle-btn .save { font-size:12px; color:#10b981; margin-left:6px; font-weight:700; }
.toggle-btn.is-active .save { color:#ffffff; }

/* Ensure announcements are hidden on mobile (override cascade) */
@media (max-width: 899px) {
	.announcements { display: none !important; }
	.announcements-prev, .announcements-next { display: none !important; }
}

/* ==========================================================================
   Page Template
   ========================================================================== */
.page-hero {
	padding: 64px 0 32px;
}
.page-hero .hero__inner {
	grid-template-columns: 1fr;
	text-align: center;
}
.page-hero__content {
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}
.page-hero .cta-row {
	justify-content: center;
}
.page-title {
	margin: 0;
	font-size: clamp(28px, 4.5vw, 40px);
	line-height: 1.2;
}
.page-lead {
	margin: 12px auto 0;
	max-width: 760px;
	font-size: 18px;
	color: var(--color-muted);
}
.page-content {
	padding: 24px 0 64px;
}
.page-article {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px;
}
.page-article .entry-content {
	font-size: 1.05em;
	line-height: 1.7;
}
.page-article .entry-content h2 {
	margin: 2em 0 0.75em;
	font-size: 1.5em;
}
.page-article .entry-content h3 {
	margin: 1.5em 0 0.5em;
	font-size: 1.25em;
}
.page-article .entry-content p {
	margin: 0 0 1em;
	color: var(--color-text);
}
.page-article .entry-content ul,
.page-article .entry-content ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}
.page-article .entry-content li {
	margin-bottom: 0.5em;
}

/* ==========================================================================
   SEO Landing Page Template
   ========================================================================== */
.seo-landing .page-hero {
	padding: 48px 0 40px;
}
.seo-landing .page-hero__content {
	text-align: center;
}
.seo-landing .page-hero .cta-row {
	justify-content: center;
}
.seo-landing .page-title {
	font-size: clamp(32px, 5vw, 48px);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.seo-landing .page-lead {
	font-size: 20px;
	max-width: 700px;
}
.seo-landing .page-content {
	padding: 32px 0 64px;
}
.seo-landing .page-article {
	max-width: 800px;
	padding: 40px;
}
.seo-landing-cta {
	text-align: center;
	padding: 48px 0 64px;
	background: linear-gradient(180deg, var(--color-bg), #fff);
}
.seo-landing-cta .btn {
	padding: 14px 28px;
	font-size: 1.1em;
}
@media (min-width: 900px) {
	.seo-landing .page-hero__content { text-align: center; }
	.seo-landing .page-article { padding: 48px 56px; }
}

/* ==========================================================================
   SEO Landing Page with Hero Background
   ========================================================================== */
.page-hero--colored .page-title,
.page-hero--colored .page-lead {
	color: #fff;
}
.page-hero--colored .page-lead {
	opacity: 0.95;
}
.page-hero--colored .btn-ghost {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
.page-hero--colored .btn-ghost:hover {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
	border-color: #fff;
}