/*
 * Tre Kronor's storefront theme (src/themes/tre-kronor.ts): their site as it
 * was on Skeleton (www.trekronor.one). Loaded only for the house whose
 * storefront theme is "tre-kronor"; every selector below starts with that
 * house's root attribute, so nothing here can reach another house.
 *
 * Colours come from Settings > Design (the brand variables); fonts from the
 * theme's registry entry (--theme-font-heading: Tinos, --theme-font-body:
 * Open Sans). Measurements are from their site at 1440 and 390 px wide.
 */

[data-house-theme="tre-kronor"] {
  /*
   * Text on the orange bands (section background "Accent colour"): their navy,
   * 7.0:1 on their orange #FE910F (WCAG AA for all text). Their own site used
   * white there, which measures 2.3:1; the owner chose navy (2026-10-28).
   */
  --brand-accent-text: #070b78;
  /* Text on the light orange ("Light accent tint"): their dark grey, 6.4:1. */
  --brand-accent-light-text: #3c3c3b;
  --tk-grey: #3c3c3b;
}

/* --------------------------------------------------------------- header */

/* One row, 70 px high, a soft shadow instead of a rule. */
[data-house-theme="tre-kronor"] [data-theme-part="header"] {
  border-bottom-width: 0 !important;
  box-shadow: 0 2px 2px 0 rgba(52, 52, 52, 0.29);
  position: relative;
  z-index: 30;
}
[data-house-theme="tre-kronor"] [data-theme-part="header-row"] {
  min-height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  column-gap: 2.5rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="header"] [data-theme-part="logo"] {
  height: 50px;
  width: auto;
  max-width: 220px;
}
[data-house-theme="tre-kronor"] [data-theme-part="header-nav"] {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  column-gap: 1rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="header-account"] {
  font-size: 1rem;
  font-weight: 500;
}
[data-house-theme="tre-kronor"] [data-theme-part="header-account"] > span {
  column-gap: 0.5rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="header-compact"] {
  min-height: 70px;
}
/* The "Auktioner" dropdown: a square white panel under the header, its links
   in upper case and navy like the menu. */
[data-house-theme="tre-kronor"] [data-theme-part="header-nav"] [role="menu"] {
  margin-top: 1.4rem;
  border: 0;
  border-radius: 0;
  box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25);
  padding: 0.75rem 0;
  min-width: 14.5rem;
  inset-inline-start: -1.5rem;
  color: var(--brand-header-text);
  text-transform: uppercase;
}
[data-house-theme="tre-kronor"] [data-theme-part="header-nav"] [role="menuitem"] {
  font-size: 1rem;
  font-weight: 500;
  padding: 0.3rem 1.5rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="header-nav"] [role="menuitem"]:hover {
  background: transparent;
  text-decoration: underline;
}
/* The phone menu (the full-screen modal's panel) opens from the left, its
   links in upper case and navy. */
[data-house-theme="tre-kronor"] [role="dialog"][aria-modal="true"].fixed > div.absolute {
  inset-inline-start: 0;
  inset-inline-end: auto;
  background: #ffffff !important;
}
[data-house-theme="tre-kronor"] [role="dialog"] nav {
  color: var(--brand-header-text);
}
[data-house-theme="tre-kronor"] [role="dialog"] nav a,
[data-house-theme="tre-kronor"] [role="dialog"] nav > div > div:first-child {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 1;
}

/* ----------------------------------------------------------------- page */

/* Their bands touch the footer: no gap above it. */
[data-house-theme="tre-kronor"] [data-theme-part="footer"] {
  margin-top: 0;
}

/* Content pages (Om oss, Auktionsvillkor, Kontakt): their 620 px column
   and their 42 px bold heading. */
[data-house-theme="tre-kronor"] main article.max-w-3xl {
  max-width: 40.75rem;
  padding-top: 6rem;
  padding-bottom: 4rem;
}
[data-house-theme="tre-kronor"] main article.max-w-3xl > h1:first-child {
  font-size: 2.625rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 2.25rem;
}
@media (max-width: 640px) {
  [data-house-theme="tre-kronor"] main article.max-w-3xl,
  [data-house-theme="tre-kronor"] main section.max-w-3xl:has(> .cms-rich-text) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  [data-house-theme="tre-kronor"] main article.max-w-3xl {
    padding-top: 4rem;
  }
  [data-house-theme="tre-kronor"] main article.max-w-3xl > h1:first-child {
    font-size: 2rem;
  }
}

/* Running text: their measure, line height and paragraph gap, and headings
   as their Text sections set them: Tinos in its regular weight (bold only
   where the text is bold), 42 px and 36 px. */
