/*
Theme Name: Uptime
Theme URI: https://uptimebusinessproducts.com
Author: Uptime Business Products
Description: Custom theme for Uptime Business Products, built from the 2026 website redesign mockup. Page layouts live in each page's Custom HTML block; this theme supplies the header, footer, fonts, responsive rules, SEO tags and the quote-request form handler.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: uptime
*/

:root {
  --ink: #0B0F14;
  --paper: #F6F5F2;
  --accent: #FF6B2C;
  --accent-dark: #e35a1e;
  --signal: #37D3A0;
  --signal-light: #6FE3BE;
  --slate: #5B6672;
  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-body); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { font-family: var(--font-head); margin: 0; letter-spacing: -0.01em; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 1000; background: #fff; color: var(--ink); padding: 10px 14px; width: auto; height: auto; clip: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.1); position: relative; z-index: 50; }
.site-header__inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 56px; }
.site-logo img { height: 26px; width: auto; display: block; }
.primary-nav { flex: 1; display: flex; justify-content: center; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav > ul { display: flex; align-items: center; gap: 28px; }
.primary-nav a { color: rgba(246,245,242,.85); font-size: 14.5px; font-weight: 500; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { color: #fff; }
.primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.primary-nav li { position: relative; }
.primary-nav .sub-menu { display: none; position: absolute; left: -16px; top: 100%; padding: 14px 0 10px; min-width: 260px; background: var(--ink); border: 1px solid rgba(255,255,255,.1); border-top: 0; border-radius: 0 0 6px 6px; }
.primary-nav .sub-menu a { display: block; padding: 8px 18px; font-size: 14px; border: 0 !important; font-weight: 500 !important; }
.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { display: block; }
.header-actions { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.header-phone { color: #fff; font-weight: 600; font-size: 14.5px; }
.btn-quote { display: inline-block; background: var(--accent); color: var(--ink) !important; font-weight: 700; padding: 11px 20px; border-radius: 3px; font-size: 14px; }
.btn-quote:hover { background: var(--accent-dark); }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 3px; padding: 8px 12px; font: 600 14px var(--font-body); cursor: pointer; }

/* ---------- Page content (layouts come from the Custom HTML block) ---------- */
.uptime-page { max-width: 1440px; margin: 0 auto; background: var(--paper); color: var(--ink); overflow-x: hidden; }
.uptime-page img { max-width: 100%; }
.uptime-page form button[type=submit] { border: 0; cursor: pointer; font-family: inherit; }
.uptime-page input[type=file] { font: 14px var(--font-body); }
.uptime-notice { max-width: 1440px; margin: 0 auto; padding: 18px 56px; font-weight: 600; }
.uptime-notice--ok { background: rgba(55,211,160,.15); color: #0B5B43; }
.uptime-notice--err { background: rgba(255,107,44,.15); color: #8A2E07; }
.uptime-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Generic page (privacy policy etc.) */
.entry-default { max-width: 820px; margin: 0 auto; padding: 64px 24px; line-height: 1.65; }
.entry-default h1 { font-size: 36px; margin-bottom: 24px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(246,245,242,.8); }
.site-footer__inner { max-width: 1440px; margin: 0 auto; padding: 56px 56px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-logo img { height: 24px; width: auto; display: block; margin-bottom: 16px; }
.footer-tagline { font-size: 13px; color: rgba(246,245,242,.6); max-width: 34ch; line-height: 1.6; margin: 0; }
.footer-heading { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: rgba(246,245,242,.45); font-weight: 600; margin: 0 0 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.footer-links a { color: rgba(246,245,242,.8); }
.footer-links a:hover { color: #fff; }
.footer-phone { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: #fff; display: block; margin-bottom: 6px; }
.footer-email { font-size: 13.5px; color: rgba(246,245,242,.8); display: block; margin-bottom: 14px; }
.footer-hours { font-size: 12.5px; color: rgba(246,245,242,.5); margin: 0; }
.footer-meta { font-size: 12.5px; color: rgba(246,245,242,.5); margin: 10px 0 0; line-height: 1.6; }
.footer-meta b { color: rgba(246,245,242,.75); }
.footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(246,245,242,.4); display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(246,245,242,.55); }

/* ---------- Responsive: adapts the mockup's fixed 1440px layouts ---------- */
@media (max-width: 1180px) {
  .primary-nav > ul { gap: 18px; }
  .header-phone { display: none; }
}
@media (max-width: 980px) {
  .site-header__inner { padding: 16px 20px; flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
  .primary-nav { order: 3; flex-basis: 100%; display: none; }
  .site-header.is-open .primary-nav { display: block; }
  .primary-nav > ul { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0; }
  .primary-nav > ul > li { width: 100%; border-top: 1px solid rgba(255,255,255,.08); }
  .primary-nav a { display: block; padding: 12px 0; }
  .primary-nav .sub-menu { display: block; position: static; border: 0; padding: 0 0 8px 14px; min-width: 0; }
  .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { border-bottom: 0; }
  .header-actions .btn-quote { padding: 9px 14px; font-size: 13px; }

  /* Section padding and multi-column grids collapse */
  .uptime-page [style*="padding:56px"], .uptime-page [style*="padding:64px 56px"], .uptime-page [style*="padding:52px 56px"],
  .uptime-page [style*="padding:48px 56px"], .uptime-page [style*="padding:56px 56px"], .uptime-page [style*="padding:64px 56px 52px"],
  .uptime-page [style*="padding:0 56px"], .uptime-page [style*="padding:34px 56px"], .uptime-page [style*="padding:100px 56px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .uptime-page [style*="padding:56px;"], .uptime-page [style*="padding:56px\""] { padding: 40px 20px !important; }
  .uptime-page [style*="grid-template-columns"]:not([style*="190px"]) { grid-template-columns: 1fr !important; }
  .uptime-page [style*="grid-template-columns:repeat(4"]:not([style*="190px"]), .uptime-page [style*="grid-template-columns:repeat(5"]:not([style*="190px"]),
  .uptime-page [style*="grid-template-columns: repeat(4"]:not([style*="190px"]), .uptime-page [style*="grid-template-columns:repeat(3"]:not([style*="190px"]) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  /* Label/value spec rows keep two columns */
  .uptime-page [style*="grid-template-columns:190px 1fr"] { grid-template-columns: 120px 1fr !important; gap: 12px !important; }
  .uptime-page [style*="grid-template-columns:210px 1fr"]:not([style*="190px"]), .uptime-page [style*="grid-template-columns:180px 1fr"]:not([style*="190px"]),
  .uptime-page [style*="grid-template-columns:170px 1fr"]:not([style*="190px"]) { grid-template-columns: 120px 1fr !important; gap: 12px !important; }
  .uptime-page [style*="grid-template-columns:80px 1fr"]:not([style*="190px"]) { grid-template-columns: 56px 1fr !important; gap: 16px !important; }
  /* Side-by-side comparison tables scroll sideways instead of collapsing */
  .uptime-page [style*="grid-template-columns:190px repeat"] { min-width: 680px; }
  .uptime-page div:has(> [style*="grid-template-columns:190px repeat"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .uptime-page [style*="max-width:"] { max-width: 100% !important; }
  .uptime-page [style*="height:560px"] { height: auto !important; min-height: 460px; padding-bottom: 48px; }
  .uptime-page [style*="height:440px"], .uptime-page [style*="height:360px"] { height: 300px !important; }
  .uptime-page h1 { font-size: clamp(30px, 7vw, 46px) !important; }
  .uptime-page h2 { font-size: clamp(22px, 5.5vw, 30px) !important; }
  .uptime-page [style*="justify-content:space-between"] { flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__inner { padding: 40px 20px 24px; }
  .uptime-notice { padding: 16px 20px; }
}
@media (max-width: 560px) {
  .uptime-page [style*="grid-template-columns"]:not([style*="190px"]) { grid-template-columns: 1fr !important; }
  .uptime-page [style*="grid-template-columns:190px 1fr"] { grid-template-columns: 1fr !important; gap: 4px !important; }
  .uptime-page [style*="grid-template-columns:210px 1fr"]:not([style*="190px"]), .uptime-page [style*="grid-template-columns:180px 1fr"]:not([style*="190px"]),
  .uptime-page [style*="grid-template-columns:170px 1fr"]:not([style*="190px"]) { grid-template-columns: 1fr !important; gap: 4px !important; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-actions .btn-quote { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }