/*
Theme Name: Construction Calculators
Theme URI: https://example.com/construction-calculators
Author: Construction Calculators
Author URI: https://example.com/
Description: A modern, fast, SaaS-style custom theme for a US construction calculators site. Hero tools are board foot and gravel calculators. Content is edited in the normal WordPress editor. Tools are a custom post type, so a new tool is a duplicate post, not code.
Version: 2.4.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: construction-calculators
Tags: custom-colors, custom-menu, featured-images, full-width-template, translation-ready
*/

/* v1.1 pro redesign: white header, no list bullets anywhere in nav, inputs left + sticky result right on desktop, homepage = one hero tool only. */
:root{
  --cc-bg:#f8fafc;
  --cc-surface:#ffffff;
  --cc-ink:#0f172a;
  --cc-muted:#475569;
  --cc-border:#e2e8f0;
  --cc-amber:#f59e0b;
  --cc-amber-dark:#b45309;
  --cc-teal:#0f766e;
  --cc-radius:16px;
  --cc-shadow:0 10px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--cc-bg);color:var(--cc-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6}
a{color:var(--cc-teal);text-decoration:none}
a:hover{text-decoration:underline}
.cc-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.cc-header{background:#ffffff;color:#0f172a;border-bottom:1px solid #e2e8f0;box-shadow:0 2px 12px rgba(15,23,42,.06)}
.cc-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.cc-logo{font-weight:800;font-size:22px;color:#0f172a;letter-spacing:-.02em}
.cc-logo span{color:var(--cc-amber)}
.cc-nav{display:flex;align-items:center}
.cc-nav ul{list-style:none!important;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}.cc-nav li{list-style:none!important;margin:0;padding:0}.cc-nav a{color:#334155;font-weight:600;padding:8px 12px;border-radius:999px}.cc-nav a:hover{color:#ffffff!important;background:#0f172a!important;text-decoration:none}
.cc-nav a:hover{color:#fff}
.cc-hero{padding:44px 0 28px}
.cc-hero h1{font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}
.cc-hero p{color:var(--cc-muted);font-size:18px;max-width:720px;margin:0}
.cc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:24px 0}
@media(max-width:760px){.cc-grid{grid-template-columns:1fr}.cc-nav{display:flex;align-items:center}}
.cc-card{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);padding:22px}
.cc-card h2{margin-top:0}
.cc-content{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:var(--cc-radius);padding:28px;margin:24px 0}
.cc-content img{max-width:100%;height:auto;border-radius:12px}
.cc-content h2{margin-top:32px}
.cc-meta{color:var(--cc-muted);font-size:14px}
.cc-footer{border-top:1px solid var(--cc-border);padding:28px 0;color:var(--cc-muted);font-size:14px;margin-top:40px}
.cc-button{display:inline-block;background:var(--cc-amber);color:#111827!important;font-weight:800;padding:12px 18px;border-radius:999px;text-decoration:none!important}
.cc-button:hover{background:#0f172a!important;color:#ffffff!important;transform:translateY(-1px)}
.cc-disclaimer{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:14px 16px;font-size:14px;color:#78350f}
.wp-block-image img{border-radius:12px}

.cc-cta{background:#0f172a;color:#fff!important;font-weight:800;padding:10px 16px;border-radius:999px;text-decoration:none!important;white-space:nowrap}
.cc-menu-btn{display:none;border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:8px 14px;font-weight:700}
@media(max-width:760px){.cc-nav{display:none}.cc-nav.cc-nav-open{display:block;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid #e2e8f0;padding:12px 20px}.cc-nav.cc-nav-open ul{flex-direction:column}.cc-cta{display:none}.cc-menu-btn{display:block}}
.cc-footer nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}.cc-footer nav li{list-style:none}

.cc-social{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.cc-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e2e8f0;color:#0f172a;font-weight:800;text-decoration:none!important}
.cc-social a:hover{background:#0f172a;color:#fff}
.cc-social-note{font-size:12px;color:#64748b;margin:0 0 8px}

/* v1.4: hide-on-scroll header, footer grid, FAQ accordion, homepage animations */
.cc-header{position:sticky;top:0;z-index:50;transition:transform .35s ease, box-shadow .35s ease}
.cc-header-hidden{transform:translateY(-100%)}
.cc-footer{background:#0f172a;color:#cbd5e1;margin-top:32px}
.cc-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding-top:22px;padding-bottom:16px}
.cc-footer .cc-logo{color:#fff}.cc-footer .cc-logo span{color:#f59e0b}
.cc-footer-col h3{color:#fff;margin:0 0 10px;font-size:15px}
.cc-footer-col ul{list-style:none;margin:0;padding:0}
.cc-footer-col li{list-style:none;margin:0 0 6px}
.cc-footer-col a,.cc-footer-col nav a{color:#cbd5e1;text-decoration:none}
.cc-footer-col a:hover{color:#fff;text-decoration:underline}
.cc-footer-bottom{border-top:1px solid #1e293b;padding:10px 0}
.cc-footer-bottom p{margin:0;color:#94a3b8;font-size:14px}
.cc-social svg{width:20px;height:20px;fill:currentColor}
.cc-social a{background:#1e293b;color:#fff}
.cc-social a:hover{background:#f59e0b;color:#0f172a}
@media(max-width:760px){.cc-footer-grid{grid-template-columns:1fr}}
/* FAQ accordion: use <details class="cc-faq"> in page content */
.cc-faq{border:1px solid #e2e8f0;border-radius:14px;margin:0 0 12px;background:#fff;overflow:hidden;transition:box-shadow .25s ease, border-color .25s ease}
.cc-faq[open]{border-color:#f59e0b;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.cc-faq summary{cursor:pointer;list-style:none;font-weight:700;padding:16px 20px;display:flex;justify-content:space-between;gap:16px}
.cc-faq summary::-webkit-details-marker{display:none}
.cc-faq summary::after{content:"+";color:#f59e0b;font-size:22px;line-height:1;transition:transform .25s ease}
.cc-faq[open] summary::after{transform:rotate(45deg)}
.cc-faq p{padding:0 20px 18px;margin:0;color:#475569;animation:cc-faq-in .3s ease}
@keyframes cc-faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Homepage animations */
@keyframes cc-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cc-hero{animation:cc-fade-up .6s ease both}
.cc-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.cc-reveal.cc-visible{opacity:1;transform:none}
.cc-card,.cc-calc{transition:transform .25s ease, box-shadow .25s ease}
.cc-card:hover,.cc-calc:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.10)}
@media(prefers-reduced-motion:reduce){.cc-reveal{opacity:1;transform:none;transition:none}.cc-hero{animation:none}}

/* v1.5 compact footer: footer brand text is short, no extra spacer sections */
.cc-footer-brand p{font-size:14px;line-height:1.5;margin:8px 0}

/* v1.9: designed homepage content, not plain paragraphs */
.cc-content{font-size:17px;line-height:1.75;color:#334155}
.cc-content h2{font-size:28px;line-height:1.25;color:#0f172a;margin:40px 0 14px;padding-bottom:10px;border-bottom:3px solid #f59e0b}
.cc-content h3{font-size:20px;color:#0f172a;margin:28px 0 10px}
.cc-content p{margin:0 0 16px}
.cc-formula{background:#0f172a;color:#fff;border-radius:16px;padding:22px 24px;font-size:20px;font-weight:700;text-align:center;margin:20px 0}
.cc-formula span{color:#fbbf24}
.cc-callout{background:#fffbeb;border-left:5px solid #f59e0b;border-radius:0 14px 14px 0;padding:18px 20px;margin:20px 0}
.cc-callout strong{color:#92400e}
.cc-table{width:100%;border-collapse:collapse;margin:18px 0;background:#fff;border-radius:12px;overflow:hidden}
.cc-table th{background:#0f172a;color:#fff;text-align:left;padding:12px 14px;font-size:15px}
.cc-table td{padding:11px 14px;border-bottom:1px solid #e2e8f0;font-size:15px}
.cc-table tr:nth-child(even) td{background:#f8fafc}
.cc-steps{counter-reset:step;list-style:none;margin:16px 0;padding:0}
.cc-steps li{counter-increment:step;position:relative;padding:14px 16px 14px 56px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin:0 0 10px}
.cc-steps li::before{content:counter(step);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:#f59e0b;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.cc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}
.cc-cards a{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;text-decoration:none!important;color:#0f172a;font-weight:700;transition:transform .2s ease, box-shadow .2s ease}
.cc-cards a:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.10);border-color:#f59e0b}
.cc-cards a span{display:block;font-weight:400;color:#64748b;font-size:14px;margin-top:4px}
@media(max-width:760px){.cc-cards{grid-template-columns:1fr}.cc-content{font-size:16px}.cc-content h2{font-size:24px}}

/* v2.0 fix: Related cards must fill both columns, no empty right side */
.cc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.cc-cards p{display:contents;margin:0}
.cc-cards a{width:100%;box-sizing:border-box;min-width:0}
@media(max-width:760px){.cc-cards{grid-template-columns:1fr}}

/* v2.1: professional Contact Us design */
.cc-contact-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start;margin:20px 0}
.cc-contact-form{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.cc-contact-info{display:grid;gap:14px}
.cc-contact-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px}
.cc-contact-card h3{margin:0 0 6px;font-size:17px}
.cc-contact-card p{margin:0;color:#475569;font-size:15px}
.wpcf7-form label{display:block;font-weight:700;font-size:14px;margin:12px 0 6px;color:#0f172a}
.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:16px;background:#fff}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
.wpcf7-form textarea{min-height:140px;resize:vertical}
.wpcf7-form input[type="submit"]{background:#0f172a;color:#fff;border:0;border-radius:999px;padding:13px 24px;font-weight:800;font-size:16px;cursor:pointer;margin-top:16px}
.wpcf7-form input[type="submit"]:hover{background:#f59e0b;color:#111827}
.wpcf7-response-output{border-radius:12px!important;padding:12px 16px!important}
@media(max-width:760px){.cc-contact-layout{grid-template-columns:1fr}}

/* v2.1 live patch, now in theme source too: wpautop <br> tags between cards were becoming grid items */
.cc-cards br{display:none}

/* v2.3: calculators must never be hidden by scroll reveal, on homepage or gravel page */
.cc-calc, .cc-calc.cc-reveal{opacity:1!important;transform:none!important;transition:none}

/* v2.4: content sections (which contain the calculators) must never be hidden by scroll reveal */
.cc-content, .cc-content.cc-reveal{opacity:1!important;transform:none!important;transition:none}