/*
 * Halvdans Taverne 0.1.0
 * Cassiopeia child-template styling for Joomla 6.x
 */

:root {
  --ht-ink: #24180f;
  --ht-ink-soft: #5a4636;
  --ht-parchment: #f3e6c9;
  --ht-parchment-light: #fff9ec;
  --ht-parchment-deep: #dcc397;
  --ht-wood: #3a2114;
  --ht-wood-dark: #1d100b;
  --ht-ember: #9e3c22;
  --ht-gold: #c79a45;
  --ht-gold-light: #e4c675;
  --ht-moss: #415b3b;
  --ht-shadow: rgb(17 9 5 / 38%);
  --ht-radius: 0.55rem;

  --cassiopeia-font-family-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --cassiopeia-font-family-headings: Superclarendon, "Bookman Old Style", Georgia, serif;
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 700;
  --link-color: #7d2d1b;
  --link-color-rgb: 125, 45, 27;
}

html {
  scroll-behavior: smooth;
}

body.site {
  color: var(--ht-ink);
  background-color: #26150e;
  background-image:
    radial-gradient(circle at 20% 10%, rgb(199 154 69 / 11%), transparent 28rem),
    radial-gradient(circle at 80% 32%, rgb(158 60 34 / 9%), transparent 26rem),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 1.5%) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #21110b 0, #321b10 28rem, #1b100b 100%);
  font-size: 1.05rem;
  line-height: 1.7;
}

body.site::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgb(0 0 0 / 2%) 4px 5px);
  opacity: 0.65;
}

.container-header {
  color: var(--ht-parchment-light);
  background-color: var(--ht-wood);
  background-image:
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(180deg, #4b2a19, #2b180f 68%, #1d100b);
  background-size: 80px 100%, auto;
  border-bottom: 3px solid var(--ht-gold);
  box-shadow: 0 0.7rem 2rem rgb(0 0 0 / 42%);
}

.container-header::after {
  display: block;
  width: min(76rem, calc(100% - 2rem));
  height: 1px;
  margin: 0 auto;
  content: "";
  background: linear-gradient(90deg, transparent, var(--ht-gold-light), transparent);
  opacity: 0.55;
}

.container-header .grid-child {
  padding-block: 0.7rem;
}

.navbar-brand {
  align-items: center;
  gap: 0.9rem;
}

.brand-logo img.logo,
.brand-logo img {
  width: min(28rem, 82vw);
  max-height: 5.5rem;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0.3rem 0.2rem rgb(0 0 0 / 45%));
}

.navbar-brand > a,
.navbar-brand > a:focus,
.navbar-brand > a:hover {
  color: var(--ht-parchment-light);
  text-decoration: none;
}

.navbar-brand span {
  color: var(--ht-gold-light);
  font-family: var(--cassiopeia-font-family-headings);
  font-size: clamp(1.8rem, 5vw, 3.3rem);
  letter-spacing: 0.035em;
  text-shadow: 0 2px 0 #000, 0 0 1rem rgb(199 154 69 / 23%);
}

.site-description {
  margin-top: 0.1rem;
  color: #ead9b7;
  font-size: 0.96rem;
  font-style: italic;
  letter-spacing: 0.055em;
}

.container-nav {
  padding-block: 0.2rem 0.75rem;
  border-top: 1px solid rgb(228 198 117 / 20%);
}

.container-header .mod-menu {
  gap: 0.2rem;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .navbar-toggler {
  color: #fff5df;
}

.container-header .mod-menu > li > a {
  padding: 0.62rem 0.88rem;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  border-radius: 0.25rem;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible {
  color: #21120b;
  background: linear-gradient(180deg, var(--ht-gold-light), var(--ht-gold));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), 0 0.25rem 0.6rem rgb(0 0 0 / 24%);
}

.metismenu.mod-menu .mm-collapse {
  color: var(--ht-ink);
  background: var(--ht-parchment-light);
  border: 1px solid var(--ht-gold);
  box-shadow: 0 0.8rem 1.8rem var(--ht-shadow);
}

.metismenu.mod-menu .mm-collapse a {
  color: var(--ht-ink);
}

.site-grid {
  padding-block: clamp(1.4rem, 4vw, 3.3rem);
}

.container-component,
.container-sidebar-left,
.container-sidebar-right,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
  min-width: 0;
}