[data-house-theme="tre-kronor"] .cms-rich-text {
  max-width: 38.75rem;
  line-height: 1.5;
}
[data-house-theme="tre-kronor"] .cms-rich-text p {
  margin-block-end: 1.5em;
}
[data-house-theme="tre-kronor"] .cms-rich-text :is(h2, h3, h4) {
  font-family: var(--theme-font-heading);
  font-weight: 400;
  line-height: 1.25;
}
[data-house-theme="tre-kronor"] .cms-rich-text h2 {
  font-size: 2.625rem;
  margin-block: 1em 0.5em;
}
[data-house-theme="tre-kronor"] .cms-rich-text h3 {
  font-size: 2.25rem;
  margin-block: 1em 0.4em;
}
/* A Text section on a page of its own (Kommande auktioner): their column. */
[data-house-theme="tre-kronor"] main section.max-w-3xl:has(> .cms-rich-text) {
  max-width: 40.75rem;
}
/* Their centred bands ("TRE KRONOR", "Nästa auktion") sit a little tighter. */
[data-house-theme="tre-kronor"] [data-block-align="center"] > section.py-12 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
/* The text keeps its section's spacing: nothing above the first line, nothing below the last. */
[data-house-theme="tre-kronor"] .cms-rich-text > :first-child {
  margin-block-start: 0;
}
[data-house-theme="tre-kronor"] .cms-rich-text > :last-child {
  margin-block-end: 0;
}
/* Links: semibold and underlined at rest, on every background. On the orange
   bands a link has the text's own navy, so the underline, not colour, tells
   it apart (WCAG 1.4.1). Hover and focus thicken and lower the underline, and
   keyboard focus adds a ring in the text colour (7.0:1 on the orange). */
[data-house-theme="tre-kronor"] .cms-rich-text a {
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
[data-house-theme="tre-kronor"] .cms-rich-text a:is(:hover, :focus-visible) {
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}
[data-house-theme="tre-kronor"] .cms-rich-text a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}
@media (max-width: 640px) {
  [data-house-theme="tre-kronor"] .cms-rich-text h2 {
    font-size: 2rem;
  }
  [data-house-theme="tre-kronor"] .cms-rich-text h3 {
    font-size: 1.875rem;
  }
}
/* On their bands the paragraph text is a little heavier. */
[data-house-theme="tre-kronor"] [data-block-align="center"] .cms-rich-text p {
  font-weight: 500;
}

/* An image with a button in a content page (the reprint on Om oss): the
   image the width of the column, the button centred under it, as theirs. */
[data-house-theme="tre-kronor"] main article .grid.md\:grid-cols-2.items-center:has(> img) {
  grid-template-columns: minmax(0, 1fr);
}
[data-house-theme="tre-kronor"] main article .grid.md\:grid-cols-2.items-center:has(> img) > div {
  text-align: center;
}

/* Buttons: navy rectangles with bold text. */
[data-house-theme="tre-kronor"] main a[style*="--brand-cta"] {
  border-radius: 2px;
  box-shadow: none;
  font-weight: 700;
}

/* ----------------------------------------------------------------- hero */

/* The light orange band announcing the sale: the sale in bold Tinos, its
   date under it, a wide navy button. */
[data-house-theme="tre-kronor"] [data-theme-part="hero"] h1 {
  font-family: var(--theme-font-heading);
  font-size: 2.25rem;
  line-height: 1.25;
  font-weight: 700;
  max-width: 48rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="hero"] h1 + p {
  font-family: var(--theme-font-heading);
  font-size: 2.25rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
  margin-top: 0.25rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="hero"] h1 + p::first-letter {
  text-transform: uppercase;
}
[data-house-theme="tre-kronor"] [data-theme-part="hero"] a[style*="--brand-cta"] {
  min-width: min(21.5rem, 67vw);
  padding: 0.75rem 1.5rem;
  text-align: center;
  font-size: 1rem;
}
@media (max-width: 640px) {
  [data-house-theme="tre-kronor"] [data-theme-part="hero"] :is(h1, h1 + p) {
    font-size: 1.625rem;
  }
}

/* --------------------------------------------------------- image tiles */

/* Stamps whole, five to a row, with small bold captions under them. */
[data-house-theme="tre-kronor"] [data-tile-fit="contain"] {
  column-gap: 1.5rem;
  row-gap: 1.75rem;
}
[data-house-theme="tre-kronor"] main li figure > figcaption {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
}

/* --------------------------------------------------------------- footer */

[data-house-theme="tre-kronor"] [data-theme-part="footer"] {
  font-size: 1rem;
  line-height: 1.6;
}
[data-house-theme="tre-kronor"] [data-theme-part="footer-columns"] {
  padding-top: 4.5rem;
  padding-bottom: 2rem;
  column-gap: 2rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="footer-heading"] {
  letter-spacing: 0;
  margin-bottom: 1rem;
}
[data-house-theme="tre-kronor"] [data-theme-part="footer-column"] a:not([data-theme-part="footer-social-icon"]) {
  text-decoration: none;
}
[data-house-theme="tre-kronor"] [data-theme-part="footer-column"] a:hover {
  text-decoration: underline;
}
/* The legal bar: white, like theirs. */
[data-house-theme="tre-kronor"] [data-theme-part="footer-legal"] {
  background: #ffffff;
  color: var(--tk-grey);
  border-top-width: 0;
}
[data-house-theme="tre-kronor"] [data-theme-part="footer-legal"] > div {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 0.875rem;
}