/* ============================================
   JACQTOURS — Global Stylesheet
   Design A System — Mockup 08
   ============================================ */

/* ── VARIABLES ── */
:root {
  --navy:       #043042;
  --cerise:     #ed1858;
  --cerise-dk:  #c4144e;
  --grey:       #a8a8a8;
  --maroon:     #3d0020;
  --pink:       #ff93ac;
  --off-white:  #faf8f5;
  --white:      #ffffff;
  --body:       #2a2a2a;

  --font-heading: 'Playfair Display', serif;
  --font-card:    'Montserrat', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;

  --container:  1200px;
  --gutter:     40px;
  --nav-height: 120px;
  --section-v:  96px;
  --radius:     6px;
}

/* ── SOURCE BADGE ──
   The small Instagram mark on a Reel card. Lives here, not in a page
   stylesheet, because the same mark appears on three surfaces — the Gallery
   card, the About card and the tour tile — and three copies would drift.

   It says "this opens Instagram", because a Reel needs a second tap on
   Instagram's own play button where a YouTube film starts immediately. */
.jt-src-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;   /* never intercept the click on the card */
}
/* On a title card the ground is already dark, so the disc would read as a
   smudge — the mark alone is enough. */
.video-thumb--titled .jt-src-badge,
.highlight-card--titled .jt-src-badge {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 18px;
  background: var(--off-white);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }


/* ── CONTAINER ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── TYPOGRAPHY ── */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--cerise); margin-bottom: 30px;
}
/* No leading dash. There WAS a 20x2px cerise rule here, and every single place
   .section-label is used switched it off again — thirteen `display: none`
   overrides across bespoke.css, home.css, single-tour.css and tours.css. It
   rendered nowhere on the site.
   Removed 7 Aug 2026 rather than adding a fourteenth override, which is what
   Jacq's report started as: the dash showed in the two tour modals purely
   because that was the one spot nobody had opted out of yet. A base rule
   nothing wants, kept alive by a list of exceptions, produces exactly that bug
   again for the next section anyone adds.
   The `gap: 8px` above is harmless with one child and is left alone. */
.section-heading {
  font-family: var(--font-heading);
  font-size: 48px; font-weight: 900;
  color: var(--navy); line-height: 1.1;
  letter-spacing: -1px; margin-bottom: 20px;
}
.section-heading em { font-style: italic; color: var(--cerise); }
.section-sub {
  font-size: 18px;
  color: #505050;
  line-height: 1.6;
  max-width: 580px;
}
.section-geo-pattern {
  display: block;
  margin-bottom: 16px;
}
.filter-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 8px 20px;
  cursor: pointer;
}

/* ── BASE PARAGRAPH ── */
p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 18px;
  color: #505050;
  line-height: 1.6;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  background: var(--cerise); color: #fff;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border: none; cursor: pointer; border-radius: 4px;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--cerise-dk); }

.btn-outline-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.5); color: #fff;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; border-radius: 4px;
  transition: all 0.2s;
}
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--navy);
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
}

/* ── WP admin bar offset (logged-in admins only; public site unaffected) ──
   The admin bar is fixed at top:0, and WP pushes the page down via
   html{margin-top:32px}. Our .nav is also fixed at top:0, so without this it
   slides under the admin bar. Drop the fixed nav by the admin-bar height so
   both are visible; the hero clears the nav via its own margin-top, so it
   follows automatically. WP uses 32px ≥783px and 46px below. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}
.nav-logo {
  display: flex; align-items: center;
}
.nav-links {
  display: flex; align-items: center; gap: 40px;
}
.nav-links a {
  font-family: var(--font-card);
  font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.btn-signin {
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8);
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400;
  background: none; cursor: pointer; border-radius: 0; transition: all 0.2s;
}
.btn-signin:hover { border-color: #fff; color: #fff; }
.btn-subscribe {
  padding: 8px 20px; background: var(--cerise); color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border: none; cursor: pointer; border-radius: 0; transition: background 0.2s;
}
.btn-subscribe:hover { background: var(--cerise-dk); }

/* ── INNER PAGE HERO BAND ── */
.page-hero {
  background: var(--navy);
  margin-top: var(--nav-height);
  padding: 40px 48px 48px;
  position: relative; overflow: hidden;
  min-height: 220px;
  display: flex; align-items: stretch;
}
/* Content fills hero height: breadcrumb pinned top-left, H1 + P bottom-left */
.page-hero-content {
  position: relative; z-index: 2; max-width: var(--container); width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: 52px; font-weight: 700; color: #fff;
  letter-spacing: -1.5px; line-height: 1.1;
  margin-bottom: 20px;
}
.page-hero h1 em { font-style: italic; color: var(--cerise); }
.page-hero p {
  font-size: 16px; color: rgba(255,255,255,0.65); /* intentional override — dark bg */
  max-width: 720px; line-height: 1.5;
}

