/*
Theme Name: Northside Marketing & Company
Theme URI: https://northsidemarketingcorporate.com/
Author: Northside Marketing & Company
Author URI: https://northsidemarketingcorporate.com/
Description: The Northside Marketing & Company theme — blues and black on a light scale, with the silver lining from the blue icon and brilliant, vibrant accents, rebuilt from the recovered 2014 brand assets (LOGO NMCO, the blue icon with the silver N, the email icon in action, and the community hands) and the Graphic Design department file database (the NM damask background from background NM.psd, the BRAND tags, and the Application Development badge). Front page: Exclusive Branding. "We Earn Your Business Everyday!"
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: northside
Tags: blue, black, silver, light, business, marketing, responsive
*/

/* ============================================================
   1. Base
   ============================================================ */
:root {
	--navy: #0a2a5e;
	--blue: #1e63d0;
	--bright: #00a3ff;
	--sky: #7cc4ff;
	--violet: #7c3aed;
	--orange: #ff7a1a;
	--green: #12b76a;
	--amber: #f5b301;
	--silver: #c0c8d4;
	--silver-light: #e8ecf2;
	--silver-dark: #9aa5b5;
	--black: #101418;
	--ink: #1c2430;
	--muted: #5a6b7d;
	--line: #dfe7f0;
	--bg: #f2f7fc;
	--white: #ffffff;
}

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

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

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--navy);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

h1 { font-size: 44px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
h4 { font-size: 19px; }

p { margin: 0 0 20px; }

a {
	color: var(--bright);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--navy);
	text-decoration: underline;
}

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

ul, ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

li { margin-bottom: 8px; }

blockquote {
	border-left: 4px solid var(--bright);
	margin: 0 0 20px;
	padding: 8px 0 8px 20px;
	color: var(--muted);
	font-style: italic;
}

.container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.narrow {
	max-width: 760px;
	margin: 0 auto;
}

/* Silver divider — the silver lining, used between sections. */
.silver-rule {
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--silver), transparent);
	border: 0;
	margin: 0 auto;
}

/* ============================================================
   2. Header
   ============================================================ */
