/*
Theme Name: LFMTE Mysterious Scotland Traffic Theme
Theme URI: https://66webs.com/
Description: A moonlit gothic-Scottish theme for LFMTE traffic exchanges. The
             palette is sampled from the Mysterious Scotland Traffic header
             artwork: midnight navy, slate teal, antique gold, silver, amber
             lantern light and saltire blue. Navigation is a two-tier "tab bar
             + ribbon" with compact drop-downs, the page sits on a parchment
             panel so every LFMTE page stays readable, and the header artwork
             is shown in full on every screen size.
Version: 1.0
Author: 66Web Solutions
Tags: scotland, gothic, midnight, gold, silver, tartan, ribbon-nav, bootstrap4
*/

@charset "utf-8";

/* ==========================================================================
   0. LOCAL WEBFONTS (no Google connection required)
   ========================================================================== */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("style_files/webfonts/cinzel-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("style_files/webfonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("style_files/webfonts/cormorant-garamond-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("style_files/webfonts/jost-400.woff2") format("woff2");
}

/* ==========================================================================
   1. DESIGN TOKENS - sampled from the header artwork
   Change these values to re-skin the whole theme.
   ========================================================================== */

:root {
  /* Night - the castle sky */
  --sc-night-950: #03070d;
  --sc-night-900: #050b16;
  --sc-night-850: #07131c;
  --sc-night-800: #0a1a2a;
  --sc-night-700: #102536;
  --sc-night-600: #17354c;
  --sc-slate:     #283e47;
  --sc-steel:     #899ea1;

  /* Gold - the "SCOTLAND" lettering and the lion crest */
  --sc-gold-deep:   #8a5b0a;
  --sc-gold:        #c9962a;
  --sc-gold-mid:    #dcb04a;
  --sc-gold-bright: #f3c552;
  --sc-gold-pale:   #f1dfa6;

  /* Amber - lantern windows, pumpkins, the sunset */
  --sc-amber:  #f3a02b;
  --sc-ember:  #e8731a;

  /* Silver - the "TRAFFIC" lettering */
  --sc-silver:    #cdd3da;
  --sc-silver-hi: #eef1f5;

  /* Moon glow + saltire */
  --sc-moon:      #66d3f0;
  --sc-flag:      #1f4f8f;
  --sc-flag-deep: #0e2e5a;
  --sc-heather:   #0b4a3c;

  /* Parchment - the content panel */
  --sc-parch-50:  #faf8f1;
  --sc-parch:     #f3f0e6;
  --sc-parch-2:   #ece7d7;
  --sc-parch-3:   #e0d9c3;
  --sc-line:      #d9cfae;
  --sc-line-dark: #c4b484;

  /* Ink */
  --sc-ink:       #0b1626;
  --sc-ink-soft:  #33465a;
  --sc-muted:     #5e6b78;
  --sc-link:      #7a4f08;
  --sc-link-hov:  #0b5f86;

  --sc-font-display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --sc-font-serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sc-font-sans:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --sc-radius:    6px;
  --sc-radius-sm: 4px;
  --sc-row1:      66px;     /* height of the tab bar (ribbon sits right under it) */
  --sc-ribbon:    44px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 130px; }

body {
  font-family: var(--sc-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: #dfe5ea;
  background-color: var(--sc-night-900);
  background-image: url("images/bg_night.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: scroll; /* performance: avoids full-viewport repaint while scrolling */
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sc-gold-bright); color: var(--sc-night-900); }

* { scrollbar-width: thin; scrollbar-color: var(--sc-gold) var(--sc-night-850); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--sc-night-850); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sc-gold-mid), var(--sc-gold-deep));
  border-radius: 999px;
  border: 2px solid var(--sc-night-850);
}

.scot-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--sc-gold-bright); color: var(--sc-night-900);
  padding: .6rem 1rem; font-weight: 600;
}
.scot-skip:focus { left: 8px; top: 8px; color: var(--sc-night-900); }

a { color: var(--sc-gold-mid); text-decoration: none; }
a:hover, a:focus { color: var(--sc-gold-bright); text-decoration: underline; }

.far, .fas, .fab, .fal { margin-right: 3px; }

/* ==========================================================================
   3. TOP STRIP
   ========================================================================== */

.scot-topstrip {
  background: var(--sc-night-950);
  border-bottom: 1px solid rgba(220, 176, 74, .35);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.scot-topstrip-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 34px; padding: 0 1.5rem;
}
.scot-topstrip-motto { color: var(--sc-silver); font-family: var(--sc-font-serif); font-style: italic; font-size: .95rem; letter-spacing: .06em; text-transform: none; }
.scot-topstrip-motto i { color: var(--sc-moon); }
.scot-topstrip-links a { color: var(--sc-gold-mid); margin-left: 1.3rem; font-weight: 500; }
.scot-topstrip-links a i { color: var(--sc-amber); }
.scot-topstrip-links a:hover { color: var(--sc-silver-hi); text-decoration: none; }

/* ==========================================================================
   4. HEADER ARTWORK - full viewport width, natural responsive height
   ========================================================================== */

/*
   IMPORTANT:
   The header must satisfy all three requirements at the same time:
   1) fill the available screen width,
   2) show the complete artwork from top to bottom,
   3) never stretch or distort the image.

   Therefore the image itself controls the header height from its natural
   aspect ratio.  There is deliberately NO fixed/max 400px height here.
   On a wide monitor the header becomes taller as required instead of leaving
   empty side space or cropping the top/bottom of the artwork.
*/
.scot-hero {
  position: relative;
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  background: var(--sc-night-950);
  overflow: hidden;
  isolation: isolate;
}

/* No blurred/stretched duplicate image at the sides. */
.scot-hero-backdrop {
  display: none !important;
}

.scot-hero-frame {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  line-height: 0;
  overflow: hidden;
  --mx: 50%; --my: 50%;
}

.scot-hero-frame picture {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}

.scot-hero-img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: unset !important;
  object-position: center center;
}

/*
   Mobile/tablet artwork also follows its own intrinsic aspect ratio.
   No forced height means the complete responsive source can fill the width
   without being cropped.
*/
@media (max-width: 767.98px) {
  .scot-hero,
  .scot-hero-frame,
  .scot-hero-frame picture {
    height: auto;
    max-height: none;
  }

  .scot-hero-img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: unset !important;
  }

  /* Keep the atmosphere on phones with only one mist layer. */
  .scot-mist span:nth-child(2) { display: none; }
}