/* Geometric pattern top-right.
   NOTE: .page-hero-pattern is legacy and unused — no template references it.
   The live pattern is the .hero-geo-svg <img> below. */

/* Inner-page hero pattern — hero-geo-pattern.svg, shared by all 11 inner pages.
   Client feedback 30 Jul 2026 (items 01 + 08).

   🔴 NO EXPLICIT HEIGHT, DELIBERATELY. The image renders at its INTRINSIC size
   and is vertically centred, so .page-hero's overflow:hidden crops it equally
   top and bottom — "crop the patterns in a centralised way (crop top & bottom
   equally) rather than cropping the bottom section".

   Setting height:100% (or any fixed px) SCALES THE ICONS, which the client
   ruled out: "the sizes of the icons on the right is good so prob have to crop
   some rows off". Leaving it intrinsic also means the artwork can be redrawn
   at any size with no CSS change — the icons are always 1:1.

   This rule used to be pasted into all 10 page stylesheets. It lives here now;
   do not reintroduce per-page copies (see the mobile note below for why). */
.hero-geo-svg {
  position: absolute; right: 0; top: 50%;
  width: auto; height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ── FOOTER ── */
.footer {
  background: var(--navy);
  padding: 64px 0 0;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-grid {
  display: flex; justify-content: flex-start;
  gap: 80px;
}
.footer-brand {
  flex: 0 0 300px;
}
.footer-cols {
  display: flex; gap: 64px;
  margin-left: 80px;
}
.footer-logo {
  margin-bottom: 20px;
}
.footer-tagline {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px; font-weight: 400;
  color: #A8A8A8; /* intentional override — dark bg */
  line-height: 1.6; margin-bottom: 24px;
}
.footer-social { display: flex; gap: 12px; }
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 0;
  padding: 0; width: auto; height: auto;
  cursor: pointer; transition: opacity 0.2s;
}
.social-icon:hover { opacity: 0.75; }
.footer-col h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase;
  color: #ffffff; margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul li a {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 18px; font-weight: 400;
  color: #A8A8A8; transition: color 0.2s;
}
.footer-col ul li a:hover { color: #ffffff; }
.footer-bottom {
  padding: 32px 0 48px;
}
.footer-bottom p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px; font-weight: 400;
  color: rgba(255,255,255,0.35); /* intentional override — dark bg */
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — shared foundation (nav, hero, footer, containers)
   Breakpoints: 1280 / 1024 / 768 / 480
   Page-specific rules live in each page's own \3c style> block.
   ═══════════════════════════════════════════════════════════ */

/* Hamburger button + mobile slide-in panel (injected by global.js).
   Hidden on desktop; shown at the mobile breakpoint below. */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: none; cursor: pointer; z-index: 1002;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: #fff; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-overlay {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.nav-mobile-overlay.open { opacity: 1; visibility: visible; }

.nav-mobile-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1002;
  width: min(82vw, 340px); background: var(--navy);
  padding: 96px 32px 40px;
  transform: translateX(100%); transition: transform 0.28s ease;
  overflow-y: auto; display: flex; flex-direction: column;
}
.nav-mobile-panel.open { transform: translateX(0); }
.nav-mobile-links { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.nav-mobile-links a {
  font-family: var(--font-card); font-size: 17px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,0.8);
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-mobile-links a:hover, .nav-mobile-links a.active { color: #fff; }
.nav-mobile-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.nav-mobile-actions .btn-signin,
.nav-mobile-actions .btn-subscribe { width: 100%; text-align: center; padding: 14px 20px; }

/* ── ≤1280: soften desktop gutters/nav-height so the nav fits sooner ── */
@media (max-width: 1280px) {
  .nav { padding: 0 32px; }
  .nav-links { gap: 28px; }
}

/* ── ≤1024: tablet — tighten hero + reduce nav-height, switch to hamburger nav.
   The desktop nav crowds through the whole tablet-portrait band: at ~961–995px
   the Sign In / Subscribe actions wrap to two lines and logo/links collide, and
   1024 is the canonical tablet-portrait width (iPad Pro 12.9"). So the hamburger
   takes over for the entire ≤1024 band — desktop nav only ≥1025. ── */
@media (max-width: 1024px) {
  :root { --nav-height: 88px; --gutter: 28px; }
  .nav-logo img { height: 42px !important; }
  .nav > .nav-links, .nav > .nav-actions { display: none; }
  .nav-burger { display: flex; width: 40px; height: 40px; padding: 9px; }
  .page-hero { padding: 32px 32px 36px; }
  .page-hero h1 { font-size: 40px; }
  /* Footer: the fixed 300px brand + 80px margin-left + 48px gap starves the
     link columns (~70–100px each), wrapping nearly every link to two lines.
     Shrink the brand, drop the extra margin, and let the columns share the
     freed width so links sit on one line. */
  .footer-grid { gap: 40px; }
  .footer-brand { flex: 1 1 220px; max-width: 260px; }
  .footer-cols { gap: 32px; margin-left: 0; flex: 2 1 auto; justify-content: space-between; }
  .footer-col { flex: 1 1 auto; }
}

/* ── ≤768: PHONE — stack footer, fluid hero ── */
@media (max-width: 768px) {
  :root { --gutter: 20px; --nav-height: 64px; }
  .nav { padding: 0 20px; }
  .nav-logo img { height: 27px !important; }
  .page-hero { padding: 28px 20px 32px; min-height: auto; }
  .page-hero h1 { font-size: 32px; letter-spacing: -0.5px; }
  /* Standardised inner-page hero subtitle (all pages use .page-hero-content p).
     Higher specificity so it wins over each page's own .page-hero-content p. */
  .page-hero p,
  .page-hero .page-hero-content p { font-size: 18px; }
  /* Inner-page hero geo SVG: a small top-right corner accent, not the full
     artwork — intrinsic width (363px) would cover the whole phone screen.
     Pinned to the top and NOT centred: centring it in the short band would
     drop it straight onto the subtitle.
     140px is a clearance limit, not a taste call. The subtitle starts 77.7px
     into the band (28 padding + 29.7 heading + 20 gap), so at the artwork's
     1.906 aspect anything wider than ~148px overlaps it. Re-derive this if the
     artwork's proportions change. */
  .page-hero .hero-geo-svg {
    height: auto; width: 140px;
    top: 0; transform: none;
  }
  /* footer stacks */
  .footer { padding: 48px 0 0; }
  .footer-grid { flex-direction: column; gap: 40px; }
  .footer-brand { flex: none; }
  .footer-cols { flex-wrap: wrap; gap: 32px 40px; margin-left: 0; }
  .footer-col { flex: 1 1 40%; }
  .footer-bottom { padding: 28px 0 40px; }
  .footer-bottom p { font-size: 14px; }
}

/* ── ≤480: SMALL PHONE — single-column footer, smaller type ── */
@media (max-width: 480px) {
  .page-hero h1 { font-size: 27px; }
  .page-hero p,
  .page-hero .page-hero-content p { font-size: 17px; }
  .footer-cols { flex-direction: column; gap: 28px; }
  .footer-col { flex: none; }
  .footer-col ul li a { font-size: 16px; }
  .nav-logo img { height: 26px !important; }
}

/* ── ≥769: INNER-PAGE MASTHEAD HEIGHT ──
   Client feedback 30 Jul 2026 (items 01, 02, 03). Jacq: "she finds the
   mastheads too tall resulting in having to scroll down quite a bit to view
   the content."

   Band goes 280px → 187px: 24 padding + 57 heading + 12 gap + 66 subtitle + 28.

   Deliberately LAST and deliberately padding-top/padding-bottom only, never the
   `padding` shorthand — the ≤1024 block above sets 32px horizontal for tablet
   and the base rule sets 48px for desktop. A shorthand here would flatten both
   to one value and break the tablet gutter.

   min-height:0 defeats the 220px base so the band is content-driven. The ≤768
   block keeps its own `min-height:auto`, so phones are unaffected by this. */
@media (min-width: 769px) {
  .page-hero { min-height: 187px; padding-top: 24px; padding-bottom: 28px; }
  .page-hero h1 { margin-bottom: 12px; }
  /* Five inner pages carry a one-line subtitle and five carry two, so a purely
     content-driven band would range 145–187px and crop the pattern by a
     different amount on each page. 187px is the tallest case (two-line
     subtitle), so every band matches and the artwork crops identically
     throughout — mastheads were uniform before this change and stay uniform.
     flex-start is what keeps that honest: .page-hero-content defaults to
     flex-end, which would bottom-align the block and push the heading 33px
     down the page on every short-subtitle page. Top-aligned, the heading sits
     24px into the band everywhere and the slack falls below the subtitle. */
  .page-hero-content { justify-content: flex-start; }
}

/* ── TOAST — brief bottom-centre message (e.g. the Save-a-tour sign-in prompt) ── */
.jt-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 13px 22px;
  border-radius: 40px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.jt-toast.show { opacity: 1; transform: translate(-50%, 0); }
.jt-toast a {
  color: var(--pink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.jt-toast a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   MOBILE NAV PANEL — cascade guard
   ══════════════════════════════════════════════════════════
   global.js clones .nav-links into the slide-in panel and adds
   .nav-mobile-links, so the panel element carries BOTH classes. At equal
   specificity (0,1,0) two other rules then beat the intended mobile styling:

     .nav-links { gap: 28px }        (the max-width:1280px block above, which
                                      sits LATER in this file than
                                      .nav-mobile-links{gap:4px})
     .nav-links { align-items:center; gap:40px }   (home.css, which loads AFTER
                                      global.css because page stylesheets depend
                                      on jacqtours-global)

   The homepage panel therefore rendered as centred 53px links inside a 256px
   drawer instead of a stacked full-width list, and the intended 4px gap never
   applied on any page.

   Scoping to the panel raises these to (0,2,0) so they win wherever the clone
   ends up. The deeper fragility remains: any page stylesheet that declares
   .nav-links will still leak into the panel. The root fix is for global.js to
   drop the .nav-links class from the clone — deliberately not done here, since
   changing the cloned DOM is a wider blast radius than a scoped rule.
   ══════════════════════════════════════════════════════════ */

.nav-mobile-panel .nav-mobile-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

/* ── Newsletter subscribe: status message + nav modal (added 2026-07-21) ──── */
.jt-subscribe-status {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  flex-basis: 100%;
}
.jt-subscribe-status.is-ok    { color: #1c7a4a; }
.jt-subscribe-status.is-error { color: var(--cerise-dk); }

.jt-subscribe-modal[hidden] { display: none; }
.jt-subscribe-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.jt-subscribe-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 48, 66, 0.55);
}
.jt-subscribe-dialog {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  max-width: 460px;
  width: 100%;
  padding: 36px 32px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.jt-subscribe-dialog h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  margin: 0 0 8px;
  font-size: 26px;
}
.jt-subscribe-dialog p {
  font-family: var(--font-body);
  color: #4a4a4a;
  margin: 0 0 18px;
  line-height: 1.55;
}
.jt-subscribe-x {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #8a8a8a;
  cursor: pointer;
}
.jt-subscribe-x:hover { color: var(--navy); }
.jt-subscribe-dialog .jt-subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* The modal reuses the homepage newsletter classes, but that appearance lives in
   home.css (front page only) and assumes the cerise band behind it — a white,
   border-less field would vanish on this white dialog. So the modal styles its own
   field + button here (global.css is loaded everywhere), matching Jacq's forms:
   the bordered field of .reg-field input and the square cerise submit of
   .reg-btn-next. Scoped to .jt-subscribe-dialog so it also wins over home.css on
   the front page. */
.jt-subscribe-dialog .newsletter-input {
  flex: 1 1 100%;
  height: auto;
  border: 1px solid #ddd; border-radius: var(--radius); padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--body);
  background: #fff; outline: none; box-sizing: border-box;
  transition: border-color 0.2s;
}
.jt-subscribe-dialog .newsletter-input::placeholder { color: #b3b3b3; }
.jt-subscribe-dialog .newsletter-input:focus { border-color: var(--cerise); }
.jt-subscribe-dialog .newsletter-btn {
  height: auto;
  font-family: var(--font-card); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cerise); color: #fff; border: none; border-radius: 0;
  padding: 14px 26px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s;
}
.jt-subscribe-dialog .newsletter-btn:hover { background: var(--cerise-dk); }
/* Same arrow bounce as every other CTA on hover. The @keyframes lives in the
   page CSS files (home/contact/faq/…), none of which load behind this global
   modal — so it's defined here too, identically, for site-wide reach. */
.jt-subscribe-dialog .newsletter-btn .btn-arrow {
  display: inline-flex; align-items: center; line-height: 1;
  transition: transform 0.2s ease;
}
.jt-subscribe-dialog .newsletter-btn:hover .btn-arrow { animation: arrowBounceRight 0.6s ease infinite; }
@keyframes arrowBounceRight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* Site-wide one-line flash (e.g. account-closed confirmation) — added 2026-07-21 */
.site-flash {
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  padding: 12px 20px;
}
.site-flash-ok { background: #eef7f1; color: #1c5c39; border-bottom: 2px solid #1c7a4a; }