/* ============================================================
   Bohemia Design System — Core Tokens, Reset, Typography, Layout
   ============================================================ */

/* ----- DESIGN TOKENS ----- */
:root {
  /* Garnet (Primary) */
  --bh-garnet-50:  #FDF2F4;
  --bh-garnet-100: #FBE3E7;
  --bh-garnet-200: #F7C5CF;
  --bh-garnet-300: #F09BAC;
  --bh-garnet-400: #E56A82;
  --bh-garnet-500: #D4405E;
  --bh-garnet-600: #B82B4A;
  --bh-garnet-700: #9A2240;
  --bh-garnet-800: #7D1D37;
  --bh-garnet-900: #5E1529;

  /* Gold (Secondary / Warning) */
  --bh-gold-50:  #FDFAF0;
  --bh-gold-100: #FAF2D4;
  --bh-gold-200: #F4E4A3;
  --bh-gold-300: #EDD06B;
  --bh-gold-400: #E2B83A;
  --bh-gold-500: #C99B1D;
  --bh-gold-600: #A67E14;
  --bh-gold-700: #81620F;

  /* Forest (Success) */
  --bh-forest-50:  #F0F7F2;
  --bh-forest-500: #3B8550;
  --bh-forest-700: #225432;

  /* Spa (Info) */
  --bh-spa-50:  #F0F7FA;
  --bh-spa-100: #DCEEF5;
  --bh-spa-400: #4CA8C8;
  --bh-spa-500: #2E8DB0;
  --bh-spa-700: #1B5974;

  /* Stone (Neutral) */
  --bh-stone-0:   #FFFFFF;
  --bh-stone-50:  #F7F6F4;
  --bh-stone-100: #EDEBE8;
  --bh-stone-150: #E3E0DB;
  --bh-stone-200: #D6D2CC;
  --bh-stone-300: #BCB7AE;
  --bh-stone-400: #9A948A;
  --bh-stone-500: #7A756C;
  --bh-stone-600: #5C5850;
  --bh-stone-700: #42403A;
  --bh-stone-800: #2C2A26;
  --bh-stone-900: #1A1916;
  --bh-stone-950: #0F0E0D;

  /* Semantic */
  --bh-success:    var(--bh-forest-500);
  --bh-success-bg: var(--bh-forest-50);
  --bh-warning:    var(--bh-gold-500);
  --bh-warning-bg: var(--bh-gold-50);
  --bh-danger:     var(--bh-garnet-500);
  --bh-danger-bg:  var(--bh-garnet-50);
  --bh-info:       var(--bh-spa-500);
  --bh-info-bg:    var(--bh-spa-50);

  /* Surface */
  --bh-surface-page:   var(--bh-stone-50);
  --bh-surface-card:   var(--bh-stone-0);
  --bh-surface-sunken: var(--bh-stone-100);

  /* Text */
  --bh-text-primary:   var(--bh-stone-900);
  --bh-text-secondary: var(--bh-stone-500);
  --bh-text-tertiary:  var(--bh-stone-400);
  --bh-text-accent:    var(--bh-garnet-600);
  --bh-text-link:      var(--bh-garnet-600);

  /* Border */
  --bh-border-light:  var(--bh-stone-150);
  --bh-border-medium: var(--bh-stone-200);

  /* Typography */
  --bh-font-display: 'Playfair Display', Georgia, serif;
  --bh-font-body:    'Nunito Sans', sans-serif;
  --bh-font-mono:    'JetBrains Mono', monospace;

  /* Type scale */
  --bh-text-xs:   11px;
  --bh-text-sm:   13px;
  --bh-text-base: 15px;
  --bh-text-md:   17px;
  --bh-text-lg:   20px;
  --bh-text-xl:   24px;
  --bh-text-2xl:  30px;
  --bh-text-3xl:  38px;
  --bh-text-4xl:  48px;

  /* Spacing (4px base) */
  --bh-sp-1:  4px;
  --bh-sp-2:  8px;
  --bh-sp-3:  12px;
  --bh-sp-4:  16px;
  --bh-sp-5:  20px;
  --bh-sp-6:  24px;
  --bh-sp-8:  32px;
  --bh-sp-10: 40px;
  --bh-sp-12: 48px;
  --bh-sp-16: 64px;

  /* Radius */
  --bh-radius-sm:   5px;
  --bh-radius-md:   8px;
  --bh-radius-lg:   12px;
  --bh-radius-xl:   18px;
  --bh-radius-full: 9999px;

  /* Shadows */
  --bh-shadow-xs: 0 1px 2px rgba(26,25,22,.05);
  --bh-shadow-sm: 0 1px 3px rgba(26,25,22,.07), 0 1px 2px rgba(26,25,22,.04);
  --bh-shadow-md: 0 4px 12px -2px rgba(26,25,22,.08), 0 2px 4px -2px rgba(26,25,22,.04);
  --bh-shadow-lg: 0 12px 28px -6px rgba(26,25,22,.1), 0 4px 8px -4px rgba(26,25,22,.04);
  --bh-shadow-xl: 0 24px 48px -12px rgba(26,25,22,.12);

  /* Motion */
  --bh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bh-dur-fast: 150ms;
  --bh-dur-norm: 250ms;

  /* ---- Legacy aliases (backwards compat for PHP inline styles) ---- */
  --default-section-top-bot-padding: var(--bh-sp-12);
  --default-section-top-bot-padding-small: var(--bh-sp-5);
  --default-container-padding: var(--bh-sp-8);
  --default-container-margin: calc(var(--bh-sp-8) * -1);
  --default-container-padding-small: var(--bh-sp-4);
  --default-container-margin-small: calc(var(--bh-sp-4) * -1);
  --default-faq-answer-color: var(--bh-stone-600);
  --default-faq-border-color: var(--bh-stone-150);
  --default-main-bg-gray-color: var(--bh-stone-50);
  --default-red-color: var(--bh-garnet-600);
  --default-body-text-color: var(--bh-text-primary);
  --default-bg-hover-color: var(--bh-stone-100);
  --default-main-faq-red: var(--bh-garnet-300);
  --default-border-solid-color: var(--bh-border-medium);
  --default-border-for-wide-img: var(--bh-radius-lg);
  --default-medium-border: var(--bh-radius-md);
  --default-small-border: var(--bh-radius-sm);
  --default-faq-question-font-size: var(--bh-text-2xl);
  --default-button-bg-color: var(--bh-garnet-600);
}