/* lantern glow that follows the pointer */
.scot-lantern {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(260px circle at var(--mx) var(--my),
              rgba(255, 190, 90, .26), rgba(255, 150, 40, .10) 46%, transparent 72%);
  mix-blend-mode: screen;
}
.is-lit .scot-lantern { opacity: 1; }

/* drifting mist along the moor
   Performance version: the soft radial gradients create the haze themselves,
   so the very expensive animated CSS blur is no longer required. */
.scot-mist { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: paint; }
.scot-mist span {
  position: absolute; left: -22%; bottom: -6%; width: 145%; height: 44%;
  background:
    radial-gradient(ellipse at 18% 62%, rgba(165, 205, 230, .18), transparent 58%),
    radial-gradient(ellipse at 58% 72%, rgba(165, 205, 230, .14), transparent 55%),
    radial-gradient(ellipse at 90% 56%, rgba(165, 205, 230, .16), transparent 58%);
  transform: translate3d(0,0,0);
  will-change: transform;
  animation: scot-mist 58s ease-in-out infinite alternate;
}
.scot-mist span:nth-child(2) { bottom: -14%; opacity: .62; animation-duration: 82s; animation-direction: alternate-reverse; }
@keyframes scot-mist { from { transform: translate3d(0,0,0); } to { transform: translate3d(12%,0,0); } }

/* embers rising (spans are created by scotland.js) */
.scot-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: paint; }
.scot-embers span {
  position: absolute; bottom: 4px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #ffe7a8 0%, var(--sc-amber) 58%, transparent 74%);
  box-shadow: 0 0 5px rgba(255, 170, 60, .58);
  will-change: transform, opacity;
  animation: scot-ember var(--dur, 10s) linear var(--delay, 0s) infinite;
}
@keyframes scot-ember {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .95; }
  70%  { opacity: .55; }
  100% { transform: translate3d(var(--drift, 30px), -340px, 0); opacity: 0; }
}

/* ==========================================================================
   5. TARTAN STRIP - blue / heather / gold / silver
   ========================================================================== */

.scot-tartan {
  height: 9px;
  background:
    linear-gradient(180deg, transparent 0 3px, rgba(220, 176, 74, .55) 3px 4px, transparent 4px 5px, rgba(238, 241, 245, .25) 5px 6px, transparent 6px),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(220, 176, 74, .95) 17px 19px, transparent 19px 38px, rgba(238, 241, 245, .65) 38px 39px, transparent 39px 66px),
    repeating-linear-gradient(90deg, var(--sc-flag-deep) 0 26px, var(--sc-heather) 26px 42px, var(--sc-flag-deep) 42px 66px);
  border-top: 1px solid rgba(220, 176, 74, .7);
  border-bottom: 1px solid rgba(0, 0, 0, .6);
}

/* ==========================================================================
   6. NAVIGATION - tab bar on top, ribbon of the open tab underneath
   --------------------------------------------------------------------------
   HTML:  .scot-nav > nav.navbar > (brand, toggler, #lfm_members_mainmenu > ul.scot-tabs, cta)
          ul.scot-tabs > li.nav-item > a.nav-link + ul.lfm_menu_tab (the ribbon)
   ========================================================================== */

.scot-nav {
  position: relative;
  z-index: 1030;
  background: linear-gradient(180deg, #0c1c2e 0%, #06101c 100%);
  border-bottom: 1px solid rgba(220, 176, 74, .6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}

.scot-navbar.navbar {
  padding: 0 1.25rem;
  min-height: var(--sc-row1);
  align-items: center;
}

/* ---- brand ---- */
.scot-brand {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 1.2rem 0 0; padding: 0;
  text-decoration: none !important;
}
.scot-brand .lfm_menu_logo { height: 46px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); transition: height .25s ease, transform .25s ease; }
.scot-brand:hover .lfm_menu_logo { transform: translateY(-1px) scale(1.04); }
.scot-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.scot-brand-text b {
  font-family: var(--sc-font-serif); font-style: italic; font-weight: 700;
  font-size: 1.5rem; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff1bd 0%, var(--sc-gold-bright) 40%, #b7801f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scot-brand-text i {
  font-family: var(--sc-font-display); font-style: normal; font-weight: 600;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sc-silver);
}

/* ---- the three top-level tabs ---- */
.scot-tabs { margin: 0; padding: 0; list-style: none; align-items: stretch; }
.scot-tabs > .nav-item { position: static; display: flex; }

.scot-tabs > .nav-item > .nav-link {
  position: relative;
  display: flex; align-items: center;
  height: var(--sc-row1);
  padding: 0 1.15rem;
  font-family: var(--sc-font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--sc-silver);
  transition: color .2s ease, background .2s ease, height .25s ease;
}
.scot-tabs > .nav-item > .nav-link i { color: var(--sc-gold-mid); margin-right: .5rem; font-size: .9em; }
.scot-tabs > .nav-item > .nav-link:hover,
.scot-tabs > .nav-item > .nav-link:focus {
  color: var(--sc-gold-bright); text-decoration: none;
  text-shadow: 0 0 14px rgba(243, 197, 82, .55);
}
.scot-tabs > .nav-item.lfm_tab_opened > .nav-link {
  color: #fff;
  background: linear-gradient(180deg, rgba(220, 176, 74, 0) 0%, rgba(220, 176, 74, .16) 100%);
}
/* gold underline that grows in */
.scot-tabs > .nav-item > .nav-link::after {
  content: ""; position: absolute; left: 1.15rem; right: 1.15rem; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--sc-gold-bright), transparent);
  box-shadow: 0 0 12px rgba(243, 197, 82, .7);
  transform: scaleX(0); transition: transform .28s ease;
}
.scot-tabs > .nav-item:hover > .nav-link::after,
.scot-tabs > .nav-item.lfm_tab_opened > .nav-link::after { transform: scaleX(1); }

/* ---- the call to action ---- */
.scot-cta {
  display: inline-flex; align-items: center; gap: .15rem;
  margin-left: 1rem; padding: .55rem 1.2rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #20160a !important; text-decoration: none !important;
  background: linear-gradient(180deg, #fbe39a 0%, var(--sc-gold-mid) 46%, #a8741a 100%);
  border: 1px solid #8a5b0a; border-radius: var(--sc-radius-sm);
  box-shadow: 0 0 0 1px rgba(255, 240, 190, .35) inset, 0 8px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(243, 197, 82, .22);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease;
}
.scot-cta i { margin-right: .4rem; }
.scot-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: scot-shine 5.5s ease-in-out infinite;
}
@keyframes scot-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.scot-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 240, 190, .5) inset, 0 12px 26px rgba(0, 0, 0, .5), 0 0 26px rgba(243, 197, 82, .4); }