.container-component > main,
.container-component > .system-message-container,
.container-component > .moduletable,
.container-component > nav,
.container-sidebar-left .card,
.container-sidebar-right .card,
.container-top-a .card,
.container-top-b .card,
.container-bottom-a .card,
.container-bottom-b .card {
  border: 1px solid rgb(104 68 38 / 55%);
  border-radius: var(--ht-radius);
  box-shadow: 0 1rem 2.5rem var(--ht-shadow), inset 0 1px 0 rgb(255 255 255 / 45%);
}

.container-component > main {
  position: relative;
  padding: clamp(1.25rem, 4vw, 3rem);
  overflow: hidden;
  background-color: var(--ht-parchment);
  background-image:
    radial-gradient(circle at 8% 0%, rgb(255 255 255 / 62%), transparent 24rem),
    repeating-linear-gradient(0deg, rgb(94 60 31 / 2%) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #f8edcf, #ead5aa);
}

.container-component > main::before,
.container-component > main::after {
  position: absolute;
  width: 5rem;
  height: 5rem;
  pointer-events: none;
  content: "";
  opacity: 0.35;
}

.container-component > main::before {
  top: 0.75rem;
  left: 0.75rem;
  border-top: 2px solid var(--ht-gold);
  border-left: 2px solid var(--ht-gold);
}

.container-component > main::after {
  right: 0.75rem;
  bottom: 0.75rem;
  border-right: 2px solid var(--ht-gold);
  border-bottom: 2px solid var(--ht-gold);
}

.com-content-article,
.blog,
.blog-featured,
.category-list,
.contact,
.login,
.registration,
.profile,
.reset,
.remind {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6,
.page-header,
.item-title {
  color: #3a2013;
  font-family: var(--cassiopeia-font-family-headings);
  line-height: 1.2;
}

h1,
.page-header h1,
.item-title {
  margin-bottom: 1.2rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0.015em;
}

h1::after,
.page-header h1::after,
.item-title::after,
.ht-title::after {
  display: block;
  width: min(12rem, 45%);
  height: 3px;
  margin-top: 0.55rem;
  content: "";
  background: linear-gradient(90deg, var(--ht-ember), var(--ht-gold), transparent);
}

h2 {
  margin-top: 2.2rem;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  color: var(--ht-ember);
}

blockquote {
  margin: 2rem 0;
  padding: 1rem 1.35rem;
  color: #4b3525;
  font-size: 1.15rem;
  font-style: italic;
  background: rgb(255 249 236 / 55%);
  border-left: 0.35rem solid var(--ht-gold);
}

hr {
  height: 1px;
  margin-block: 2rem;
  background: linear-gradient(90deg, transparent, var(--ht-gold), transparent);
  border: 0;
  opacity: 0.7;
}

.btn-primary,
.btn-success,
.btn-info,
.readmore .btn,
.pager a {
  color: #fff9e9;
  background: linear-gradient(180deg, #a8492d, #73301f);
  border-color: #572216;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 0.3rem 0.7rem rgb(46 22 12 / 25%);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.readmore .btn:hover,
.readmore .btn:focus,
.pager a:hover,
.pager a:focus {
  color: #20110a;
  background: linear-gradient(180deg, var(--ht-gold-light), var(--ht-gold));
  border-color: #7a5826;
}

.btn-secondary {
  color: var(--ht-ink);
  background: var(--ht-parchment-light);
  border-color: #967042;
}

.card,
.moduletable,
.blog-item,
.com-content-category-blog__item {
  color: var(--ht-ink);
}

.card {
  background: linear-gradient(145deg, var(--ht-parchment-light), var(--ht-parchment-deep));
  border-color: #9b7141;
}

.card-header {
  color: #fff4da;
  font-family: var(--cassiopeia-font-family-headings);
  background: linear-gradient(180deg, #53301d, #342015);
  border-bottom-color: var(--ht-gold);
}

.blog-item,
.com-content-category-blog__item {
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  background: rgb(255 249 236 / 45%);
  border: 1px solid rgb(126 87 50 / 32%);
  border-radius: calc(var(--ht-radius) * 0.8);
}

.article-info {
  color: var(--ht-ink-soft);
  font-size: 0.9rem;
}

.breadcrumb {
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  color: #ead9b7;
  background: rgb(29 16 11 / 75%);
  border: 1px solid rgb(199 154 69 / 35%);
  border-radius: var(--ht-radius);
}

.breadcrumb a {
  color: var(--ht-gold-light);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text {
  color: var(--ht-ink);
  background-color: #fffaf0;
  border-color: #9a754c;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ht-gold);
  box-shadow: 0 0 0 0.22rem rgb(199 154 69 / 26%);
}

.table {
  --table-striped-bg: rgb(103 70 40 / 7%);
  --table-hover-bg: rgb(199 154 69 / 13%);
  color: var(--ht-ink);
  border-color: #a88458;
}

.alert {
  color: var(--ht-ink);
  background-color: var(--ht-parchment-light);
  border-color: var(--ht-gold);
}

.pagination .page-link {
  color: var(--ht-ink);
  background: var(--ht-parchment-light);
  border-color: #9d784c;
}

.pagination .active > .page-link {
  color: #fff;
  background: var(--ht-ember);
  border-color: #6f2818;
}

.container-footer {
  margin-top: 1rem;
  color: #e8d7b3;
  background-color: var(--ht-wood-dark);
  background-image: linear-gradient(180deg, #2c190f, #130b07);
  border-top: 3px solid var(--ht-gold);
  box-shadow: 0 -0.8rem 2rem rgb(0 0 0 / 25%);
}

.container-footer a {
  color: var(--ht-gold-light);
}

.back-to-top-link {
  color: #fff7e6;
  background: var(--ht-ember);
  border: 1px solid var(--ht-gold);
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 30%);
}

/* Optional building blocks for articles and Custom modules. */
.ht-hero {
  position: relative;
  padding: clamp(1.4rem, 5vw, 3.2rem);
  margin: -0.5rem -0.5rem 2.4rem;
  overflow: hidden;
  color: #fff7e6;
  background:
    radial-gradient(circle at 82% 15%, rgb(228 198 117 / 26%), transparent 17rem),
    linear-gradient(135deg, #4b2818, #25130c 72%);
  border: 1px solid #7e562e;
  border-radius: var(--ht-radius);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%), 0 1rem 2rem rgb(46 22 12 / 25%);
}

.ht-hero::before {
  position: absolute;
  top: -4rem;
  right: -3rem;
  width: 15rem;
  height: 15rem;
  content: "";
  border: 1px solid rgb(228 198 117 / 25%);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgb(228 198 117 / 4%), 0 0 0 4rem rgb(228 198 117 / 3%);
}

.ht-hero > * {
  position: relative;
  z-index: 1;
}

.ht-kicker {
  margin-bottom: 0.5rem;
  color: var(--ht-gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ht-hero h1,
.ht-hero h2 {
  max-width: 16ch;
  margin-top: 0;
  color: #fff7e6;
  text-shadow: 0 2px 0 #000;
}

.ht-hero h1::after,
.ht-hero h2::after {
  background: linear-gradient(90deg, var(--ht-gold-light), transparent);
}

.ht-lead {
  max-width: 62ch;
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
}

.ht-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.ht-actions a {
  display: inline-block;
  padding: 0.66rem 1rem;
  color: #21120b;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(180deg, var(--ht-gold-light), var(--ht-gold));
  border: 1px solid #72501f;
  border-radius: 0.3rem;
}

.ht-actions a:hover,
.ht-actions a:focus-visible {
  color: #fff7e6;
  background: linear-gradient(180deg, #a8492d, #73301f);
}

.ht-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.5rem 2.5rem;
}

.ht-panel {
  padding: 1.2rem;
  background: rgb(255 249 236 / 52%);
  border: 1px solid rgb(126 87 50 / 38%);
  border-radius: var(--ht-radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
}

.ht-panel h2,
.ht-panel h3 {
  margin-top: 0;
}

.ht-panel > :last-child {
  margin-bottom: 0;
}

.ht-note {
  padding: 1rem 1.2rem;
  color: #3f321f;
  background: rgb(65 91 59 / 11%);
  border: 1px solid rgb(65 91 59 / 35%);
  border-left: 0.35rem solid var(--ht-moss);
  border-radius: 0.25rem;
}

.ht-signature {
  margin-top: 2.5rem;
  color: var(--ht-ink-soft);
  font-style: italic;
  text-align: right;
}

@media (max-width: 991.98px) {
  .container-header .mod-menu > li > a {
    padding-inline: 0.65rem;
  }

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

@media (max-width: 575.98px) {
  body.site {
    font-size: 1rem;
  }

  .site-grid {
    padding-top: 1rem;
  }

  .container-component > main {
    padding: 1.15rem;
    border-radius: 0.25rem;
  }

  .container-component > main::before,
  .container-component > main::after {
    width: 2.5rem;
    height: 2.5rem;
  }

  .brand-logo img.logo,
  .brand-logo img {
    max-height: 4.4rem;
  }

  .ht-hero {
    padding: 1.2rem;
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- 0.2 cinematic homepage shell --- */
body.ht-site { margin:0; background:#0c0806; }
.ht-header { position:sticky; top:0; z-index:1000; background:linear-gradient(180deg,#25140c,#100a07); border-bottom:1px solid #8c642d; box-shadow:0 .6rem 2rem #000a; }
.ht-header-inner { width:min(1500px,94vw); margin:auto; display:flex; align-items:center; gap:2rem; min-height:92px; }
.ht-brand { width:250px; flex:0 0 250px; }
.ht-brand img { display:block; width:100%; max-height:86px; object-fit:contain; }
.ht-nav { flex:1; }
.ht-nav .mod-menu { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.25rem; margin:0; }
.ht-nav .mod-menu > li > a { display:block; color:#ead2a0; padding:1rem 1.1rem; text-decoration:none; text-transform:uppercase; letter-spacing:.045em; font-weight:700; font-size:.9rem; border-left:1px solid #6b452666; }
.ht-nav .mod-menu > li.active > a,.ht-nav .mod-menu > li > a:hover { color:#ffdc87; background:linear-gradient(180deg,#5d2118aa,#26110daa); box-shadow:inset 0 -2px #b98a3b; }
.ht-homehero { min-height:650px; position:relative; display:grid; align-items:center; background:url('../images/hero-tavern.webp') center/cover no-repeat; border-bottom:1px solid #9f7134; }
.ht-homehero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#050403 0%,#090604f2 14%,#0a0705c7 34%,#09060442 64%,#05040322 100%),linear-gradient(0deg,#080503c7 0%,transparent 34%); }
.ht-homehero-content { position:relative; z-index:1; width:min(1500px,90vw); margin:auto; padding:6rem 0; color:#f3dfb2; }
.ht-homehero-content > * { max-width:620px; }
.ht-eyebrow { text-transform:uppercase; letter-spacing:.25em; font-size:1.15rem; color:#e0c389; margin:0 0 .8rem; }
.ht-homehero h1 { color:#e6c982; margin:0; font-size:clamp(4rem,8vw,7.2rem); line-height:.86; text-transform:uppercase; letter-spacing:.015em; text-shadow:0 3px 0 #000,0 0 1.2rem #000; }
.ht-homehero h1::after { width:390px; max-width:70%; background:linear-gradient(90deg,#c69a4a,transparent); }
.ht-hero-tagline { color:#dda94b; font-size:1.4rem; font-style:italic; }
.ht-hero-copy { color:#eee0c7; font-size:1.08rem; max-width:540px; }
.ht-cta { display:inline-block; margin-top:1.2rem; padding:.95rem 1.45rem; color:#f6d899; text-decoration:none; text-transform:uppercase; letter-spacing:.04em; background:linear-gradient(180deg,#5b1e17,#26100d); border:1px solid #aa7736; box-shadow:inset 0 0 0 2px #1b0b08,0 .7rem 1.3rem #0008; }
.ht-cta:hover { color:#fff0bf; transform:translateY(-1px); }
.ht-feature-grid { width:min(1500px,94vw); margin:-1.2rem auto 2rem; position:relative; z-index:4; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ht-feature-card { min-height:370px; position:relative; overflow:hidden; border:1px solid #9a6d32; box-shadow:0 1rem 2rem #0009,inset 0 0 0 3px #1a0e09; background-position:center; background-size:cover; }
.ht-card-world{background-image:url('../images/card-1.webp')}.ht-card-path{background-image:url('../images/card-2.webp')}.ht-card-fair{background-image:url('../images/card-3.webp')}
.ht-feature-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#100a07f7 0%,#17100bd9 44%,#17100b3b 100%); }
.ht-card-copy { position:absolute; inset:auto 1.5rem 1.5rem; z-index:2; color:#eee0c7; }
.ht-card-copy h2 { color:#e9d4a0; margin:.35rem 0 .7rem; text-transform:uppercase; font-size:1.6rem; }
.ht-card-copy p { margin:0 0 .9rem; }
.ht-card-copy a { color:#dda94b; text-transform:uppercase; font-weight:700; text-decoration:none; }
.ht-card-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; color:#e3b65c; border:2px solid #ad7d38; background:#130c08dd; font-size:1.6rem; }
.ht-main { width:min(1500px,94vw); margin:0 auto 2rem; }
.ht-content-shell { background:linear-gradient(135deg,#f4e6c7,#d8bd8c); padding:clamp(1.2rem,3vw,2.5rem); border:1px solid #8b6030; box-shadow:0 1rem 2rem #0008,inset 0 0 0 3px #f6eacccc; color:#2a190f; }
.ht-home .ht-content-shell { margin-top:.5rem; }
.ht-content-shell .com-content-article > .page-header:first-child { display:none; }
.ht-halvdan-quote { width:min(1500px,94vw); margin:1rem auto 1.5rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem; padding:1.2rem 1.6rem; color:#e7c983; background:linear-gradient(90deg,#37140f,#6b2418,#2d110d); border:1px solid #a67435; box-shadow:inset 0 0 0 2px #160906,0 .7rem 1.5rem #0008; }
.ht-halvdan-quote p { margin:0; font-size:1.2rem; font-style:italic; }
.ht-halvdan-quote strong { font-size:1.5rem; font-style:italic; font-weight:400; }
.ht-quote-mug { font-size:2rem; }
.ht-footer { color:#cbb98f; border-top:1px solid #80592c; background:linear-gradient(180deg,#17100c,#090604); }
.ht-footer-inner { width:min(1500px,94vw); margin:auto; padding:1.3rem 0 1.8rem; text-align:center; }
.ht-footer .mod-menu { display:flex; justify-content:center; gap:1.2rem; margin-bottom:.8rem; }
.ht-footer a { color:#d8bd7e; }
@media (max-width:960px){.ht-header-inner{align-items:flex-start;flex-direction:column;gap:0;padding:.5rem 0}.ht-brand{width:210px;flex-basis:auto}.ht-nav{width:100%;overflow:auto}.ht-nav .mod-menu{justify-content:flex-start;flex-wrap:nowrap}.ht-homehero{min-height:580px}.ht-feature-grid{grid-template-columns:1fr}.ht-feature-card{min-height:330px}.ht-halvdan-quote{grid-template-columns:1fr;text-align:center}.ht-quote-mug{display:none}}
@media (max-width:560px){.ht-homehero-content{padding:4rem 0}.ht-homehero h1{font-size:3.7rem}.ht-hero-tagline{font-size:1.12rem}.ht-nav .mod-menu>li>a{padding:.75rem;font-size:.78rem}.ht-feature-grid,.ht-main,.ht-halvdan-quote{width:92vw}}