/*──────────────────────────────────────────────────────────────
  Interface C  — full stylesheet
──────────────────────────────────────────────────────────────*/

/* ❶ Light-theme (default) */
:root {
  --accent: #ff4a00;
  --accent-hi: #ff6a26;
  --bg: #ececec;
  --fg: #303030;
  --un: #e0e0e0;

  /* hero images (light) */
  --h1: url('assets/hero-1.png');
  --h2: url('assets/hero-2.png');
  --h3: url('assets/hero-3-light.png');
  --h5: url('assets/hero-4-light.png');

  /* card images (light) */
  --c1: url('assets/card-1-light.png');
  --c2: url('assets/card-2-light.png');
  --c3: url('assets/card-3-light.png');
}

/* Typography tokens */
:root {
  /* Display / hero */
  --fs-900: 64px;
  /* h1 in heroes, splash headings            */
  --fs-800: 48px;
  /* h1 on regular pages, h2 in hero          */

  /* Section & sub-section */
  --fs-700: 40px;
  /* h2 large                                 */
  --fs-600: 32px;
  /* h3 / call-out headings                   */

  /* Body copy */
  --fs-500: 24px;
  /* lead paragraphs, large pull-quotes       */
  --fs-400: 18px;
  /* normal body text                         */
  --fs-300: 16px;
  /* small body text                          */

  /* UI text */
  --fs-200: 14px;
  /* buttons, form elements, small nav        */
  --fs-100: 12px;
  /* footer copyright, tertiary labels        */
  --fs-050: 10px;
  /* micro-labels, taglines under icons       */
}

/* ❷ Dark-theme overrides */
body.dark {
  --bg: #191919;
  --fg: #818181;
  --un: #222222;

  --h1: url('assets/hero-1.png');
  --h2: url('assets/hero-2.png');
  --h3: url('assets/hero-3-dark.png');
  --h5: url('assets/hero-4-dark.png');

  --c1: url('assets/card-1-dark.png');
  --c2: url('assets/card-2-dark.png');
  --c3: url('assets/card-3-dark.png');
}

/* ❸  Global reset & typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* disables landscape auto-zoom */
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--fg);
  background: var(--bg);
  scroll-behavior: smooth;
}

h1 {
  font-size: var(--fs-900);
}

h2 {
  font-size: var(--fs-700);
}

h3 {
  font-size: var(--fs-600);
}

h1,
h2,
h3 {
  font-family: 'Doto', sans-serif;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

p {
  max-width: 60ch;
  line-height: 1.5;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-400);
}

/* ❹  Theme toggle */
.themeToggle {
  z-index: 1000;
  width: 60px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--un);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}

.themeToggle svg {
  width: 22px;
  height: 22px;
  fill: var(--accent);
  pointer-events: none;
}

.themeToggle .sun {
  margin-right: auto;
  padding-left: 4px;
}

.themeToggle .moon {
  margin-left: auto;
  padding-right: 4px;
}

.themeToggle .thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .25s;
  transform: translateX(32px);
}

body.dark .themeToggle .thumb {
  transform: none;
}

.themeToggle.noanim,
.themeToggle.noanim .thumb {
  transition: none;
}

/* ❺  Fixed top bar (logo + toggle) */
.siteBar {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  max-width: 1170px;
  margin-inline: auto;
  padding: 0 1rem;
}

.siteBar .themeToggle {
  position: relative;
  margin-left: auto;
}

.logo {
  display: block;
  width: 40px;
  height: 40px;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ❻ Hero sections */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  width: 100%;
  max-width: 1170px;
  margin-inline: auto;
}

.hero::before {
  content: "";
  grid-row: 1 / 2;
  width: 100%;
  aspect-ratio: 5 / 2.7;
  max-height: 702px;
  background:
    radial-gradient(60% 35% at 50% 110%,
      rgba(0 0 0 / .16) 0%,
      rgba(0 0 0 / .08) 25%,
      transparent 26% 100%),
    var(--hero-img) center / cover no-repeat;
  background-attachment: scroll;
}

.heroContent {
  grid-row: 2 / 3;
  position: relative;
  max-inline-size: 80ch;
  margin-inline: auto;
  padding: 0rem 1rem 2rem 1rem;
}

/* per-hero art hooks */
.hero-1 {
  --hero-img: var(--h1);
}

.hero-2 {
  --hero-img: var(--h2);
}

.hero-3 {
  --hero-img: var(--h3);
}

.hero-5 {
  --hero-img: var(--h5);
}

/* ❼ Cards (3-across or stacked, equal height) */
.cardSection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 2rem;
  max-width: 1170px;
  margin-inline: auto;
  padding: 1rem 1rem 2rem 1rem;
  background: var(--bg);
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--un);
}

.cardImg {
  height: 180px;
  background: var(--card-img) center/cover no-repeat;
}

.cardBody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  flex: 1;
  align-items: center;
  text-align: center;
}

/* per-card art hooks */
.card:nth-of-type(1) {
  --card-img: var(--c1);
}

.card:nth-of-type(2) {
  --card-img: var(--c2);
}

.card:nth-of-type(3) {
  --card-img: var(--c3);
}

/* ❽ Buttons */
.btnGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.card .btnGroup {
  flex-direction: column;
  align-items: stretch;
}