/* ---- hamburger ---- */
.scot-toggle.navbar-toggler {
  order: 3;
  align-items: center; gap: .45rem;
  margin-left: .6rem; padding: .5rem .8rem;
  font-family: var(--sc-font-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sc-gold-pale);
  background: rgba(220, 176, 74, .08);
  border: 1px solid rgba(220, 176, 74, .55); border-radius: var(--sc-radius-sm);
}
.scot-toggle.navbar-toggler:hover, .scot-toggle.navbar-toggler:focus { color: #fff; background: rgba(220, 176, 74, .18); outline: 0; }
.scot-toggle i { margin: 0; }

/* ---- second-level drop-downs (inside the ribbon) ---- */
.scot-nav .lfm_menu_tab li.dropdown { position: relative; }
/* Bootstrap's own caret is replaced by the chevron icon */
.scot-nav .dropdown-toggle::after { display: none; }
.scot-nav .lfm_menu_tab .scot-caret { font-size: .58em; margin: 0 0 0 .4rem; color: var(--sc-gold-mid); transition: transform .2s ease; }
.scot-nav .lfm_menu_tab li.scot-open > a .scot-caret { transform: rotate(180deg); }

.scot-nav .dropdown-menu {
  display: none; float: none;
  position: absolute; top: 100%; left: 0; right: auto;
  min-width: 220px; margin: 0; padding: .4rem;
  transform: none !important;
  background: linear-gradient(180deg, #0e2034, #08121f);
  border: 1px solid rgba(220, 176, 74, .6); border-radius: var(--sc-radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .5);
  z-index: 1040;
}
.scot-nav li.scot-open > .dropdown-menu { display: block; animation: scot-pop .16s ease; }
.scot-nav li.scot-flip > .dropdown-menu { left: auto; right: 0; }
@keyframes scot-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.scot-nav .dropdown-menu li { list-style: none; }
.scot-nav .dropdown-menu a {
  display: block; padding: .5rem .85rem; border-radius: var(--sc-radius-sm);
  font-size: .86rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
  color: #d3dae1;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.scot-nav .dropdown-menu a:hover, .scot-nav .dropdown-menu a:focus {
  background: rgba(220, 176, 74, .15); color: var(--sc-gold-bright); text-decoration: none; padding-left: 1.1rem;
}

/* ---- DESKTOP: ribbon pinned under the tab bar ---- */
@media (min-width: 992px) {
  .scot-nav {
    position: sticky; top: 0;
    padding-bottom: var(--scot-ribbon-h, var(--sc-ribbon));
    transition: box-shadow .25s ease;
  }
  .scot-nav.is-stuck { --sc-row1: 56px; }
  .scot-nav.is-stuck .scot-brand .lfm_menu_logo { height: 38px; }
  .scot-nav.is-stuck .scot-brand-text b { font-size: 1.3rem; }

  .scot-navbar .navbar-collapse { flex-grow: 1; }

  .scot-nav .lfm_menu_tab {
    display: none; flex-wrap: wrap; align-items: stretch;
    position: absolute; left: 0; right: 0; top: var(--sc-row1);
    margin: 0; padding: 0 1.25rem; list-style: none;
    min-height: var(--sc-ribbon);
    background: linear-gradient(180deg, #11273c 0%, #0b1a2b 100%);
    border-top: 1px solid rgba(220, 176, 74, .3);
    box-shadow: inset 0 8px 14px -10px rgba(0, 0, 0, .6);
    transition: top .25s ease;
  }
  .scot-tabs > .nav-item.lfm_tab_opened > .lfm_menu_tab { display: flex; }

  /* notch that points from the open tab down into the ribbon */
  .scot-tabs > .nav-item.lfm_tab_opened > .nav-link::before {
    content: ""; position: absolute; left: 50%; bottom: -1px; margin-left: -8px;
    border: 8px solid transparent; border-bottom-color: #11273c; border-top: 0;
    z-index: 2;
  }

  .scot-nav .lfm_menu_tab > li { position: relative; display: flex; align-items: stretch; }
  .scot-nav .lfm_menu_tab > li + li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px;
    background: var(--sc-gold); opacity: .55; transform: translate(-50%, -50%) rotate(45deg);
  }
  .scot-nav .lfm_menu_tab > li > a {
    display: flex; align-items: center;
    padding: .55rem 1.05rem; min-height: var(--sc-ribbon);
    font-size: .86rem; font-weight: 500; letter-spacing: .04em;
    color: #d3dae1; white-space: nowrap;
    transition: color .15s ease, background .15s ease;
  }
  .scot-nav .lfm_menu_tab > li > a:hover,
  .scot-nav .lfm_menu_tab > li > a:focus,
  .scot-nav .lfm_menu_tab > li.scot-open > a {
    color: var(--sc-gold-bright); text-decoration: none;
    background: linear-gradient(180deg, rgba(220, 176, 74, 0), rgba(220, 176, 74, .12));
    box-shadow: inset 0 -2px 0 var(--sc-gold-mid);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .scot-tabs > .nav-item > .nav-link { padding: 0 .8rem; font-size: .74rem; letter-spacing: .1em; }
  .scot-tabs > .nav-item > .nav-link i { display: none; }
  .scot-brand-text i { display: none; }
  .scot-nav .lfm_menu_tab > li > a { padding: .5rem .75rem; font-size: .82rem; }
}

/* ---- MOBILE / TABLET: accordion panel ---- */
@media (max-width: 991.98px) {
  .scot-toggle.navbar-toggler { display: inline-flex; }
  .scot-navbar.navbar { flex-wrap: wrap; padding: .5rem 1rem; min-height: 0; }
  .scot-brand { margin-right: auto; }
  .scot-brand .lfm_menu_logo { height: 40px; }
  .scot-brand-text b { font-size: 1.3rem; }
  .scot-cta { order: 2; margin-left: .5rem; padding: .5rem .9rem; }
  .scot-navbar .navbar-collapse { order: 4; flex-basis: 100%; margin-top: .6rem; border-top: 1px solid rgba(220, 176, 74, .35); }

  .scot-tabs { flex-direction: column; padding: .4rem 0; }
  .scot-tabs > .nav-item { display: block; border-bottom: 1px solid rgba(220, 176, 74, .12); }
  .scot-tabs > .nav-item > .nav-link { height: 50px; padding: 0 .4rem; }
  .scot-tabs > .nav-item > .nav-link::after { left: 0; right: 0; }
  .scot-tabs > .nav-item > .nav-link::before { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .6rem; position: absolute; right: .6rem; top: 50%; margin-top: -.45em; color: var(--sc-gold-mid); transition: transform .2s ease; }
  .scot-tabs > .nav-item.lfm_tab_opened:not(.lfm_tab_closed) > .nav-link::before { transform: rotate(180deg); }

  .scot-nav .lfm_menu_tab { display: none; margin: 0; padding: .2rem 0 .8rem .9rem; list-style: none; border-left: 2px solid rgba(220, 176, 74, .4); margin-left: .4rem; }
  .scot-tabs > .nav-item.lfm_tab_opened:not(.lfm_tab_closed) > .lfm_menu_tab { display: block; }
  .scot-nav .lfm_menu_tab > li > a { display: block; padding: .65rem .6rem; font-size: .95rem; font-weight: 500; color: #d3dae1; }
  .scot-nav .lfm_menu_tab > li > a:hover { color: var(--sc-gold-bright); text-decoration: none; }
  .scot-nav .lfm_menu_tab > li.dropdown > a { display: flex; align-items: center; justify-content: space-between; }

  .scot-nav li.scot-open > .dropdown-menu {
    display: block; position: static; min-width: 0; margin: 0 0 .3rem .5rem; padding: .15rem 0 .15rem .6rem;
    background: transparent; border: 0; border-left: 1px solid rgba(220, 176, 74, .3); border-radius: 0; box-shadow: none; animation: none;
  }
  .scot-nav .dropdown-menu a { white-space: normal; padding: .55rem .6rem; font-size: .92rem; }
}

@media (max-width: 575.98px) {
  .scot-topstrip-links { display: none; }
  .scot-topstrip-inner { justify-content: center; }
  .scot-cta span { display: none; }
  .scot-cta i { margin: 0; }
  .scot-toggle span { display: none; }
}

@media (max-width: 359.98px) {
  .scot-brand-text i { display: none; }
}

/* ==========================================================================
   7. PAGE SURFACE - parchment panel on the night sky
   Everything LFMTE prints sits inside it, so legacy pages keep dark-on-light
   contrast whatever inline colours they carry.
   ========================================================================== */

.scot-main { position: relative; z-index: 1; }
.scot-page-shell { max-width: 1560px; margin: 0 auto; padding: 30px 18px 8px; }

.scot-surface {
  position: relative;
  min-height: 420px;
  padding: 30px 30px 34px;
  color: var(--sc-ink);
  background:
    radial-gradient(1200px 360px at 50% 0, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(180deg, var(--sc-parch-50) 0%, var(--sc-parch) 45%, #ebe6d5 100%);
  border: 1px solid rgba(201, 150, 42, .75);
  border-radius: var(--sc-radius);
  box-shadow:
    0 0 0 4px rgba(5, 11, 22, .6),
    0 30px 70px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 0 90px rgba(150, 120, 50, .10);
}
/* inner gold keyline */
.scot-surface::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(201, 150, 42, .35); border-radius: 3px;
}
/* tartan along the top edge */
.scot-surface::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; pointer-events: none;
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(220, 176, 74, .95) 17px 19px, transparent 19px 38px, rgba(238, 241, 245, .6) 38px 39px, transparent 39px 66px),
    repeating-linear-gradient(90deg, var(--sc-flag-deep) 0 26px, var(--sc-heather) 26px 42px, var(--sc-flag-deep) 42px 66px);
}

/* ---- text on parchment ---- */
.scot-surface p, .scot-surface li, .scot-surface td, .scot-surface th, .scot-surface dd, .scot-surface dt,
.scot-surface label, .scot-surface legend, .scot-surface .lead, .scot-surface .lfm_descr { color: var(--sc-ink-soft); }
.scot-surface .lfm_descr_bold, .scot-surface strong, .scot-surface b { color: var(--sc-ink); }

.scot-surface h1, .scot-surface h2, .scot-surface h3, .scot-surface h4, .scot-surface h5, .scot-surface h6,
.scot-surface .h1, .scot-surface .h2, .scot-surface .h3, .scot-surface .h4, .scot-surface .h5, .scot-surface .h6,
.lfm_title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  color: #0a1a2e;
}
.scot-surface h1, .scot-surface .h1 { font-size: 2.1rem; }
.scot-surface h2, .scot-surface .h2 { font-size: 1.7rem; }
.scot-surface h3, .scot-surface .h3 { font-size: 1.4rem; }
.scot-surface h4, .scot-surface .h4 { font-size: 1.18rem; }
.scot-surface h5, .scot-surface .h5 { font-size: 1.02rem; }
.scot-surface h6, .scot-surface .h6 { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.display-1, .display-2, .display-3, .display-4 { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: .01em; }

.lfm_title { font-size: 2rem; }
.lfm_descr { font-family: var(--sc-font-sans); font-size: 16px; color: var(--sc-ink-soft); }
.lfm_descr_bold { font-family: var(--sc-font-sans); font-size: 16px; font-weight: 600; color: var(--sc-ink); }

/* gold flourish under page titles */
.lfm_title::after, .scot-title::after {
  content: ""; display: block; width: 96px; height: 9px; margin-top: .5rem;
  background:
    linear-gradient(90deg, var(--sc-gold-deep), var(--sc-gold-bright)) left center / 40px 2px no-repeat,
    linear-gradient(270deg, var(--sc-gold-deep), var(--sc-gold-bright)) right center / 40px 2px no-repeat;
  position: relative;
}
.lfm_title::before, .scot-title::before { content: none; }

.scot-surface a { color: var(--sc-link); }
.scot-surface a:hover, .scot-surface a:focus { color: var(--sc-link-hov); text-decoration: underline; }
.scot-surface hr { border-top: 1px solid var(--sc-line); }
.scot-surface .text-muted { color: var(--sc-muted) !important; }
.scot-surface small, .scot-surface .small { color: var(--sc-muted); }
.scot-surface blockquote { border-left: 3px solid var(--sc-gold); padding: .4rem 1rem; margin: 1rem 0; background: rgba(201, 150, 42, .08); font-family: var(--sc-font-serif); font-size: 1.15rem; }
.scot-surface code { color: #8a2d0b; background: var(--sc-parch-2); padding: .1rem .35rem; border-radius: 3px; }
.scot-surface pre { background: var(--sc-night-850); color: #dfe5ea; padding: 1rem; border-radius: var(--sc-radius); border: 1px solid var(--sc-night-600); }
.scot-surface pre code { background: transparent; color: inherit; padding: 0; }

.feedicon { color: var(--sc-gold); font-size: 20px; margin-right: 5px; }

/* ==========================================================================
   8. BUTTONS - squared "clan badge" buttons: gold, silver, heather, crimson
   ========================================================================== */

.btn, input[type="submit"]:not(.btn), input[type="button"]:not(.btn), input[type="reset"]:not(.btn), .buttonlink {
  font-family: var(--sc-font-sans);
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--sc-radius-sm);
  padding: .55rem 1.3rem;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-lg { padding: .8rem 1.9rem; font-size: .95rem; }
.btn-sm { padding: .32rem .8rem; font-size: .76rem; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(201, 150, 42, .35); }
.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn-primary, .buttonlink,
input[type="submit"]:not(.btn), input[type="button"]:not(.btn), input[type="reset"]:not(.btn) {
  color: #20160a;
  cursor: pointer;
  background: linear-gradient(180deg, #fbe39a 0%, var(--sc-gold-mid) 46%, #a8741a 100%);
  border: 1px solid #8a5b0a;
  text-shadow: 0 1px 0 rgba(255, 248, 220, .5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .75), 0 6px 14px rgba(90, 64, 12, .28);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.buttonlink:hover, .buttonlink:focus,
input[type="submit"]:not(.btn):hover, input[type="button"]:not(.btn):hover, input[type="reset"]:not(.btn):hover {
  color: #170f05;
  background: linear-gradient(180deg, #fff0bb 0%, #e8c25f 46%, var(--sc-gold-deep) 100%);
  border-color: #6f4807;
  box-shadow: inset 0 1px 0 rgba(255, 252, 232, .85), 0 10px 20px rgba(90, 64, 12, .38);
}
a.btn-primary, a.buttonlink, .scot-surface a.btn-primary, .scot-surface a.buttonlink { color: #20160a; }
a.btn-primary:hover, a.buttonlink:hover, .scot-surface a.btn-primary:hover, .scot-surface a.buttonlink:hover { color: #170f05; text-decoration: none; }

.btn-secondary, .btn-light {
  color: #0b1626;
  background: linear-gradient(180deg, #f6f8fa 0%, var(--sc-silver) 50%, #98a3ae 100%);
  border: 1px solid #7f8b97;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 14px rgba(20, 30, 45, .25);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-light:hover, .btn-light:focus {
  color: #050b16; background: linear-gradient(180deg, #ffffff 0%, #dce1e7 50%, #8895a1 100%); border-color: #5f6c78;
}
.btn-success {
  color: #fff; background: linear-gradient(180deg, #1f8a68 0%, #0f5a45 100%); border: 1px solid #0a3f30;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px rgba(8, 50, 38, .35);
}
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { color: #fff; background: linear-gradient(180deg, #27a47c 0%, #0b4a3c 100%); border-color: #07332a; }
.btn-danger {
  color: #fff; background: linear-gradient(180deg, #c93a3f 0%, #7d1418 100%); border: 1px solid #5c0d10;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px rgba(90, 12, 16, .35);
}
.btn-danger:hover, .btn-danger:focus { color: #fff; background: linear-gradient(180deg, #db4a4f 0%, #8e1a1e 100%); border-color: #5c0d10; }
.btn-info {
  color: #fff; background: linear-gradient(180deg, #2fb0d4 0%, #17708f 100%); border: 1px solid #0f566e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px rgba(10, 70, 90, .3);
}
.btn-info:hover, .btn-info:focus { color: #fff; background: linear-gradient(180deg, #46c2e4 0%, #1b7f9f 100%); }
.btn-warning {
  color: #2a1700; background: linear-gradient(180deg, #ffd27a 0%, var(--sc-amber) 50%, #d77d0c 100%); border: 1px solid #b0640a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px rgba(120, 70, 8, .3);
}
.btn-warning:hover, .btn-warning:focus { color: #1c0f00; background: linear-gradient(180deg, #ffdc92 0%, #f7ae38 50%, #c06f08 100%); }
.btn-dark { color: var(--sc-gold-pale); background: linear-gradient(180deg, #14304a, #07121e); border: 1px solid rgba(220, 176, 74, .6); }
.btn-dark:hover, .btn-dark:focus { color: #fff; background: linear-gradient(180deg, #1b4162, #0a1a2b); }

.btn-outline-primary { color: var(--sc-gold-deep); border: 1px solid var(--sc-gold); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #20160a; background: linear-gradient(180deg, #fbe39a, var(--sc-gold-mid)); border-color: #8a5b0a;
}
.btn-outline-secondary { color: var(--sc-ink-soft); border: 1px solid var(--sc-steel); background: transparent; }
.btn-outline-secondary:hover { color: #0b1626; background: var(--sc-silver); border-color: #7f8b97; }
.btn-link { color: var(--sc-link); font-weight: 600; text-transform: none; letter-spacing: 0; }
.btn-link:hover, .btn-link:focus { color: var(--sc-link-hov); }
.btn:disabled, .btn.disabled { opacity: .55; transform: none; }

.buttonlink { display: inline-block; text-decoration: none; }

/* social buttons keep their own colour but pick up the shape */
.btn-facebook, .btn-twitter, .btn-linkedin, .btn-google, .btn-youtube { border-radius: var(--sc-radius-sm); }

/* ==========================================================================
   9. CARDS, PANELS, STAT TILES
   ========================================================================== */

.card, .panel {
  background: #fffdf7;
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  color: var(--sc-ink-soft);
  box-shadow: 0 8px 22px rgba(60, 46, 16, .10);
}
.card-header, .panel-heading {
  font-family: var(--sc-font-display); font-weight: 700; letter-spacing: .05em;
  color: var(--sc-gold-pale);
  background: linear-gradient(135deg, #0a1a2b 0%, #13304a 100%);
  border-bottom: 2px solid var(--sc-gold);
  border-radius: calc(var(--sc-radius) - 1px) calc(var(--sc-radius) - 1px) 0 0;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.scot-surface .card-header h1, .scot-surface .card-header h2, .scot-surface .card-header h3,
.scot-surface .card-header h4, .scot-surface .card-header h5, .scot-surface .card-header h6 { color: var(--sc-gold-pale); margin: 0; }
.card-footer { background: var(--sc-parch-2); border-top: 1px solid var(--sc-line); }
.card-title { color: #0a1a2e; font-family: var(--sc-font-display); }
.card-body { color: var(--sc-ink-soft); }

/* feature card with a tartan top: add class="card-scot" */
.card-scot, .card-tulip { position: relative; overflow: hidden; }
.card-scot::before, .card-tulip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(220, 176, 74, .95) 17px 19px, transparent 19px 38px, rgba(238, 241, 245, .6) 38px 39px, transparent 39px 66px),
    repeating-linear-gradient(90deg, var(--sc-flag-deep) 0 26px, var(--sc-heather) 26px 42px, var(--sc-flag-deep) 42px 66px);
}

.stat-card {
  background: linear-gradient(160deg, #0d2034 0%, #07121e 100%);
  border: 1px solid rgba(220, 176, 74, .55); border-radius: var(--sc-radius);
  padding: 1.1rem 1.2rem; color: var(--sc-silver);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.stat-card .stat-value { font-family: var(--sc-font-display); font-size: 1.9rem; font-weight: 700; color: var(--sc-gold-bright); line-height: 1.1; }
.stat-card .stat-label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-silver); }
.stat-card .stat-icon { color: var(--sc-amber); font-size: 1.5rem; }

/* ==========================================================================
   10. FORMS
   ========================================================================== */

.form-control, .custom-select, .custom-file-label,
input[type="text"]:not(.form-control), input[type="url"]:not(.form-control), input[type="email"]:not(.form-control),
input[type="password"]:not(.form-control), input[type="number"]:not(.form-control), input[type="tel"]:not(.form-control),
input[type="search"]:not(.form-control), input[type="date"]:not(.form-control),
select:not(.form-control):not(.custom-select), textarea:not(.form-control) {
  font-family: var(--sc-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--sc-ink);
  background-color: #fffdf8;
  border: 1px solid var(--sc-line-dark);
  border-radius: var(--sc-radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input[type="text"]:not(.form-control), input[type="url"]:not(.form-control), input[type="email"]:not(.form-control),
input[type="password"]:not(.form-control), input[type="number"]:not(.form-control), input[type="tel"]:not(.form-control),
input[type="search"]:not(.form-control), input[type="date"]:not(.form-control),
select:not(.form-control):not(.custom-select), textarea:not(.form-control) { padding: .42rem .7rem; }

.form-control:focus, .custom-select:focus, .custom-file-input:focus ~ .custom-file-label,
input:not(.form-control):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
select:not(.form-control):not(.custom-select):focus, textarea:not(.form-control):focus {
  outline: 0;
  color: var(--sc-ink);
  background-color: #fff;
  border-color: var(--sc-gold);
  box-shadow: 0 0 0 .2rem rgba(201, 150, 42, .28);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--sc-parch-2); color: var(--sc-muted); }
.form-control::placeholder, input:not(.form-control)::placeholder, textarea:not(.form-control)::placeholder { color: #8c8567; opacity: 1; }
.input-group-text { color: var(--sc-gold-pale); background: linear-gradient(180deg, #13304a, #0a1a2b); border: 1px solid #0a1a2b; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sc-gold); border-color: var(--sc-gold-deep); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(201, 150, 42, .28); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--sc-gold); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sc-gold-deep); }
.scot-surface label, .scot-surface .form-label, .scot-surface .col-form-label { font-weight: 600; color: var(--sc-ink); }

/* ==========================================================================
   11. TABLES
   ========================================================================== */

.scot-surface .table { color: var(--sc-ink-soft); background: transparent; }
.table thead th {
  font-family: var(--sc-font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-gold-pale);
  background: linear-gradient(180deg, #13304a, #0a1a2b);
  border-bottom: 2px solid var(--sc-gold);
  border-top: 0; vertical-align: middle;
}
.table td, .table th { border-top: 1px solid var(--sc-line); padding: .7rem .85rem; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(201, 150, 42, .07); }
.table-hover tbody tr:hover { background-color: rgba(201, 150, 42, .15); color: var(--sc-ink); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--sc-line); }
.thead-dark th { color: var(--sc-gold-pale); background: #0a1a2b; border-color: #0a1a2b; }
.thead-light th { color: var(--sc-ink); background: var(--sc-parch-3); border-color: var(--sc-line-dark); }
.table-responsive { border-radius: var(--sc-radius); }

/* ==========================================================================
   12. ALERTS, BADGES, PAGINATION, TABS, LISTS, MODALS, PROGRESS
   ========================================================================== */

.alert { border-radius: var(--sc-radius); border: 1px solid transparent; border-left-width: 5px; }
.alert-success { color: #0b3d2e; background: #dff1e6; border-color: #a9d5bb; border-left-color: #0f7a54; }
.alert-danger  { color: #6a1216; background: #f8e1e1; border-color: #e3b0b2; border-left-color: #b3282d; }
.alert-warning { color: #5a3a05; background: #fbefd0; border-color: #ecd08c; border-left-color: var(--sc-amber); }
.alert-info    { color: #0d4258; background: #dcf0f7; border-color: #a9d4e4; border-left-color: #1d8fb3; }
.alert-primary { color: var(--sc-flag-deep); background: #dde7f4; border-color: #b2c5e0; border-left-color: var(--sc-flag); }
.alert-secondary, .alert-light { color: var(--sc-ink-soft); background: var(--sc-parch-2); border-color: var(--sc-line); border-left-color: var(--sc-steel); }
.alert-dark { color: var(--sc-silver); background: #0e2034; border-color: #17354c; border-left-color: var(--sc-gold); }
.alert a { font-weight: 700; }

.badge { font-weight: 600; letter-spacing: .06em; border-radius: var(--sc-radius-sm); }
.badge-primary { color: #20160a; background: linear-gradient(180deg, #fbe39a, var(--sc-gold-mid)); }
.badge-secondary { color: #0b1626; background: var(--sc-silver); }
.badge-success { background: #0f6a4e; }
.badge-danger { background: #a3232a; }
.badge-warning { color: #2a1700; background: var(--sc-amber); }
.badge-info { background: #1d8fb3; }
.badge-dark { color: var(--sc-gold-pale); background: #0a1a2b; }

.page-link { color: var(--sc-link); background: #fffdf7; border: 1px solid var(--sc-line); }
.page-link:hover { color: #20160a; background: var(--sc-gold-pale); border-color: var(--sc-gold); }
.page-item.active .page-link { color: #20160a; background: linear-gradient(180deg, #fbe39a, var(--sc-gold-mid)); border-color: #8a5b0a; }
.page-item.disabled .page-link { color: #9b9577; background: var(--sc-parch-2); }

.nav-tabs { border-bottom: 2px solid var(--sc-gold); }
.scot-surface .nav-tabs .nav-link { color: var(--sc-ink-soft); font-weight: 600; border: 1px solid transparent; border-radius: var(--sc-radius-sm) var(--sc-radius-sm) 0 0; }
.scot-surface .nav-tabs .nav-link:hover { color: var(--sc-link); border-color: var(--sc-line) var(--sc-line) transparent; }
.scot-surface .nav-tabs .nav-link.active { color: var(--sc-gold-pale); background: linear-gradient(180deg, #13304a, #0a1a2b); border-color: #0a1a2b; }
.scot-surface .nav-pills .nav-link { color: var(--sc-ink-soft); font-weight: 600; border-radius: var(--sc-radius-sm); }
.scot-surface .nav-pills .nav-link.active, .scot-surface .nav-pills .show > .nav-link { color: #20160a; background: linear-gradient(180deg, #fbe39a, var(--sc-gold-mid)); }

.list-group-item { color: var(--sc-ink-soft); background: #fffdf7; border: 1px solid var(--sc-line); }
.list-group-item.active { color: var(--sc-gold-pale); background: linear-gradient(135deg, #0a1a2b, #13304a); border-color: #0a1a2b; }
.list-group-item-action:hover, .list-group-item-action:focus { color: var(--sc-ink); background: var(--sc-gold-pale); }

/* generic (non-navigation) drop-downs */
.dropdown-menu { background: #fffdf7; border: 1px solid var(--sc-line-dark); border-radius: var(--sc-radius); box-shadow: 0 14px 34px rgba(30, 24, 8, .25); }
.dropdown-item { color: var(--sc-ink-soft); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--sc-ink); background: var(--sc-gold-pale); }
.dropdown-item.active, .dropdown-item:active { color: #20160a; background: var(--sc-gold-mid); }

.modal-content { background: var(--sc-parch-50); color: var(--sc-ink-soft); border: 1px solid var(--sc-gold); border-radius: var(--sc-radius); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.modal-header { color: var(--sc-gold-pale); background: linear-gradient(135deg, #0a1a2b, #13304a); border-bottom: 2px solid var(--sc-gold); }
.modal-header .modal-title { color: var(--sc-gold-pale); font-family: var(--sc-font-display); }
.modal-header .close { color: var(--sc-gold-pale); text-shadow: none; opacity: .85; }
.modal-footer { border-top: 1px solid var(--sc-line); }

.progress { height: 1rem; background: var(--sc-parch-3); border-radius: 999px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); }
.progress-bar { background: linear-gradient(180deg, #fbe39a, var(--sc-gold) 60%, var(--sc-gold-deep)); color: #20160a; }

.breadcrumb { background: var(--sc-parch-2); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); }
.breadcrumb-item.active { color: var(--sc-muted); }
.jumbotron { color: var(--sc-ink-soft); background: linear-gradient(160deg, #fffdf7, var(--sc-parch-2)); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); }

.bg-primary { background-color: var(--sc-flag-deep) !important; }
.bg-dark { background-color: var(--sc-night-800) !important; }
.bg-light { background-color: var(--sc-parch-2) !important; }
.text-primary { color: var(--sc-gold-deep) !important; }
.border-primary { border-color: var(--sc-gold) !important; }

.profilepic_small { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sc-gold); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.profilepic_med   { width: 75px; height: 75px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sc-gold); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.profilepic_large { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 5px solid var(--sc-gold); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }

/* ==========================================================================
   13. HELPERS USED BY LFMTE PAGE CONTENT
   (the old "tulip" class names are kept as aliases so existing page HTML works)
   ========================================================================== */

/* full-width band, e.g. page section headers */
.infobar {
  width: 100%; padding: 15px 0;
  color: var(--sc-silver-hi);
  background: linear-gradient(135deg, #07121e 0%, #13304a 55%, #0a1a2b 100%);
  border-top: 1px solid var(--sc-gold); border-bottom: 1px solid var(--sc-gold);
}
.infobar h1, .infobar h2, .infobar h3, .scot-surface .infobar h1, .scot-surface .infobar h2, .scot-surface .infobar h3 { color: var(--sc-gold-pale); }
.infobar a { color: var(--sc-gold-bright); text-decoration: underline; }

.vcenter { display: flex; align-items: center; }

.hero-scot, .hero-tulip {
  position: relative; overflow: hidden; border-radius: var(--sc-radius);
  background: linear-gradient(rgba(5, 11, 22, .55), rgba(5, 11, 22, .8)), url("images/footer_scene.jpg") center / cover no-repeat;
  color: var(--sc-silver-hi); padding: 3.5rem 2rem; text-align: center;
  border: 1px solid var(--sc-gold);
}
.hero-scot h1, .hero-scot h2, .hero-tulip h1, .hero-tulip h2, .scot-surface .hero-scot h1, .scot-surface .hero-scot h2 { color: var(--sc-gold-pale); }
.hero-scot p, .hero-tulip p, .scot-surface .hero-scot p { color: var(--sc-silver); }

.img-scot, .img-tulip { border-radius: var(--sc-radius); border: 1px solid var(--sc-gold); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); max-width: 100%; height: auto; }

/* thistle-and-diamond divider: <div class="scot-divider"></div> */
.scot-divider, .tulip-divider { position: relative; height: 18px; margin: 1.6rem 0; text-align: center; }
.scot-divider::before, .tulip-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sc-gold), transparent);
}
.scot-divider::after, .tulip-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  background: var(--sc-gold); border: 2px solid var(--sc-parch); box-shadow: 0 0 0 1px var(--sc-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.section-scot-alt, .section-tulip-alt { padding: 3rem 0; background: linear-gradient(180deg, var(--sc-parch-2), var(--sc-parch)); }
.eyebrow { display: inline-block; font-family: var(--sc-font-display); font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--sc-gold-deep); }
.round-md { border-radius: var(--sc-radius) !important; }
.round-sm { border-radius: var(--sc-radius-sm) !important; }

/* the stock homepage marks its grey band with an inline style: repaint it midnight */
section[style*="#555555"], section[style*="#555"], div[style*="#555555"].infobar {
  background: linear-gradient(135deg, #07121e 0%, #13304a 55%, #0a1a2b 100%) !important;
  border-top: 1px solid var(--sc-gold); border-bottom: 1px solid var(--sc-gold);
  color: var(--sc-silver-hi);
}
section[style*="#555555"] h1, section[style*="#555555"] h2, section[style*="#555555"] p,
section[style*="#555555"] .lead, section[style*="#555555"] .text-white { color: var(--sc-silver-hi) !important; }
.scot-surface section[style*="#555555"] h1, .scot-surface section[style*="#555555"] h2 { color: var(--sc-gold-pale) !important; }
section[style*="#555555"] .btn-primary:hover { transform: translateY(-1px); }

/* frame around the surf bar */
.surf-frame { border: 1px solid var(--sc-gold); border-radius: var(--sc-radius); background: var(--sc-night-850); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); padding: .75rem; }
.surf-frame iframe { border: 0; border-radius: var(--sc-radius-sm); width: 100%; background: #fff; }

/* ==========================================================================
   14. FOOTER - the castle gate at dusk
   ========================================================================== */

.lfm_footer.scot-footer {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 48px;
  color: #c4cfda;
  background: var(--sc-night-950);
  border-top: 1px solid rgba(220, 176, 74, .6);
}
.scot-footer-scene {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 11, 22, .98) 0%, rgba(5, 11, 22, .80) 42%, rgba(5, 11, 22, .55) 100%),
    url("images/footer_scene.jpg") center bottom / cover no-repeat;
}
.scot-footer-shell { max-width: 1560px; margin: 0 auto; padding: 38px 30px 22px; }

.scot-footer-brand { display: flex; gap: 1.2rem; align-items: flex-start; }
.scot-footer-crest { width: 64px; height: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)); }
.scot-footer-title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-gold-bright); }
.scot-footer-motto { margin: .15rem 0 .6rem; font-family: var(--sc-font-serif); font-style: italic; font-size: 1.2rem; color: var(--sc-silver-hi); }
.scot-footer-copy { margin: 0; max-width: 46ch; font-size: .92rem; color: #aebbc8; }

.scot-footer-head {
  margin: 0 0 .9rem; padding-bottom: .55rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sc-gold-mid); border-bottom: 1px solid rgba(220, 176, 74, .4);
}
.scot-footer-links { display: flex; flex-direction: column; gap: .15rem; }
.scot-footer-links a { padding: .32rem 0; font-size: .95rem; color: #d3dae1; transition: color .15s ease, transform .15s ease; }
.scot-footer-links a i { width: 1.4rem; margin: 0; color: var(--sc-amber); }
.scot-footer-links a:hover { color: var(--sc-gold-bright); text-decoration: none; transform: translateX(3px); }

.scot-footer-call {
  height: 100%; padding: 1.25rem 1.4rem;
  background: rgba(5, 11, 22, .80);
  border: 1px solid rgba(220, 176, 74, .5); border-radius: var(--sc-radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 0 40px rgba(243, 160, 43, .06);
}
.scot-footer-call-eyebrow { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sc-amber); }
.scot-footer-call-eyebrow i { color: var(--sc-moon); }
.scot-footer-call strong { display: block; margin: .45rem 0 .9rem; font-family: var(--sc-font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--sc-silver-hi); }
.scot-footer-btn {
  display: inline-block; padding: .55rem 1.4rem;
  font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: #20160a !important;
  background: linear-gradient(180deg, #fbe39a 0%, var(--sc-gold-mid) 46%, #a8741a 100%);
  border: 1px solid #8a5b0a; border-radius: var(--sc-radius-sm);
  transition: transform .15s ease, box-shadow .2s ease;
}
.scot-footer-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 22px rgba(243, 197, 82, .45); }

.scot-footer-bottom {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 30px; padding: 16px 56px 0 0;
  border-top: 1px solid rgba(220, 176, 74, .3);
  font-size: .84rem; color: #93a2b1;
}
.scot-footer-bottom p { margin: 0; color: #93a2b1; }
.scot-footer-credit a { color: var(--sc-gold-mid); font-weight: 500; }
.scot-footer-credit a:hover { color: var(--sc-gold-bright); }
.scot-totop {
  position: absolute; right: 0; top: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0;
  color: var(--sc-gold-bright); background: rgba(5, 11, 22, .7);
  border: 1px solid var(--sc-gold); border-radius: var(--sc-radius-sm);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.scot-totop i { margin: 0; }
.scot-totop:hover { color: #20160a; background: var(--sc-gold-bright); text-decoration: none; transform: translateY(-2px); }
.lfm_footer .scot-tartan { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }

/* ==========================================================================
   15. RESPONSIVE + MOTION
   ========================================================================== */

@media (max-width: 991.98px) {
  html { scroll-padding-top: 20px; }
  .scot-page-shell { padding: 20px 10px 4px; }
  .scot-surface { padding: 24px 18px 28px; }
  .scot-footer-shell { padding: 34px 18px 20px; }
}
@media (max-width: 575.98px) {
  .scot-surface h1, .scot-surface .h1, .lfm_title { font-size: 1.6rem; }
  .scot-surface h2, .scot-surface .h2 { font-size: 1.35rem; }
  .scot-surface { padding: 22px 14px 26px; }
  .scot-footer-brand { flex-direction: column; }
  .scot-footer-bottom { padding-right: 0; flex-direction: column; align-items: flex-start; }
  .scot-totop { top: -52px; }
}
@media (max-width: 889px) {
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scot-mist span, .scot-embers span, .scot-cta::after { animation: none !important; }
  .scot-embers { display: none; }
  * { transition-duration: .01ms !important; }
}

/* ========================================================================== 
   MYSTERIOUS SCOTLAND TRAFFIC SALES PAGE WRAPPER FIX
   The standard LFMTE content.php wraps page output in .scot-surface, which is
   intentionally parchment/cream for normal system pages. When the custom
   .mst-sales homepage is present, remove ONLY that outer parchment surface so
   the 80% sales page sits directly on the theme's night background.
   ========================================================================== */

.scot-page-shell:has(.mst-sales) {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.scot-surface:has(.mst-sales) {
  min-height: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.scot-surface:has(.mst-sales)::before,
.scot-surface:has(.mst-sales)::after {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   MYSTERIOUS SCOTLAND MEMBER DASHBOARD — REMOVE PARCHMENT PAGE FRAME
   The custom .msd dashboard already owns its full visual surface, so the
   generic .scot-surface parchment wrapper must not add a second white frame.
   Other LFMTE pages keep the normal parchment panel unchanged.
   ========================================================================== */

.scot-page-shell:has(.msd) {
  max-width: 1560px;
  width: 100%;
  padding: 30px 18px 8px;
}

.scot-surface:has(.msd) {
  min-height: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.scot-surface:has(.msd)::before,
.scot-surface:has(.msd)::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 767.98px) {
  .scot-page-shell:has(.msd) {
    padding: 18px 10px 6px;
  }
}