/* ----- RESET ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ----- BASE TYPOGRAPHY ----- */
body {
  margin: 0;
  padding: 0;
  font-family: var(--bh-font-body);
  font-size: var(--bh-text-base);
  line-height: 1.55;
  color: var(--bh-text-primary);
  background: var(--bh-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bh-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bh-text-primary);
}

h1, .h1 { font-size: var(--bh-text-4xl); }
h2, .h2 { font-size: var(--bh-text-3xl); }
h3, .h3 { font-size: var(--bh-text-2xl); }
h4, .h4 { font-size: var(--bh-text-xl); }
h5, .h5 { font-size: var(--bh-text-lg); }
h6, .h6 { font-size: var(--bh-text-md); }

p, .p {
  font-family: var(--bh-font-body);
  line-height: 1.65;
  color: var(--bh-stone-600);
}

.b1 {
  font-size: var(--bh-text-lg);
  color: var(--bh-stone-600);
}

.b2 {
  font-size: var(--bh-text-xl);
}

.b3 {
  font-size: var(--bh-text-base);
  color: var(--bh-stone-600);
}

/* ----- LINKS ----- */
a {
  background-color: transparent;
  color: var(--bh-text-link);
  transition: color var(--bh-dur-fast);
}

a:hover {
  color: var(--bh-garnet-700);
}

/* ----- MISC ELEMENTS ----- */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: none;
  border-top: 1px solid var(--bh-border-light);
  margin: var(--bh-sp-8) 0;
}

pre {
  font-family: var(--bh-font-mono);
  font-size: 1em;
}

b, strong { font-weight: 700; }

code, kbd, samp {
  font-family: var(--bh-font-mono);
  font-size: 0.9em;
}

small { font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

img {
  border-style: none;
  max-width: 100%;
  height: auto;
  border-radius: var(--bh-radius-lg);
}

*[hidden] { display: none !important; }

/* ----- FORMS ----- */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  padding: 10px 20px;
  border-radius: var(--bh-radius-md);
  border: 1px solid var(--bh-border-medium);
  cursor: pointer;
  color: var(--bh-text-primary);
  max-width: 100%;
  transition: border-color var(--bh-dur-fast), box-shadow var(--bh-dur-fast);
}

button, input { overflow: visible; }

button {
  text-transform: none;
  background-color: var(--bh-garnet-600);
  color: #fff;
  font-weight: 600;
  border: none;
}

button:hover {
  background-color: var(--bh-garnet-700);
}

select {
  text-transform: none;
  background-color: var(--bh-surface-card);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bh-garnet-400);
  box-shadow: 0 0 0 3px rgba(212, 64, 94, 0.1);
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

::-moz-focus-inner { border-style: none; padding: 0; }
:-moz-focusring { outline: 1px dotted ButtonText; }

input.wpcf7-form-control.wpcf7-submit {
  background-color: var(--bh-garnet-600);
  color: white;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--bh-radius-md);
  border: none;
  cursor: pointer;
  transition: background-color var(--bh-dur-fast), transform var(--bh-dur-fast);
}

input.wpcf7-form-control.wpcf7-submit:hover {
  background-color: var(--bh-garnet-700);
  transform: translateY(-1px);
}

/* ----- SCROLLBAR ----- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bh-stone-300); border-radius: 3px; }

/* ----- TABLE ----- */
table { border-collapse: collapse; }
td, th { vertical-align: top; padding: 0.5em 1em; }