.btnStack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btnLabel {
  margin-top: .5rem;
  opacity: .7;
  font-size: var(--fs-050);
}

/*── Buttons ──*/
button,
a.btn {
  /* ← added a.btn */
  padding: .75rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: 'Doto', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .10s, background .20s;
  flex: 0 0 250px;
  max-width: 250px;
  font-weight: 600;
  font-size: var(--fs-200);
  text-align: center;
  text-decoration: none;
  /* remove underline on links   */
  display: inline-block;
  /* make anchors behave like btn */
  transform: translateZ(0);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* helper pressed / active state */
button._pressed,
a.btn:active {
  background: var(--accent-hi);
  transform: scale(.95);
}

/* hover state (desktop pointers) */
@media (hover:hover) and (pointer:fine) {

  button:hover,
  a.btn:hover {
    background: var(--accent-hi);
  }
}

/* sizing inside generic .btnGroup blocks */
.btnGroup>button,
.btnGroup>a.btn {
  flex: 0 0 250px;
  max-width: 250px;
}

/* stacked buttons inside cards */
.card .btnGroup>button,
.card .btnGroup>a.btn,
.card .btnGroup>.btnStack>button,
.card .btnGroup>.btnStack>a.btn {
  width: 100%;
  flex: 0 0 auto;
  min-width: 208px;
}

/* download-section layout overrides */
.downloads .btnGroup {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  flex-wrap: nowrap;
  /* never wrap on wide viewports */
  padding-top: 1.5rem;
}

/* ⬇︎ NEW: let each button flex-shrink so both fit on one line */
.downloads .btnGroup>button,
.downloads .btnGroup>a.btn {
  flex: 1 1 0;
  /* grow + shrink equally, zero preferred-width */
  min-width: 240px;
  /* won’t shrink smaller than this */
}

/* ❾ Footer */
footer {
  text-align: center;
  font-family: 'Doto', sans-serif;
  font-weight: 600;
  padding: 2rem 1rem;
  opacity: .6;
}

footer a {
  color: var(--accent);
  text-decoration: none;
  transition: color .25s;
}

footer a:hover,
footer a:focus {
  color: var(--accent-hi);
}

footer,
footer .footLegal {
  display: block;
  margin-top: .5rem;
  max-width: 70ch;
  margin-inline: auto;
  font-size: var(--fs-100);
}

/* ❿ Hover effects */
@media (hover:hover) and (pointer:fine) {
  button:hover {
    background: var(--accent-hi);
  }
}

/* ⓫ Responsive breakpoints */

/* tablets in portrait */
@media (max-width:768px) {
  :root {
    --fs-900: 40px;
    --fs-800: 32px;
    --fs-700: 28px;
    --fs-600: 24px;
    --fs-500: 20px;
    --fs-400: 16px;
    --fs-200: 16px;
  }

  .cardBody {
    justify-content: center;
  }

  .cardSection {
    grid-template-columns: 1fr;
  }
}

/* phones in portrait */
@media (max-width:500px) {
  .downloads .btnGroup {
    flex-direction: column;
    align-items: stretch;
  }

  .downloads .btnGroup>button,
  .downloads .btnGroup>a.btn {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  p {
    max-width: 30ch;
  }

  footer .footLegal {
    max-width: 50ch;
  }
}

/* phones in landscape */
@media (orientation: landscape) and (max-height: 430px) and (max-width : 844px) and (hover:none) {
  .hero::before {
    aspect-ratio: 5 / 3;
    max-height: 280px;
    background-size: cover, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
  }

  footer,
  footer .footLegal {
    max-width: 75ch;
    margin-inline: auto;
  }
}

/* tablets in landscape */
@media (min-width: 700px) and (max-width: 1266px) and (orientation: landscape) and (hover: none) {
  .hero::before {
    aspect-ratio: 9 / 4.2;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* 16:9 tablets in landscape */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1366px) and (min-aspect-ratio: 16/9) and (hover: none) {
  .hero::before {
    aspect-ratio: 9 / 3.8;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/*──────────────────────────────────────────────────────────────
  Portrait-phone hero override – 1 : 1 artwork
──────────────────────────────────────────────────────────────*/
:root {
  /* square-crop hero images (LIGHT) */
  --h1-sq: url('assets/hero-1-sq.png');
  --h2-sq: url('assets/hero-2-sq.png');
  --h3-sq: url('assets/hero-3-sq.png');
  --h5-sq: url('assets/hero-4-sq.png');
}

body.dark {
  /* square-crop hero images (DARK) */
  --h1-sq: url('assets/hero-1-sq.png');
  --h2-sq: url('assets/hero-2-sq.png');
  --h3-sq: url('assets/hero-3-sq-dark.png');
  --h5-sq: url('assets/hero-4-sq-dark.png');
}

/* phones in portrait */
@media (max-width:500px) and (orientation:portrait) {

  /* 1) square frame (always fills width) */
  .hero::before {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
  }

  /* 2) per-section art substitutions */
  .hero-1 {
    --hero-img: var(--h1-sq);
  }

  .hero-2 {
    --hero-img: var(--h2-sq);
  }

  .hero-3 {
    --hero-img: var(--h3-sq);
  }

  .hero-5 {
    --hero-img: var(--h5-sq);
  }
}