/*
 * Oil on Canvas visual polish
 * A light, tactile layer over Nordicwall's layout and responsive system.
 */

:root {
  color-scheme: light;
  --paper: #f4f0e7;
  --paper-raised: #fbf8f1;
  --paper-deep: #e8e0d2;
  --ink: #292720;
  --ink-soft: #625f56;
  --terracotta: #a4573c;
  --terracotta-deep: #7f3e2b;
  --sage: #68715e;
  --white: #fffdf8;
  --black: #292720;
  --dark: #292720;
  --gray: #a69f92;
  --light: #d9d1c4;
  --lighter: #e9e3d8;
  --lightest: #f8f4ec;
  --page-bg: var(--paper);
  --color: var(--terracotta);
  --border-color: #d6cec1;
  --text-color: var(--ink);
  --text-color-light: var(--ink-soft);
  --headings-color: var(--ink);
  --link-color: var(--ink);
  --link-color-hover: var(--terracotta-deep);
  --nav-link-color: var(--ink);
  --nav-link-color-hover: var(--terracotta-deep);
  --logo-color: var(--ink);
  --backdrop-bg: rgba(248, 244, 235, 0.86);
  --backdrop-filter: blur(18px) saturate(82%);
  --image-placeholder: var(--paper-deep);
  --shadow: 0 12px 36px rgba(48, 39, 27, 0.09);
  --shadow-submenu: 0 14px 40px rgba(48, 39, 27, 0.12);
  --transition: cubic-bezier(0.2, 0.74, 0.24, 1);
  --border-radius: 3px;
}

html {
  background: var(--paper);
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(164, 87, 60, 0.07), transparent 28rem),
    radial-gradient(circle at 92% 32%, rgba(104, 113, 94, 0.08), transparent 34rem),
    linear-gradient(115deg, rgba(255, 255, 255, 0.25), transparent 38%);
  background-attachment: fixed;
}

body::before {
  background-image:
    repeating-radial-gradient(circle at 17% 29%, rgba(55, 45, 32, 0.12) 0 0.45px, transparent 0.6px 3.4px),
    repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 5px);
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.13;
  pointer-events: none;
  position: fixed;
  z-index: 9999;
}