.site-header {
	background: var(--white);
	border-bottom: 3px solid var(--bright);
	box-shadow: 0 1px 0 var(--silver);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-logo img {
	display: block;
	max-height: 64px;
	width: auto;
}

.site-logo .site-title {
	color: var(--navy);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.site-logo .site-title a {
	color: var(--navy);
	text-decoration: none;
}

.site-logo .site-title a:hover,
.site-logo .site-title a:focus {
	color: var(--bright);
	text-decoration: none;
}

.site-logo .site-tagline {
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.primary-menu a {
	color: var(--black);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--bright);
	border-bottom-color: var(--bright);
	text-decoration: none;
}

.primary-menu ul {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

/* ============================================================
   3. Hero
   ============================================================ */
.hero {
	background-color: var(--bg);
	background-image: linear-gradient(rgba(242, 247, 252, 0.88), rgba(242, 247, 252, 0.94)), url("assets/nm-background.jpg");
	background-size: cover;
	background-position: center;
	color: var(--ink);
	padding: 96px 0 88px;
	text-align: center;
}

.hero .hero-mark {
	display: block;
	margin: 0 auto 28px;
	max-height: 88px;
	width: auto;
}

.hero h1 {
	color: var(--navy);
	font-size: 56px;
	margin-bottom: 12px;
}

.hero .hero-rule {
	width: 72px;
	height: 5px;
	background: linear-gradient(90deg, var(--bright), var(--silver));
	margin: 0 auto 28px;
	border: 0;
}

.hero p.lead {
	color: #33475e;
	font-size: 21px;
	line-height: 1.6;
	max-width: 720px;
	margin: 0 auto 36px;
}

.hero .hero-tagline {
	color: var(--bright);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

/* ============================================================
   4. Buttons — bright, and in motion: the arrow slides forward.
   ============================================================ */
.btn {
	display: inline-block;
	background: var(--bright);
	color: var(--white);
	border: 2px solid var(--bright);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 30px;
	text-decoration: none;
	margin: 4px 8px 4px 0;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.btn:focus {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(10, 42, 94, 0.25);
}

.btn .btn-arrow {
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.2s ease;
}

.btn:hover .btn-arrow,
.btn:focus .btn-arrow {
	transform: translateX(5px);
}

.btn-outline {
	background: transparent;
	border-color: var(--white);
	color: var(--white);
}

.btn-outline:hover,
.btn-outline:focus {
	background: var(--white);
	border-color: var(--white);
	color: var(--navy);
}

.btn-dark {
	background: var(--black);
	border-color: var(--black);
}

.btn-dark:hover,
.btn-dark:focus {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

/* ============================================================
   5. Sections
   ============================================================ */
.section {
	padding: 76px 0;
}

.section-alt {
	background: var(--bg);
}

.section-dark {
	background-color: var(--navy);
	background-image: linear-gradient(rgba(10, 42, 94, 0.72), rgba(10, 42, 94, 0.72)), url("assets/nm-background.jpg");
	background-size: cover;
	background-position: center;
	color: var(--white);
}

.section-dark h2,
.section-dark h3 {
	color: var(--white);
}

.section-dark p {
	color: #d6e9ff;
}

.eyebrow {
	color: var(--bright);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.section-title {
	text-align: center;
	margin-bottom: 48px;
}

.section-title h2 {
	margin-bottom: 12px;
}

.section-title p {
	color: var(--muted);
	max-width: 640px;
	margin: 0 auto;
}

/* ============================================================
   6. Cards and grids — cards lift when you reach for them.
   ============================================================ */
.grid {
	display: grid;
	gap: 28px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 4px solid var(--bright);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(10, 42, 94, 0.06);
	padding: 30px 28px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(10, 42, 94, 0.16);
	border-top-color: var(--navy);
}

.card h3 {
	font-size: 21px;
	margin-bottom: 10px;
}

.card p {
	color: var(--muted);
	margin-bottom: 0;
}

.card .card-number {
	color: var(--bright);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

/* Brilliant accent colors — the vibrant actions. */
.accent-blue { color: var(--blue); }
.accent-violet { color: var(--violet); }
.accent-orange { color: var(--orange); }
.accent-green { color: var(--green); }
.accent-amber { color: var(--amber); }
.accent-bright { color: var(--bright); }

/* The email icon in action, on the Email Marketing card. */
.card-icon {
	display: block;
	max-height: 96px;
	width: auto;
	margin: 0 0 18px;
}

/* ============================================================
   7. Statistics
   ============================================================ */
.stat {
	text-align: center;
	padding: 8px 12px;
}

.stat .stat-number {
	color: var(--bright);
	font-size: 42px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.stat .stat-label {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
	margin-top: 8px;
}

.section-dark .stat .stat-label {
	color: #c9d9ec;
}

.stat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.stat-list li {
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	margin: 0;
}

.stat-list li:last-child {
	border-bottom: 0;
}

.stat-list .stat-source {
	color: var(--muted);
	font-size: 14px;
}

/* ============================================================
   8. Community — people connecting, in brilliant color.
   ============================================================ */
.community {
	text-align: center;
}

/* ============================================================
   8a. Brand — the BRAND tags from the Graphic Design
   department file database: five bright tags, one name.
   ============================================================ */
.brand-band {
	text-align: center;
}

.brand-figure {
	margin: 0 auto;
	max-width: 560px;
}

.brand-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--silver);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 8px 24px rgba(10, 42, 94, 0.12);
}

.brand-figure figcaption {
	color: var(--muted);
	font-size: 15px;
	margin-top: 16px;
}

/* ============================================================
   8b. Application Development — the badge from the Graphic
   Design department file database: the full cycle, from the
   first sketch to ongoing support.
   ============================================================ */
.appdev {
	align-items: center;
}

.appdev-figure {
	margin: 0;
	text-align: center;
}

.appdev-figure img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
	border: 3px solid var(--silver);
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 8px 24px rgba(10, 42, 94, 0.12);
}

.appdev-stages {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.appdev-stages li {
	border-bottom: 1px solid var(--line);
	padding: 10px 0;
	margin: 0;
}

.appdev-stages li:last-child {
	border-bottom: 0;
}

.appdev-stages .stage-name {
	color: var(--navy);
	font-weight: 800;
}

.community-figure {
	margin: 0 auto 24px;
	max-width: 560px;
}

.community-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--silver);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 8px 24px rgba(10, 42, 94, 0.12);
}

.community p {
	color: var(--muted);
	max-width: 640px;
	margin: 0 auto;
}

/* ============================================================
   9. Call to action band — the blue arrow, moving forward.
   ============================================================ */
.cta-band {
	background-color: var(--navy);
	background-image: linear-gradient(105deg, rgba(10, 42, 94, 0.88) 0%, rgba(30, 99, 208, 0.82) 55%, rgba(0, 163, 255, 0.8) 100%), url("assets/nm-background.jpg");
	background-size: cover;
	background-position: center;
	color: var(--white);
	text-align: center;
	padding: 68px 0;
}

.cta-band h2 {
	color: var(--white);
	font-size: 36px;
	margin-bottom: 12px;
}

.cta-band p {
	color: #d6e9ff;
	font-size: 18px;
	margin-bottom: 28px;
}

.cta-band .btn {
	background: var(--white);
	border-color: var(--white);
	color: var(--blue);
}

.cta-band .btn:hover,
.cta-band .btn:focus {
	background: var(--black);
	border-color: var(--black);
	color: var(--white);
}

/* ============================================================
   10. Content (pages and posts)
   ============================================================ */
.page-content,
.post-content {
	padding: 64px 0 76px;
}

.entry-header {
	margin-bottom: 32px;
}

.entry-header .entry-date {
	color: var(--muted);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.entry-title {
	font-size: 44px;
}

.post-list article {
	border-bottom: 1px solid var(--line);
	padding: 36px 0;
	margin: 0;
}

.post-list article:first-child {
	padding-top: 0;
}

.post-list .entry-title {
	font-size: 30px;
}

.post-list .entry-title a {
	color: var(--navy);
}

.post-list .entry-title a:hover {
	color: var(--bright);
}

.post-meta {
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 12px;
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--line);
	margin-top: 48px;
	padding-top: 24px;
}

.page-links {
	margin-top: 32px;
}

/* ============================================================
   11. Forms
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	border: 1px solid #c9d6e4;
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	padding: 12px 14px;
	margin-bottom: 16px;
	background: var(--white);
	color: var(--ink);
}

input[type="submit"],
button[type="submit"] {
	background: var(--bright);
	border: 2px solid var(--bright);
	border-radius: 4px;
	color: var(--white);
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 13px 28px;
	text-transform: uppercase;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--navy);
	border-color: var(--navy);
	transform: translateY(-2px);
}

label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

/* ============================================================
   12. Footer — black, with the silver lining on top.
   ============================================================ */
.site-footer {
	background-color: var(--black);
	background-image: linear-gradient(rgba(16, 20, 24, 0.55), rgba(16, 20, 24, 0.55)), url("assets/nm-background.jpg");
	background-size: cover;
	background-position: center;
	color: #bdbdbd;
	padding: 56px 0 32px;
	border-top: 3px solid var(--silver);
}

.site-footer .footer-mark {
	max-height: 48px;
	width: auto;
	margin-bottom: 20px;
	border: 2px solid var(--silver);
	border-radius: 6px;
}

.site-footer a {
	color: #d9d9d9;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--sky);
}

.footer-nav {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.footer-nav a {
	font-size: 14px;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.footer-copy {
	border-top: 1px solid #2b2b2b;
	color: #8a8a8a;
	font-size: 14px;
	margin-top: 32px;
	padding-top: 24px;
}

.footer-copy .footer-tagline {
	color: var(--bright);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ============================================================
   13. WordPress required classes
   ============================================================ */
.alignleft {
	display: inline;
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	display: inline;
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 16px;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 20px;
}

.wp-caption img {
	display: block;
}

.wp-caption-text {
	color: var(--muted);
	font-size: 14px;
	padding-top: 8px;
}

.sticky {
	border-top: 4px solid var(--bright);
}

.gallery-caption {
	color: var(--muted);
	font-size: 14px;
}

.bypostauthor {
	font-weight: 700;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* ============================================================
   14. Responsive
   ============================================================ */
@media (max-width: 900px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.hero h1 { font-size: 42px; }
	.hero { padding: 72px 0 64px; }
	.section { padding: 56px 0; }
}

@media (max-width: 600px) {
	body { font-size: 16px; }
	.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
	.hero h1 { font-size: 32px; }
	.hero p.lead { font-size: 18px; }
	h1, .entry-title { font-size: 32px; }
	h2 { font-size: 28px; }
	.site-header .container {
		flex-direction: column;
		align-items: flex-start;
	}
	.post-navigation { flex-direction: column; }
}