/* ----- LISTS ----- */
dl dl, dl ol, dl ul, ol dl, ul dl { margin: 0; }
ol ol, ol ul, ul ol, ul ul { margin: 0; }
ul { padding-inline-start: 2rem; }

/* ----- LAYOUT ----- */
.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--bh-sp-8);
}

.container-bg {
  background: var(--bh-surface-page);
}

.wide {
  margin: 0 calc(var(--bh-sp-8) * -1);
}

.narrow {
  padding-left: 10rem;
  padding-right: 10rem;
}

.narrow-center-text {
  text-align: center;
}

.tc {
  text-align: center;
}

.section-padding {
  padding-top: var(--bh-sp-16);
  padding-bottom: var(--bh-sp-16);
}

.between-padding {
  padding-bottom: var(--bh-sp-12);
}

.two-blocks {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--bh-sp-5);
}

section {
  position: relative;
}

/* ----- UTILITY ----- */
.toright { float: right; }
.toleft  { float: left; }
.tocenter {
  display: block;
  margin: 0 auto;
  width: fit-content;
  max-width: 90%;
}

.is-invalid {
  border-color: var(--bh-garnet-500);
}

.phone-number {
  white-space: nowrap;
}

/* ----- BUTTONS ----- */
.btn {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: var(--bh-radius-md);
  font-size: var(--bh-text-sm);
  font-weight: 600;
  font-family: var(--bh-font-body);
  transition: all var(--bh-dur-fast) var(--bh-ease-out);
}

.btn-primary {
  background-color: var(--bh-garnet-600);
  color: white;
  fill: white;
  border: none;
}

.btn-primary:hover {
  background-color: var(--bh-garnet-700);
  transform: translateY(-1px);
  box-shadow: var(--bh-shadow-md);
}

/* ----- GRID ----- */
.row {
  display: flex;
  flex-wrap: wrap;
}

.col   { flex: 1; padding: 0.5rem; }
.col-1  { flex-basis: 8.333%; }
.col-2  { flex-basis: 16.667%; }
.col-3  { flex-basis: 25%; }
.col-4  { flex-basis: 33.333%; }
.col-5  { flex-basis: 41.667%; }
.col-6  { flex-basis: 50%; }
.col-7  { flex-basis: 58.333%; }
.col-8  { flex-basis: 66.667%; }
.col-9  { flex-basis: 75%; }
.col-10 { flex-basis: 83.333%; }
.col-11 { flex-basis: 91.667%; }
.col-12 { flex-basis: 100%; }

/* ----- POST CONTENT ----- */
.post-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.post-content .listing-item {
  flex: 0 1 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.post-content .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1rem;
  margin-bottom: 3rem;
  justify-content: space-between;
}

.news-container-bing h3,
.news-container-bing .h3 {
  font-size: var(--bh-text-lg);
}

/* ----- FOOTER ----- */
header {}

footer {
  background-color: var(--bh-stone-900);
  color: var(--bh-stone-300);
}

/* ----- MAP ----- */
#map {
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}

svg.icon {
  vertical-align: middle;
}

/* ----- ALIGNMENT ----- */
.alignright {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
  clear: right;
}

.alignleft {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
  clear: left;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .container {
    padding: 0 var(--bh-sp-4);
  }

  .wide {
    margin: 0 calc(var(--bh-sp-4) * -1);
  }

  .narrow {
    padding: 0;
  }

  .narrow-center-text {
    text-align: left;
    padding: 0;
  }

  .section-padding {
    padding-top: var(--bh-sp-8);
    padding-bottom: var(--bh-sp-8);
  }

  .between-padding {
    padding-bottom: var(--bh-sp-5);
  }

  .two-blocks {
    flex-direction: column;
    gap: var(--bh-sp-2);
  }

  .post-content .listing-item {
    flex: 1 1 250px;
  }

  h1, .h1 { font-size: var(--bh-text-3xl); }
  h2, .h2 { font-size: var(--bh-text-2xl); }
  h3, .h3 { font-size: var(--bh-text-xl); }
  h4, .h4 { font-size: var(--bh-text-lg); }
  h5, .h5 { font-size: var(--bh-text-md); }

  .col-1, .col-2, .col-3, .col-4, .col-5,
  .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
    flex-basis: 50%;
  }

  .route .col {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .narrow {
    padding: 0 3rem;
  }

  .section-padding {
    padding-top: var(--bh-sp-12);
    padding-bottom: var(--bh-sp-12);
  }
}

@media (max-width: 480px) {
  h1, .h1 { font-size: var(--bh-text-2xl); }
  h2, .h2 { font-size: var(--bh-text-xl); }
  h3, .h3 { font-size: var(--bh-text-lg); }
  h4, .h4 { font-size: var(--bh-text-md); }
  h5, .h5 { font-size: var(--bh-text-base); }
  .b2 { font-size: var(--bh-text-base); }

  .col-1, .col-2, .col-3, .col-4, .col-5,
  .col-6, .col-7, .col-8, .col-9, .col-10,
  .col-11, .col-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}