::selection {
  background: rgba(164, 87, 60, 0.8);
  color: var(--paper-raised);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a,
button,
.btn,
img {
  -webkit-tap-highlight-color: transparent;
}

.header {
  top: 0.75rem;
}

.header__content {
  background: rgba(251, 248, 241, 0.88);
  border: 1px solid rgba(113, 102, 85, 0.18);
  box-shadow: 0 5px 24px rgba(48, 39, 27, 0.07);
  -webkit-backdrop-filter: blur(14px) saturate(92%);
  backdrop-filter: blur(14px) saturate(92%);
}

.header__logo,
.footer__logo {
  letter-spacing: -0.035em;
}

.header__logo::after {
  background: linear-gradient(90deg, var(--terracotta), var(--sage));
  border-radius: 100%;
  bottom: 0.7rem;
  content: "";
  height: 2px;
  left: 0;
  opacity: 0.68;
  position: absolute;
  transform: rotate(-0.5deg) scaleX(0.38);
  transform-origin: left;
  transition: transform 0.45s var(--transition), opacity 0.3s ease;
  width: 100%;
}

.header__logo:hover::after,
.header__logo:focus-visible::after {
  opacity: 1;
  transform: rotate(-0.5deg) scaleX(1);
}

.navbar .navbar__menu li a,
.navbar .navbar__menu li span[aria-haspopup="true"] {
  letter-spacing: 0.02em;
}

.navbar_mobile_sidebar,
.navbar_mobile_overlay {
  background: var(--paper-raised);
}

.navbar_mobile_sidebar__overlay {
  background: rgba(41, 39, 32, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.btn,
[type="button"],
[type="submit"],
button,
.header__btn {
  border-color: rgba(41, 39, 32, 0.72);
  box-shadow: none;
  letter-spacing: 0.025em;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s var(--transition);
}

.header__btn,
.btn--white,
.btn--light {
  background: rgba(251, 248, 241, 0.9);
  border: 1px solid rgba(41, 39, 32, 0.72);
  color: var(--ink);
}

.btn:hover,
.btn:active,
.btn:focus,
[type="button"]:hover,
[type="button"]:active,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:active,
[type="submit"]:focus,
button:hover,
button:active,
button:focus,
.header__btn:hover,
.header__btn:active,
.header__btn:focus {
  background-color: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  box-shadow: 0 8px 20px rgba(127, 62, 43, 0.18);
  color: var(--paper-raised);
  transform: translateY(-2px);
}

.hero,
.tile,
.card__image,
.content__featured-image,
.post__image img,
.gallery__item a {
  border: 1px solid rgba(94, 82, 65, 0.16);
  box-shadow: var(--shadow);
}

.hero {
  overflow: hidden;
}

.hero::after {
  background: linear-gradient(112deg, rgba(164, 87, 60, 0.08), transparent 38%, rgba(104, 113, 94, 0.07));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero__image img {
  filter: saturate(0.9) contrast(0.97);
  transition: filter 0.8s ease, transform 1.1s var(--transition);
}

.hero__content,
.tile__body {
  background-color: rgba(248, 244, 235, 0.87);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 18px 50px rgba(39, 34, 26, 0.14);
  -webkit-backdrop-filter: var(--backdrop-filter);
  backdrop-filter: var(--backdrop-filter);
}

.hero__content :is(h1, h2, h3, h4, p, strong, span),
.tile__body :is(h1, h2, h3, h4, p, strong, span),
.tile__title {
  color: var(--ink) !important;
}

.hero__content :is(h2, h3) + :is(h2, h3) {
  color: var(--ink-soft) !important;
}

.section__title {
  color: var(--ink);
  padding-bottom: 0.6rem;
  position: relative;
}

.section__title::after {
  background: linear-gradient(90deg, var(--terracotta), rgba(104, 113, 94, 0.62), transparent);
  border-radius: 100%;
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  transform: rotate(-0.45deg);
  width: min(7rem, 42%);
}

.features__content {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.25rem);
}

.tile {
  isolation: isolate;
}

.tile::after {
  background: linear-gradient(to top, rgba(37, 32, 25, 0.14), transparent 42%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.tile__image > img {
  filter: saturate(0.92) contrast(0.98);
}

.tile__body {
  transition: transform 0.5s var(--transition), box-shadow 0.5s ease;
}

.tile__link .btn {
  background: transparent;
}

.tile__link .btn:hover,
.tile__link .btn:focus-visible {
  background: var(--terracotta-deep);
  color: var(--paper-raised);
}

.card {
  transition: transform 0.5s var(--transition);
}

.card__image img {
  filter: saturate(0.88) contrast(0.98);
}

.card__title a {
  background-image: linear-gradient(var(--terracotta), var(--terracotta));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  padding-bottom: 0.2rem;
  transition: background-size 0.45s var(--transition), color 0.3s ease;
}

.card:hover .card__title a,
.card:focus-within .card__title a {
  background-size: 100% 2px;
  color: var(--terracotta-deep);
}

.faq__list::marker,
.faq__item::marker {
  color: var(--terracotta);
}

.faq__item {
  border-top: 1px solid var(--border-color);
  padding: 0.85rem 0.75rem 1rem 2.2rem;
  transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s var(--transition);
}

.faq__item:hover {
  background-color: rgba(251, 248, 241, 0.58);
  border-color: rgba(164, 87, 60, 0.48);
}

.content,
.faq__content,
.footer {
  border-color: var(--border-color);
}

.content__entry a:not(.btn):not([type="button"]):not([type="submit"]):not(button):not(.post__toc a):not(.gallery__item a):not(.subpages a) {
  text-decoration-color: rgba(164, 87, 60, 0.66);
}

input,
select,
textarea {
  background: rgba(251, 248, 241, 0.72);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(164, 87, 60, 0.1);
}

.footer {
  background: rgba(232, 224, 210, 0.62);
  border-top: 1px solid var(--border-color);
  margin-top: calc(var(--baseline) * 18);
}

.footer__heading {
  color: var(--terracotta-deep);
}

.footer__nav a,
.footer__logo {
  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer__nav a:hover,
.footer__logo:hover {
  color: var(--terracotta-deep);
}

@media (hover: hover) and (pointer: fine) {
  .hero:hover .hero__image img {
    filter: saturate(1) contrast(1);
    transform: scale(1.018);
  }

  .tile:hover .tile__image > img {
    filter: saturate(1.02) contrast(1);
    transform: scale(1.035);
  }

  .tile:hover .tile__body {
    box-shadow: 0 22px 58px rgba(39, 34, 26, 0.18);
    transform: translateY(-0.28rem) rotate(-0.08deg);
  }

  .card:hover {
    transform: translateY(-0.32rem);
  }

  .card:hover img {
    filter: saturate(1) contrast(1);
    transform: scale(1.035) translateZ(0);
  }

  .gallery__item:hover img,
  .content__featured-image:hover img {
    filter: saturate(1.03);
  }

  .faq__item:hover {
    transform: translateX(0.2rem);
  }
}

@media all and (max-width: 56.1875em) {
  .header__logo {
    font-size: clamp(0.92rem, 2.9vw, 1.15rem);
    max-width: min(66vw, 25rem);
  }

  .header__logo::after {
    bottom: 0.45rem;
  }
}

@media all and (max-width: 37.4375em) {
  :root {
    --shadow: 0 8px 24px rgba(48, 39, 27, 0.08);
  }

  body {
    background-attachment: scroll;
  }

  .header {
    margin-bottom: calc(var(--baseline) * 6);
    margin-top: calc(var(--baseline) * 3);
    top: 0.45rem;
  }

  .hero__content,
  .tile__body {
    inset: auto 0.8rem 0.8rem;
    padding: 1.25rem;
  }

  .hero__content--large h1,
  .hero__content--large h2 {
    font-size: clamp(1.65rem, 8vw, 2.35rem);
  }

  .section__title::after {
    width: 4.5rem;
  }

  .faq__item {
    padding-left: 1.85rem;
  }

  .footer {
    margin-top: calc(var(--baseline) * 12);
  }
}

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