/*
Theme Name: HOTTT Theme Pro
Theme URI: https://hotttdesign.com/
Author: HOTTTdesign
Description: Reusable mobile-first business theme integrated with HOTTT Media, HOTTT SEO and HOTTT API Site Control without duplicating their output.
Version: 2.2.1
Requires at least: 7.0
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: hottt-theme-pro
*/

:root {
  --hottt-ink:#101828;
  --hottt-muted:#667085;
  --hottt-paper:#f5f7fa;
  --hottt-surface:#ffffff;
  --hottt-accent:#e8460b;
  --hottt-accent-strong:#b93807;
  --hottt-line:#e4e7ec;
  --hottt-soft:#eef2f6;
  --hottt-radius:18px;
  --hottt-radius-lg:30px;
  --hottt-shadow:0 20px 70px rgba(16,24,40,.08);
  --hottt-max:1320px;
  --hottt-content:760px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--hottt-paper);
  color:var(--hottt-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65;
  overflow-wrap:anywhere;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }

.hottt-shell {
  width:min(calc(100% - 32px),var(--hottt-max));
  margin-inline:auto;
}

h1,h2,h3,h4 {
  margin:0 0 .55em;
  color:inherit;
  font-weight:780;
  line-height:1.05;
  letter-spacing:-.045em;
}

h1 { font-size:clamp(3rem,8vw,7.3rem); }
h2 { font-size:clamp(1.65rem,3.4vw,3rem); }
h3 { font-size:clamp(1.25rem,2vw,1.7rem); }

.section-dark,
.hero-dark,
.cover-dark { color:#fff; }

.section-dark h1,
.section-dark h2,
.section-dark h3,
.hero-dark h1,
.hero-dark h2,
.hero-dark h3,
.cover-dark h1,
.cover-dark h2,
.cover-dark h3 { color:#fff; }

.section-light,
.hero-light { color:var(--hottt-ink); }

.site-header {
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--hottt-line);
  background:rgba(245,247,250,.94);
}

@supports ((backdrop-filter:blur(1px))) {
.site-header {
  background:rgba(245,247,250,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}}

.page-hero,.entry-header,.error-page { padding:clamp(4rem,9vw,9rem) 0 clamp(2rem,5vw,5rem); }

.eyebrow {
 display:inline-block;
 margin-bottom:14px;
 color:var(--hottt-accent-strong);
 font-size:.74rem;
 font-weight:850;
 letter-spacing:.14em;
 text-transform:uppercase;
}

.surface-card,.empty-state,.aside-card {
 border:1px solid var(--hottt-line);
 border-radius:var(--hottt-radius);
 background:var(--hottt-surface);
 box-shadow:0 8px 30px rgba(16,24,40,.04);
}

.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.post-card {
 overflow:hidden;
 border:1px solid var(--hottt-line);
 border-radius:var(--hottt-radius);
 background:#fff;
}

.post-card-media { display:block; aspect-ratio:16/10; overflow:hidden; }
.post-card-media img { width:100%; height:100%; object-fit:cover; }
.post-card-body { padding:clamp(20px,3vw,30px); }

.entry-header-grid,
.error-grid { display:grid; gap:clamp(30px,6vw,90px); }
.entry-header-grid { grid-template-columns:minmax(0,1fr) minmax(320px,.75fr); align-items:end; }
.entry-featured { overflow:hidden; border-radius:var(--hottt-radius-lg); }
.entry-featured img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.entry-layout { display:grid; grid-template-columns:minmax(0,var(--hottt-content)) minmax(220px,1fr); gap:clamp(36px,8vw,120px); }
.entry-content { min-width:0; }

.button-primary,
.wp-element-button,
input[type=submit] {
 display:inline-flex;
 min-height:48px;
 align-items:center;
 justify-content:center;
 padding:0 20px;
 border-radius:999px;
 background:var(--hottt-ink);
 color:#fff;
 font-weight:760;
}

:focus-visible {
 outline:3px solid #f47b4a;
 outline-offset:3px;
}

@media(max-width:1060px){
.post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.entry-header-grid,.entry-layout { grid-template-columns:1fr; }
}

@media(max-width:620px){
.hottt-shell { width:min(calc(100% - 24px),var(--hottt-max)); }
h1 { font-size:clamp(2.65rem,15vw,4.7rem); }
.post-grid { grid-template-columns:1fr; }
}

@media(prefers-reduced-motion:reduce){
html { scroll-behavior:auto; }
*,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}