/*!
Theme Name: BMW Numbers
Theme URI: https://bmwnumbers.com
Author: BMW Numbers Team
Author URI: https://bmwnumbers.com
Description: A professional theme for showcasing premium vanity phone numbers to BMW dealerships. Built on Underscores starter theme with a sleek, automotive-inspired design.
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bmw-numbers
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

BMW Numbers is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

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

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #1a1a1a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.5rem;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
	border-left: 4px solid #1c69d4;
	padding-left: 1.5em;
	font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #f5f5f5;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #ffffff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 1.5em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
	border-collapse: collapse;
}

/* Links
--------------------------------------------- */
a {
	color: #1c69d4;
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover,
a:focus,
a:active {
	color: #0d47a1;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: none;
	background: #1c69d4;
	color: #ffffff;
	font-size: 1rem;
	line-height: 1;
	padding: 1em 2em;
	cursor: pointer;
	border-radius: 4px;
	font-weight: 600;
	transition: all 0.3s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #0d47a1;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(28, 105, 212, 0.3);
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	background: #0d47a1;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #1a1a1a;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.75em;
	width: 100%;
	font-size: 1rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #1a1a1a;
	border-color: #1c69d4;
	outline: none;
}

select {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.75em;
}

textarea {
	width: 100%;
	min-height: 150px;
}

/*--------------------------------------------------------------
## Layouts
--------------------------------------------------------------*/
.site {
	max-width: 1400px;
	margin: 0 auto;
}

.site-content {
	padding: 3rem 2rem;
}

.content-area {
	width: 100%;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.site-header {
	background: linear-gradient(135deg, #1c69d4 0%, #0d47a1 100%);
	color: #ffffff;
	padding: 1.5rem 2rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.site-branding {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
}

.site-title {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.site-title a {
	color: #ffffff;
	text-decoration: none;
}

.site-description {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	opacity: 0.9;
	font-weight: 300;
}

.main-navigation {
	margin-top: 1rem;
}

/* Hide hamburger button on desktop */
.menu-toggle {
	display: none !important;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #ffffff;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.5rem;
	transition: background 0.3s ease;
}

.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.3);
}

.menu-toggle .screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem;
}

.main-navigation li {
	margin: 0;
}

.main-navigation a {
	color: #ffffff;
	font-weight: 500;
	padding: 0.5rem 1rem;
	display: block;
	border-radius: 4px;
	transition: all 0.3s ease;
	text-decoration: none;
}

.main-navigation a:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Hero Section
--------------------------------------------- */
.hero-section {
	background: linear-gradient(135deg, #1c69d4 0%, #0d47a1 100%);
	color: #ffffff;
	padding: 4rem 2rem;
	text-align: center;
	margin-bottom: 3rem;
	position: relative;
	overflow: hidden;
}

/* Hero with Video Background */
.hero-with-video {
	position: relative;
	min-height: 500px;
	padding: 6rem 2rem;
}

/* True Cover-style Video Background - Eliminates Letterboxing */
.hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

.hero-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;   /* 16:9 ratio */
	min-width: 177.77vh;
	min-height: 100vh;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.hero-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(28, 105, 212, 0.25) 0%, rgba(13, 71, 161, 0.25) 100%);
	z-index: 2;
}

.hero-content {
	position: relative;
	z-index: 3;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 0;
}

/* Inline Featured Numbers (replace paragraph) */
.hero-featured-numbers-inline {
	position: relative;
	text-align: center;
	width: 100%;
	height: 150px;
	margin-top: 2rem;
}

.featured-number-slide-inline {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.featured-number-inline {
	font-size: 4rem;
	font-weight: 900;
	color: #ffffff;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.featured-pitch-inline {
	font-size: 1.5rem;
	font-weight: 600;
	color: #ffd700;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	letter-spacing: 0.02em;
}

.hero-section h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
	font-weight: 700;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-section p {
	font-size: 1.25rem;
	max-width: 800px;
	margin: 0 auto 2rem;
	opacity: 0.95;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 768px) {
	.hero-section h1 {
		font-size: 2rem;
		margin-bottom: 0.5rem;
	}
	
	.hero-section p {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	
	.hero-featured-numbers-inline {
		height: 100px;
		margin-top: 1rem;
	}
	
	.featured-number-inline {
		font-size: 2.5rem;
	}
	
	.featured-pitch-inline {
		font-size: 1.1rem;
	}
}

@media screen and (max-width: 480px) {
	.hero-featured-numbers-inline {
		height: 80px;
		margin-top: 0.5rem;
	}
	
	.featured-number-inline {
		font-size: 2rem;
	}
	
	.featured-pitch-inline {
		font-size: 0.9rem;
	}
}

/* Featured Numbers Rotator (Bottom Third) */
.hero-featured-numbers {
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	text-align: center;
	width: 90%;
	max-width: 1000px;
	height: 120px;
}

.featured-number-slide {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.featured-number {
	font-size: 3rem;
	font-weight: 900;
	color: #ffffff;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
	letter-spacing: 0.05em;
	margin-bottom: 0.3rem;
	transform: scale(1);
	transition: transform 0.3s ease;
}

.featured-pitch {
	font-size: 1.2rem;
	font-weight: 600;
	color: #ffd700;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	letter-spacing: 0.02em;
}

/* Excel-Style Dense Numbers Grid */
.numbers-excel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
	gap: 1px;
	padding: 0;
	background: #d0d0d0;
	border: 1px solid #aaa;
}

.number-excel-item {
	background: white;
	padding: 4px 6px;
	text-align: center;
	font-weight: 700;
	font-size: 0.8rem;
	color: #1976d2;
	text-decoration: none;
	border: none;
	transition: background 0.1s ease;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
	line-height: 1.2;
}

.number-excel-item:hover {
	background: #e3f2fd;
	color: #0d47a1;
}

.number-excel-item:hover {
	background: #e3f2fd;
	color: #0d47a1;
}

/* Responsive adjustments for featured numbers */
@media screen and (max-width: 768px) {
	.hero-featured-numbers {
		bottom: 2%;
		width: 95%;
		height: 80px;
	}
	
	.featured-number {
		font-size: 1.8rem;
	}
	
	.featured-pitch {
		font-size: 0.85rem;
	}
	
	.hero-featured-numbers-inline {
		height: 100px;
		margin-top: 1rem;
	}
	
	.featured-number-inline {
		font-size: 2.5rem;
	}
	
	.featured-pitch-inline {
		font-size: 1.1rem;
	}
	
	.numbers-excel-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1px;
		background: #d0d0d0;
		border: 1px solid #aaa;
	}
	
	.number-excel-item {
		background: white;
		padding: 6px 8px;
		text-align: center;
		font-weight: 700;
		font-size: 0.9rem;
		color: #1976d2;
		border: none;
		min-height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media screen and (max-width: 480px) {
	.hero-featured-numbers {
		bottom: 1%;
		height: 70px;
	}
	
	.featured-number {
		font-size: 1.4rem;
	}
	
	.featured-pitch {
		font-size: 0.75rem;
	}
	
	.hero-featured-numbers-inline {
		height: 80px;
		margin-top: 0.5rem;
	}
	
	.featured-number-inline {
		font-size: 2rem;
	}
	
	.featured-pitch-inline {
		font-size: 0.9rem;
	}
	
	.numbers-excel-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1px;
		background: #d0d0d0;
		border: 1px solid #aaa;
	}
	
	.number-excel-item {
		background: white;
		padding: 5px 6px;
		text-align: center;
		font-weight: 700;
		font-size: 0.85rem;
		color: #1976d2;
		border: none;
		min-height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.hero-cta {
	display: inline-block;
	background: #ffffff;
	color: #1c69d4;
	padding: 1rem 2.5rem;
	border-radius: 50px;
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	color: #0d47a1;
}

/* Number Listings Grid
--------------------------------------------- */
.numbers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
	margin: 3rem 0;
}

.number-card {
	background: #ffffff;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.number-card:hover {
	border-color: #1c69d4;
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(28, 105, 212, 0.15);
}

.number-display {
	font-size: 2.5rem;
	font-weight: 700;
	color: #1c69d4;
	margin-bottom: 1rem;
	font-family: "Courier New", monospace;
	letter-spacing: 2px;
}

.number-card .price {
	font-size: 1.5rem;
	font-weight: 700;
	color: #2e7d32;
	margin: 1rem 0;
}

.number-card .description {
	color: #666;
	margin: 1rem 0;
	line-height: 1.6;
}

.number-card .btn-inquire {
	display: inline-block;
	background: #1c69d4;
	color: #ffffff;
	padding: 0.75rem 2rem;
	border-radius: 50px;
	font-weight: 600;
	margin-top: 1rem;
	transition: all 0.3s ease;
}

.number-card .btn-inquire:hover {
	background: #0d47a1;
	transform: scale(1.05);
}

/* Features Section
--------------------------------------------- */
.features-section {
	background: #f8f9fa;
	padding: 4rem 2rem;
	margin: 3rem 0;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.feature-box {
	text-align: center;
	padding: 2rem;
}

.feature-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: #1c69d4;
}

.feature-box h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #1a1a1a;
}

.feature-box p {
	color: #666;
	line-height: 1.6;
}

/* Footer
--------------------------------------------- */
.site-footer {
	background: #1a1a1a;
	color: #ffffff;
	padding: 3rem 2rem 1.5rem;
	margin-top: 4rem;
}

.footer-content {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-section h3 {
	color: #ffffff;
	margin-bottom: 1rem;
}

.footer-section p,
.footer-section a {
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.8;
}

.footer-section a:hover {
	color: #ffffff;
}

.site-info {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Alignments
--------------------------------------------- */
.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Responsive
--------------------------------------------- */
@media screen and (max-width: 768px) {
	.hero-with-video {
		min-height: 400px;
		padding: 4rem 2rem;
	}
	
	.hero-section h1 {
		font-size: 2rem;
	}
	
	.hero-section p {
		font-size: 1rem;
	}
	
	.numbers-grid {
		grid-template-columns: 1fr;
	}
	
	/* Responsive table for mobile */
	.numbers-table {
		font-size: 0.85rem !important;
	}
	
	.numbers-table th,
	.numbers-table td {
		padding: 8px 6px !important;
		font-size: 0.85rem !important;
	}
	
	.numbers-table th:nth-child(3),
	.numbers-table td:nth-child(3) {
		display: none; /* Hide numeric column on mobile to save space */
	}
	
	/* Show hamburger button on mobile/tablet */
	.menu-toggle {
		display: block;
	}
	
	/* Hide menu by default on mobile */
	.main-navigation ul {
		display: none;
		flex-direction: column;
		gap: 0.5rem;
		margin-top: 1rem;
		padding: 1rem 0;
	}
	
	/* Show menu when toggled */
	.main-navigation.toggled ul {
		display: flex;
	}
	
	.main-navigation a {
		padding: 0.75rem 1rem;
	}
	
	.site-content {
		padding: 2rem 1rem;
	}
	
	.site-branding {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Tablet view - optimize table */
@media screen and (min-width: 769px) and (max-width: 1200px) {
	.numbers-table {
		font-size: 0.9rem !important;
	}
	
	.numbers-table th,
	.numbers-table td {
		padding: 10px 8px !important;
	}
}