/* mobile.css — Mil-Multiplier mobile optimizations
   Loaded via: <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
   Desktop layout is completely unaffected. */

/* === GLOBAL SPACING === */
body {
    padding-top: 60px; /* Shorter header on mobile */
}

.container {
    padding: 0 14px;
}

/* === HEADER === */
.sticky-header {
    height: 56px;
}

.header-container {
    padding: 0 12px;
}

.logo a {
    font-size: 1.15rem;
}

.nav-btn {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.dropdown-menu {
    min-width: 220px;
    max-height: 70vh;
    right: 0;
    left: auto;
}

.dropdown-menu a {
    padding: 8px 10px;
    font-size: 0.88rem;
}

/* === HERO SECTIONS === */
.hero,
.page-header,
.article-header {
    padding: 24px 0;
}

.hero h1,
.hero h2,
.page-header h1 {
    font-size: 1.5rem;
    line-height: 1.3;
}

.hero p,
.page-header p {
    font-size: 0.92rem;
}

/* === FORM ELEMENTS === */
.form-section,
.calc-card {
    padding: 16px;
    margin-bottom: 16px;
}

.form-section h3 {
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    font-size: 0.88rem;
    margin-bottom: 4px;
}

.form-group select,
.form-group input {
    padding: 10px;
    font-size: 0.95rem;
}

.help-text {
    font-size: 0.78rem;
}

button, .calc-btn, [onclick] {
    padding: 12px 16px;
    font-size: 0.95rem;
}

/* === RESULT DISPLAYS === */
.result-card {
    padding: 16px;
    margin-bottom: 14px;
}

.result-card h4 {
    font-size: 0.95rem;
}

.result-value {
    font-size: 1.8rem;
}

.result-subtitle {
    font-size: 0.8rem;
    line-height: 1.5;
}

.result-box {
    padding: 16px;
}

.breakdown {
    padding: 14px;
}

.breakdown-item {
    padding: 6px 0;
    font-size: 0.88rem;
}

/* === HOMEPAGE CARDS === */
.card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.tool-card {
    padding: 16px;
}

.tool-card .card-title {
    font-size: 1rem;
}

.tool-card .card-desc {
    font-size: 0.82rem;
}

/* Category sections */
.cat-header h2 {
    font-size: 1.15rem;
}

/* === BLOG === */
.blog-card {
    padding: 14px;
}

.blog-title {
    font-size: 1rem;
}

/* Article content */
.article-body p,
.seo-content p,
.info-section p,
.content p {
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.seo-content h2,
.info-section h2 {
    font-size: 1.15rem;
    margin-top: 20px;
}

.seo-content h3,
.info-section h3 {
    font-size: 1.05rem;
}

/* === CTA BOXES === */
.cta-box,
.callout,
.example-card {
    padding: 14px;
    margin: 14px 0;
}

.cta-box h3 {
    font-size: 1rem;
}

.cta-box p {
    font-size: 0.85rem;
}

.cta-button, .cta-btn {
    padding: 10px 16px;
    font-size: 0.9rem;
}

/* === OFFICIAL SOURCES & FINANCE LOCATOR === */
#official-sources {
    padding: 14px;
    margin: 16px 0;
}

#official-sources h3 {
    font-size: 0.92rem;
}

#official-sources a {
    font-size: 0.8rem;
    padding: 5px 0;
}

/* === FAQ SECTIONS === */
details summary {
    font-size: 1rem;
    padding: 12px;
}

details p {
    font-size: 0.88rem;
}

/* === AUTHORITY SECTIONS (blog personal sections) === */
.article-body > div[style*="border"],
div[style*="background:rgba(90,107,78"] {
    padding: 16px;
    margin: 16px 0;
}

/* === FOOTER === */
footer {
    padding: 20px 0;
}

footer a {
    font-size: 0.78rem;
    margin: 0 5px;
}

/* === KO-FI BOX === */
div[style*="ko-fi"],
div[style*="background:linear-gradient(135deg,rgba(90,107,78"] {
    padding: 16px;
    margin: 16px 0;
}

/* === TABLES (pay charts, base pages) === */
table {
    font-size: 0.82rem;
}

th, td {
    padding: 6px 8px;
}

/* === BREADCRUMBS === */
.breadcrumb {
    font-size: 0.78rem;
    padding: 8px 0;
}

/* === NEXT STEPS CTA === */
.next-steps {
    padding: 14px;
}

.next-steps h3 {
    font-size: 1rem;
}

/* === MISC TIGHTENING === */
h2 {
    font-size: 1.2rem;
}

h3 {
    font-size: 1.05rem;
}

/* Reduce vertical spacing between sections */
section {
    margin-bottom: 16px;
}

/* Tighter margins on info/seo content blocks */
.info-section,
.seo-content {
    padding: 16px;
}

/* Data badge */
span[style*="2026 Rates Verified"],
span[style*="Rates Verified"] {
    font-size: 0.65rem;
}

/* Print button if present */
.print-btn {
    font-size: 0.85rem;
    padding: 8px 14px;
}