/* Light refresh layered on top of the original theme styles. */

:root {
  --flux-orange: #e96a24;
  --soft-shadow: 0 1px 2px rgba(17, 16, 22, 0.06), 0 8px 24px -12px rgba(17, 16, 22, 0.18);
  --lift-shadow: 0 2px 4px rgba(17, 16, 22, 0.06), 0 18px 40px -16px rgba(17, 16, 22, 0.28);
}
:root[dark] {
  --soft-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --lift-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
}

html { scroll-behavior: smooth; }
::selection { background: var(--flux-orange); color: #fff; }
:focus-visible { outline: 2px solid var(--flux-orange); outline-offset: 3px; border-radius: 4px; }

/* Calmer, better-balanced headings */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.hero__title { font-size: 60px; letter-spacing: -0.01em; line-height: 1.05; }
.post-title, .page-title, .section__title { letter-spacing: -0.01em; }

/* Desktop nav: an orange underline replaces the old yellow dot */
@media (min-width: 1025px) {
  .nav__item:not(.dropdown) > .nav__link { position: relative; }
  .nav__item:not(.dropdown) > .nav__link::before { content: none; }
  .nav__item:not(.dropdown) > .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--flux-orange); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  .nav__item:not(.dropdown) > .nav__link:hover::after,
  .nav__item:not(.dropdown) > .nav__link.active-link::after { transform: scaleX(1); }
}

/* Images and cards: softer depth, gentle hover */
.hero__image img, .hero img { border-radius: 14px; box-shadow: var(--soft-shadow); }
.project__image, .article__image { border-radius: 12px; box-shadow: var(--soft-shadow); transition: box-shadow .3s ease; }
.project__image img, .article__image img { border-radius: 12px; transition: transform .5s ease; }
.project:hover .project__image, .article:hover .article__image { box-shadow: var(--lift-shadow); }
.project:hover .project__image img, .article:hover .article__image img { transform: scale(1.03); }
.project__title, .article__title { transition: color .2s ease; }
.project:hover .project__title, .article:hover .article__title { color: var(--flux-orange); }

/* Buttons */
.button { border-radius: 10px; transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-1px); box-shadow: var(--soft-shadow); }

/* Footer links */
.footer__nav-link { transition: color .2s ease; }
.footer__nav-link:hover { color: var(--flux-orange); }

@media (max-width: 1024px) { .hero__title { font-size: 48px; } }
@media (max-width: 576px)  { .hero__title { font-size: 34px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project__image img, .article__image img, .nav__link::after, .button { transition: none; }
  .project:hover .project__image img, .article:hover .article__image img { transform: none; }
}

/* ------------------------------------------------------------------
   Second pass: one brand color, sticky header, card surfaces, warmer hero
   ------------------------------------------------------------------ */

/* One brand color everywhere: the logo's orange, in light and dark mode */
:root, :root[dark] {
  --brand-color: #e96a24;
  --button-background-color: #e96a24;
  --button-background-hover: #d45a17;
  --card-bg: var(--background-color);
}
:root {
  --text-color: #34343d;
  --card-border: #e9e9ef;
  --band-bg: #f6f6f9;
}
:root[dark] {
  --text-color: #b4b4be;
  --background-color: #0f0f14;
  --background-alt-color: #18181f;
  --card-bg: #15151b;
  --card-border: #24242c;
  --band-bg: #121218;
}
.button--primary, .button--primary:hover { color: #fff; }
.top:hover { color: #fff; }
.article__title a, .project__info .project__title a {
  background-image: linear-gradient(rgba(233, 106, 36, 0.35), rgba(233, 106, 36, 0.35));
}

/* Sticky header with a frosted background */
html { scroll-padding-top: 100px; }
.header { position: sticky; top: 0; z-index: 50; }
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--background-color) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--card-border);
}
.header .header__inner { padding-top: 20px; padding-bottom: 20px; }

/* Hero: a warm glow behind the image and headline */
.hero { position: relative; isolation: isolate; padding-top: 48px; }
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 760px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 380px at 22% 50%, rgba(233, 106, 36, 0.16), transparent 70%),
    radial-gradient(520px 320px at 80% 35%, rgba(254, 200, 36, 0.10), transparent 70%);
}
.hero__image { border-radius: 20px; box-shadow: var(--lift-shadow); }
.hero__image img { border-radius: 20px; }

/* Orange accent bar under section and page titles */
.section__title::after, .page-title::after {
  content: ""; display: block; width: 56px; height: 4px; margin: 20px auto 0; border-radius: 4px;
  background: linear-gradient(90deg, #e96a24, #fec824);
}

/* Feature cards */
.project { display: flex; }
.project__content {
  flex: 1; padding: 12px 12px 24px; border-radius: 18px;
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--soft-shadow);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.project:hover .project__content { border-color: rgba(233, 106, 36, 0.45); box-shadow: var(--lift-shadow); }
.project__image, .project:hover .project__image { box-shadow: none; }
.project__image { height: auto; }
.project__info { margin-top: 20px; padding: 0 8px; }

/* Blog cards (drawn behind each article so the grid spacing stays intact) */
.article { position: relative; isolation: isolate; }
.article::before {
  content: ""; position: absolute; inset: -12px 4px -16px; z-index: -1; border-radius: 18px;
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--soft-shadow);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.article:hover::before { border-color: rgba(233, 106, 36, 0.45); box-shadow: var(--lift-shadow); }
.article__image, .article:hover .article__image { box-shadow: none; }

/* Tags as orange pills */
.article-tags__box .article__tag {
  border-radius: 999px; color: var(--brand-color);
  background-color: color-mix(in srgb, var(--brand-color) 12%, transparent);
  transition: background-color .2s ease, color .2s ease;
}
.article-tags__box .article__tag:hover { color: #fff; background-color: var(--brand-color); }

/* Home page: the blog section sits on a soft band */
.section.blog { background: var(--band-bg); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }

/* Footer */
.footer { background: linear-gradient(180deg, var(--band-bg), var(--background-color) 70%); border-top: 1px solid var(--card-border); }
.footer .footer__inner { border-top: none; }
.footer__author-name { letter-spacing: -0.01em; }

@media (max-width: 1024px) {
  .header .header__inner { padding-top: 14px; padding-bottom: 14px; }
  .hero { padding-top: 32px; }
}