@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — BUTTON SYSTEM
   "Midnight Brass", layer 4 of 5.
   --------------------------------------------------------------------------
   Load order:
     1. style.css                    <- legacy child theme
     2. skagit-design-system.css     <- tokens, base, focus, reduced motion
     3. skagit-components.css        <- component skins
     4. skagit-responsive.css        <- breakpoint layer
     5. skagit-buttons.css           <- THIS FILE
     6. skagit-header.css            <- header

   WHY THIS FILE EXISTS
   The brass gradient button is the thing people remember about this site, and
   it was being re-declared eight different ways: once per template, once per
   shortcode <style> block, and once more in skagit-components.css §6. This
   file makes it a single system with named variants, and then *aliases* every
   button class that already exists in the markup onto that system, so no PHP
   has to change for existing markup to pick it up.

   ---------------------------------------------------------------------------
   HOW TO USE IT  (new markup)
   ---------------------------------------------------------------------------
     PRIMARY (brass gradient, the CTA)
         <a class="sk-btn sk-btn--primary" href="…">Book Now</a>

     SECONDARY (navy outline, the "and also" action)
         <a class="sk-btn sk-btn--secondary" href="…">View Details</a>

     SECONDARY, CYAN FAMILY (offers / home cards keep the blue accent)
         <a class="sk-btn sk-btn--secondary sk-btn--cyan" href="…">Learn More</a>

     GHOST (no fill, no border — toolbars and dense rows)
         <button class="sk-btn sk-btn--ghost" type="button">Filter</button>

     LINK-STYLED (reads as text, behaves as a button)
         <a class="sk-btn sk-btn--link" href="…">Rules <i class="fas fa-chevron-right"></i></a>

     SIZES               add  sk-btn--sm   or  sk-btn--lg   (default is medium)
     FULL WIDTH          add  sk-btn--block
     ON A DARK GROUND    add  sk-btn--on-dark   (secondary / ghost / link only —
                              primary brass already works on both)
     DISABLED            <button class="sk-btn sk-btn--primary" disabled>…</button>
                         …or, on an <a>, class="is-disabled" + aria-disabled="true"
     LOADING             class="… is-loading" + aria-busy="true"
                         (label stays fully legible; a ring is appended)

   ---------------------------------------------------------------------------
   HOW IT BEATS THE LEGACY CSS  (read this before editing)
   ---------------------------------------------------------------------------
   Two obstacles, two different techniques.

   (a) style.css's `button, input[type="button"], input[type="submit"], .elementor-button` rule forces EVERY <button>, input[type=button|submit] and
       .elementor-button to navy background / white text / navy border with
       !important, and to gold-on-black on :hover. An !important declaration
       can only be beaten by another !important declaration — specificity does
       not help. Rather than repeat `!important` once per variant per state
       (~26 declarations), every paint value in this file is routed through
       four custom properties:

           --sk-btn-fg  --sk-btn-bg  --sk-btn-bg-image  --sk-btn-border

       Variants and :hover states only ever reassign those properties, with no
       !important at all. A SINGLE rule at the very bottom of this file (§9)
       then applies them to <button> elements with !important — 4 declarations
       for the whole system, because custom-property substitution happens after
       cascade resolution, so the !important declaration always paints whatever
       the (perfectly normal) cascade decided the variant should be.

   (b) Eight PHP files print a <style> block INSIDE <body>, i.e. after this
       stylesheet in document order, so an equal-specificity selector here
       would lose. Where such a block exists, the alias below is escalated by
       one real ancestor class that genuinely exists in that markup. The bare
       class is listed too, so markup outside that shortcode still works.
       Escalations and the file they defeat are named inline.

   Total for the whole button system: FOUR !important declarations, all in §9.
   Nothing else in this file uses it.
   ========================================================================== */


/* ==========================================================================
   1. SHARED STRUCTURE
   Everything that is true of every button regardless of variant.
   Paint comes exclusively from the four custom properties.
   ========================================================================== */

.sk-btn,
/* --- primary aliases ---------------------------------------------------- */
.expand-main-btn,
.expand-actions .expand-main-btn,
.subscribe-btn,
.connect-right .subscribe-btn,
.ent-card-btn,
.ent-card-footer .ent-card-btn,
.ent-btn.btn-buy,
.ent-date-btn .ent-btn.btn-buy,
.rewards-promo-btn,
.skagit-rewards-promo .rewards-promo-btn,
/* .sno-btn-solid: single-promotion.php USED TO print `.sno-btn-solid` in a
   <style> block after this file, so the pairing below was escalated through
   .sno-action-row to outrank it. >>> BOTH ARE GONE. <<< The <style> block was
   removed, and so was every .sno-btn-solid / .sno-action-row element -- grep
   the theme, there is no markup for either class left. This selector now
   matches nothing and is a candidate for deletion; it is left in place only
   because removing selectors from this list is how the button system got
   broken once already. */
.sno-action-row .sno-btn-solid,
/* #sb-submit-btn: inc/shortcode-booking-widget.php does the same, and still
   does -- this one is live. Escalated through its .booking-submit wrapper. */
.booking-submit #sb-submit-btn,
/* --- secondary aliases -------------------------------------------------- */
.card-btn,
/* .card-btn: archive-promotion.php USED TO restyle it in a <style> block, so
   this pairing was escalated through .promotions-grid to outrank it. That
   block is gone. `.promotions-grid` markup still exists, but no `.card-btn`
   element does, so the escalation is vestigial -- the bare `.card-btn` entry
   above already covers the class if it ever returns. */
.promotions-grid .card-btn,
.related-view-btn,
.related-header .related-view-btn,
.footer-view-all,
.footer-promo-header .footer-view-all,
.month-view-link,
.month-header-row .month-view-link,
.sno-btn-outline,
/* .sno-btn-outline / .sno-link-rules live in inc/shortcode-promo-slider.php,
   which prints its own <style> block. Escalated through .clean-slider-wrapper. */
.clean-slider-wrapper .sno-btn-outline,
.offer-btn,
/* .offer-btn: inc/shortcode-random-offers.php. */
.random-offers-wrapper .offer-btn,
/* --- ghost aliases ------------------------------------------------------ */
.get-directions-btn,
.info-contact .get-directions-btn,
.footer-mobile-buttons a,
.footer-mobile-buttons button {
  /* Paint — assigned by the variant blocks below, never here. */
  --sk-btn-fg: var(--sk-navy-950);
  --sk-btn-bg: transparent;
  --sk-btn-bg-image: none;
  --sk-btn-border: transparent;
  --sk-btn-shadow: none;
  --sk-btn-lift: 0;

  /* Metrics — the medium size is the default. */
  --sk-btn-pad-y: 0.85rem;
  --sk-btn-pad-x: 1.9rem;
  --sk-btn-fs: var(--sk-fs-sm);
  --sk-btn-min-h: 44px;
  --sk-btn-radius: var(--sk-radius-pill);
  --sk-btn-tracking: 0.11em;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: var(--sk-btn-min-h);
  padding: var(--sk-btn-pad-y) var(--sk-btn-pad-x);
  border: 1.5px solid var(--sk-btn-border);
  border-radius: var(--sk-btn-radius);
  background-color: var(--sk-btn-bg);
  background-image: var(--sk-btn-bg-image);
  background-size: 220% 100%;
  background-position: 18% 0;
  background-repeat: no-repeat;
  color: var(--sk-btn-fg);
  box-shadow: var(--sk-btn-shadow);

  font-family: var(--sk-font-body);
  font-size: var(--sk-btn-fs);
  font-weight: var(--sk-weight-black);
  letter-spacing: var(--sk-btn-tracking);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;

  cursor: pointer;
  transform: translateY(var(--sk-btn-lift));
  /* `background-position` is what animates the metal sweep on hover. */
  transition: background-position var(--sk-dur-slow) var(--sk-ease-out),
              background-color var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out),
              transform var(--sk-dur-base) var(--sk-ease-out);
}

/* Anchors: kill the prose underline the design system adds inside
   .sno-content-body / .entry-content. Element+class = (0,1,1), which ties
   `.sno-content-body a` and wins on source order (this file loads later). */
a.sk-btn,
a.expand-main-btn,
a.subscribe-btn,
a.ent-card-btn,
a.rewards-promo-btn,
a.sno-btn-solid,
a.card-btn,
a.related-view-btn,
a.footer-view-all,
a.month-view-link,
a.sno-btn-outline,
a.offer-btn,
a.get-directions-btn,
a.sk-btn--link,
a.expand-sub-link,
a.sno-link-rules { text-decoration: none; }

/* Icons inside a button never shrink and never carry their own colour. */
.sk-btn i,
.sk-btn svg,
.expand-main-btn i,
.subscribe-btn i,
.ent-card-btn i,
.sno-action-row .sno-btn-solid i,
.booking-submit #sb-submit-btn i,
.promotions-grid .card-btn i,
.footer-view-all i,
.month-view-link i,
.random-offers-wrapper .offer-btn i,
.get-directions-btn i {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 0.85em;
}


/* ==========================================================================
   2. VARIANT — PRIMARY  (brass gradient)
   Apply:  class="sk-btn sk-btn--primary"
   Contrast: label is --sk-navy-950 #04101C. The gradient sweeps on hover, so
   ANY stop can end up under the label; the binding constraint is therefore
   the darkest stop, --sk-gold-600 #B08D28 = 6.10:1. Lightest stop
   #F0DCA4 = 14.12:1. AA (4.5:1) is met across the entire sweep.
   ========================================================================== */

.sk-btn--primary,
.expand-main-btn,
.expand-actions .expand-main-btn,
.subscribe-btn,
.connect-right .subscribe-btn,
.ent-card-btn,
.ent-card-footer .ent-card-btn,
.ent-btn.btn-buy,
.ent-date-btn .ent-btn.btn-buy,
.rewards-promo-btn,
.skagit-rewards-promo .rewards-promo-btn,
.sno-action-row .sno-btn-solid,
.booking-submit #sb-submit-btn {
  --sk-btn-fg: var(--sk-navy-950);
  --sk-btn-bg: transparent;
  --sk-btn-bg-image: var(--sk-grad-brass);
  --sk-btn-border: rgba(255, 255, 255, 0.28);
  --sk-btn-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
                   0 8px 22px rgba(212, 175, 55, 0.28);
}

.sk-btn--primary:hover,
.expand-main-btn:hover,
.expand-actions .expand-main-btn:hover,
.subscribe-btn:hover,
.connect-right .subscribe-btn:hover,
.ent-card-btn:hover,
.ent-card-footer .ent-card-btn:hover,
.ent-btn.btn-buy:hover,
.ent-date-btn .ent-btn.btn-buy:hover,
.rewards-promo-btn:hover,
.sno-action-row .sno-btn-solid:hover,
.booking-submit #sb-submit-btn:hover {
  --sk-btn-border: var(--sk-gold-200);
  --sk-btn-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset,
                   0 14px 34px rgba(212, 175, 55, 0.38);
  --sk-btn-lift: -2px;
  background-position: 82% 0;   /* the metal sweep */
}

.sk-btn--primary:active,
.expand-main-btn:active,
.subscribe-btn:active,
.ent-card-btn:active,
.sno-action-row .sno-btn-solid:active,
.booking-submit #sb-submit-btn:active {
  --sk-btn-lift: 0px;
  --sk-btn-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
                   0 4px 12px rgba(212, 175, 55, 0.3);
}


/* ==========================================================================
   3. VARIANT — SECONDARY  (outline ink)
   Apply:  class="sk-btn sk-btn--secondary"
   Contrast: --sk-navy-700 #0B3D68 on white 11.16:1, on --sk-mist 10.30:1.
   Filled hover is white on #0B3D68 = 11.16:1.
   ========================================================================== */

.sk-btn--secondary,
.card-btn,
.promotions-grid .card-btn,
.related-view-btn,
.related-header .related-view-btn,
.footer-view-all,
.footer-promo-header .footer-view-all,
.month-view-link,
.month-header-row .month-view-link,
.sno-btn-outline,
.clean-slider-wrapper .sno-btn-outline,
.ent-card-btn.btn-secondary,
.ent-card-footer .ent-card-btn.btn-secondary {
  --sk-btn-fg: var(--sk-navy-700);
  --sk-btn-bg: transparent;
  --sk-btn-bg-image: none;
  --sk-btn-border: var(--sk-navy-700);
  --sk-btn-shadow: none;
  --sk-btn-pad-y: 0.72rem;
  --sk-btn-pad-x: 1.6rem;
  --sk-btn-fs: var(--sk-fs-xs);
  --sk-btn-tracking: 0.12em;
}

.sk-btn--secondary:hover,
.card-btn:hover,
.promotions-grid .card-btn:hover,
.promotions-grid .sno-card:hover .card-btn,
.related-view-btn:hover,
.footer-view-all:hover,
.month-view-link:hover,
.sno-btn-outline:hover,
.clean-slider-wrapper .sno-btn-outline:hover,
.ent-card-btn.btn-secondary:hover,
.ent-card-footer .ent-card-btn.btn-secondary:hover {
  --sk-btn-fg: var(--sk-white);
  --sk-btn-bg: var(--sk-navy-700);
  --sk-btn-border: var(--sk-navy-700);
  --sk-btn-shadow: 0 8px 20px rgba(11, 61, 104, 0.26);
  --sk-btn-lift: -1px;
}

/* ---- 3.1 Cyan family --------------------------------------------------
   Apply:  class="sk-btn sk-btn--secondary sk-btn--cyan"
   The offers and home cards were built around #009FE3. As TEXT on white that
   measures 2.97:1 — an AA failure the design system already solved with
   --sk-cyan-700 #0A6E9E (5.62:1 on white, 5.19:1 on --sk-mist). Bright
   #009FE3 stays for decoration and for dark grounds only. Filled hover is
   white on #0A6E9E = 5.62:1.                                              */

.sk-btn--secondary.sk-btn--cyan,
.offer-btn,
.random-offers-wrapper .offer-btn{
  --sk-btn-fg: var(--sk-cyan-700);
  --sk-btn-bg: transparent;
  --sk-btn-bg-image: none;
  --sk-btn-border: var(--sk-cyan-700);
  --sk-btn-shadow: none;
  --sk-btn-pad-y: 0.72rem;
  --sk-btn-pad-x: 1.6rem;
  --sk-btn-fs: var(--sk-fs-xs);
  --sk-btn-tracking: 0.12em;
}

.sk-btn--secondary.sk-btn--cyan:hover,
.offer-btn:hover,
.random-offers-wrapper .offer-btn:hover,
.random-offers-wrapper .offer-card:hover .offer-btn{
  --sk-btn-fg: var(--sk-white);
  --sk-btn-bg: var(--sk-cyan-700);
  --sk-btn-border: var(--sk-cyan-700);
  --sk-btn-shadow: 0 8px 20px rgba(10, 110, 158, 0.28);
  --sk-btn-lift: -1px;
}

/* ---- 3.2 Secondary on a dark ground ------------------------------------
   Apply:  class="sk-btn sk-btn--secondary sk-btn--on-dark"
   Contrast: --sk-gold-300 #F0DCA4 on --sk-navy-900 13.10:1, on --sk-navy-800
   11.64:1. Filled hover is --sk-navy-950 on the brass sweep, min 6.10:1.   */

.sk-btn--secondary.sk-btn--on-dark {
  --sk-btn-fg: var(--sk-gold-300);
  --sk-btn-border: rgba(212, 175, 55, 0.65);
  --sk-btn-bg: rgba(212, 175, 55, 0.08);
}

.sk-btn--secondary.sk-btn--on-dark:hover {
  --sk-btn-fg: var(--sk-navy-950);
  --sk-btn-bg: transparent;
  --sk-btn-bg-image: var(--sk-grad-brass);
  --sk-btn-border: var(--sk-gold-200);
  --sk-btn-shadow: 0 10px 26px rgba(212, 175, 55, 0.3);
  --sk-btn-lift: -1px;
}


/* ==========================================================================
   4. VARIANT — GHOST  (no fill, no border until you touch it)
   Apply:  class="sk-btn sk-btn--ghost"
   Contrast: --sk-navy-700 #0B3D68 on white 11.16:1; the 6% navy hover wash
   composites to #F0F3F6, still 10.02:1. On dark, --sk-gold-300 #F0DCA4 on
   --sk-navy-900 13.10:1, and 11.19:1 over the 12% white hover wash.
   ========================================================================== */

.sk-btn--ghost {
  --sk-btn-fg: var(--sk-navy-700);
  --sk-btn-bg: transparent;
  --sk-btn-bg-image: none;
  --sk-btn-border: transparent;
  --sk-btn-shadow: none;
  --sk-btn-pad-x: 1.15rem;
}

.sk-btn--ghost:hover {
  --sk-btn-bg: rgba(11, 61, 104, 0.06);
  --sk-btn-border: rgba(11, 61, 104, 0.22);
}

/* On dark chrome — the footer quick actions and the "Get Directions" pill. */
.sk-btn--ghost.sk-btn--on-dark,
.get-directions-btn,
.info-contact .get-directions-btn,
.footer-mobile-buttons a,
.footer-mobile-buttons button {
  --sk-btn-fg: var(--sk-gold-300);
  --sk-btn-bg: rgba(212, 175, 55, 0.1);
  --sk-btn-bg-image: none;
  --sk-btn-border: rgba(212, 175, 55, 0.5);
  --sk-btn-shadow: var(--sk-rim-light);
}

.sk-btn--ghost.sk-btn--on-dark:hover,
.get-directions-btn:hover,
.info-contact .get-directions-btn:hover,
.footer-mobile-buttons a:hover,
.footer-mobile-buttons button:hover {
  --sk-btn-fg: var(--sk-navy-950);
  --sk-btn-bg: transparent;
  --sk-btn-bg-image: var(--sk-grad-brass);
  --sk-btn-border: var(--sk-gold-200);
  --sk-btn-shadow: 0 10px 26px rgba(212, 175, 55, 0.28);
  --sk-btn-lift: -1px;
}

/* The "Get Directions" pill is a compact utility, not a CTA. */
.get-directions-btn,
.info-contact .get-directions-btn {
  --sk-btn-pad-y: 0.5rem;
  --sk-btn-pad-x: 1.15rem;
  --sk-btn-fs: var(--sk-fs-xs);
  --sk-btn-min-h: 36px;
  --sk-btn-tracking: 0.1em;
}

/* The four footer quick actions read as a row of equal blocks, not pills.
   NOTE: two of them are <a> and two are <button>. Before this file the two
   <button>s rendered solid navy (style.css's global `button, input[type="button"],
   input[type="submit"], .elementor-button` rule wins over the non-important
   `background` on `.footer-links-row` in its mobile block) while the two <a>s
   rendered translucent — the
   row was visibly inconsistent. §9 below fixes that. */
.footer-mobile-buttons a,
.footer-mobile-buttons button {
  --sk-btn-radius: var(--sk-radius-sm);
  --sk-btn-pad-y: 0.95rem;
  --sk-btn-pad-x: 1.25rem;
  --sk-btn-fs: var(--sk-fs-sm);
  --sk-btn-tracking: 0.06em;
  white-space: normal;
}


/* ==========================================================================
   5. VARIANT — LINK-STYLED  (reads as text, behaves as an action)
   Apply:  class="sk-btn sk-btn--link"
   Contrast: --sk-cyan-700 #0A6E9E on white 5.62:1, on --sk-mist 5.19:1.
   On dark, --sk-gold-400 #E3C566 on --sk-navy-900 = 10.53:1.
   The underline is not decorative: colour alone is not a sufficient
   affordance (WCAG 1.4.1), and these have no border or fill to lean on.
   ========================================================================== */

.sk-btn--link,
.expand-sub-link,
.expand-actions .expand-sub-link,
.sno-link-rules,
.clean-slider-wrapper .sno-link-rules {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-cyan-700);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--sk-dur-fast) var(--sk-ease-out),
              text-decoration-color var(--sk-dur-fast) var(--sk-ease-out);
}

.sk-btn--link:hover,
.expand-sub-link:hover,
.expand-actions .expand-sub-link:hover,
.sno-link-rules:hover,
.clean-slider-wrapper .sno-link-rules:hover {
  color: var(--sk-navy-700);              /* 11.16:1 on white */
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.sk-btn--link.sk-btn--on-dark,
.sk-surface-dark .sk-btn--link {
  color: var(--sk-gold-400);              /* 10.53:1 on navy-900 */
}

.sk-btn--link.sk-btn--on-dark:hover,
.sk-surface-dark .sk-btn--link:hover {
  color: var(--sk-gold-200);              /* 14.6:1 on navy-900 */
}

/* --- The expanding section's sub-link is an ON-DARK instance --------------
   `Discover Our Hotel` sits inside `.skagit-expand-panel`, which is painted
   over a photograph under a 0.86-0.92 alpha navy scrim. It was inheriting the
   base variant colour above — --sk-cyan-700 #0A6E9E — whose contrast figure in
   this section's header is quoted against WHITE. On the scrim that blue lands
   near 2.4:1 and reads as an unclickable smudge, which is what was reported.

   It carries neither `.sk-btn--on-dark` nor a `.sk-surface-dark` ancestor, so
   the two rules above never reached it. Scoping by the panel is the honest
   fix: the same class on a light page still gets the cyan, which is correct
   there.

   White rather than the gold used elsewhere on dark, by request. Hover keeps
   the system's on-dark hover so the affordance still changes, and the base
   variant's underline (35% -> 100%, 1px -> 2px) carries the state as well, so
   the cue is not colour alone. White on the scrim measures >13:1.
   Specificity is (0,3,0) deliberately — the losing attempt at this lived in
   skagit-components.css at (0,2,0), tied with the base rule here, and lost on
   file order. This one cannot be flipped by load order.
   ------------------------------------------------------------------------ */
.skagit-expand-panel .expand-actions .expand-sub-link {
  color: var(--sk-white);
}

.skagit-expand-panel .expand-actions .expand-sub-link:hover,
.skagit-expand-panel .expand-actions .expand-sub-link:focus-visible {
  color: var(--sk-gold-200);
}

/* The chevron/arrow nudges forward — the only motion these carry. */
.sk-btn--link i,
.expand-sub-link i,
.sno-link-rules i,
.footer-view-all i,
.month-view-link i {
  font-size: 0.72em;
  transition: transform var(--sk-dur-base) var(--sk-ease-out);
}

.sk-btn--link:hover i,
.expand-sub-link:hover i,
.footer-view-all:hover i,
.month-view-link:hover i { transform: translateX(3px); }

/* NOTE: `.back-link` is deliberately NOT part of this variant. It is already
   styled as a faint uppercase label in skagit-components.css §5 (--sk-slate,
   6.02:1 on white) and it also appears in single-room.php, which another
   agent owns. Restyling it here would trample that. */


/* ==========================================================================
   6. SIZES
   Apply:  class="sk-btn sk-btn--primary sk-btn--sm"   (or --lg)
   Written after the variants so the metrics win; the variants only set
   metrics as their own defaults.
   ========================================================================== */

.sk-btn--sm {
  --sk-btn-pad-y: 0.5rem;
  --sk-btn-pad-x: 1.15rem;
  --sk-btn-fs: var(--sk-fs-xs);
  --sk-btn-min-h: 36px;
  --sk-btn-tracking: 0.1em;
}

.sk-btn--lg {
  --sk-btn-pad-y: 1.05rem;
  --sk-btn-pad-x: 2.6rem;
  --sk-btn-fs: var(--sk-fs-md);
  --sk-btn-min-h: 56px;
  --sk-btn-tracking: 0.1em;
}

/* Apply:  class="sk-btn sk-btn--primary sk-btn--block" */
.sk-btn--block { width: 100%; }

/* Apply:  class="sk-btn sk-btn--secondary sk-btn--square" — a squared-off
   corner treatment for anything that sits flush against a panel edge. */
.sk-btn--square { --sk-btn-radius: var(--sk-radius-sm); }

/* WCAG 2.2 Target Size (Minimum): 24x24 is the floor, 44x44 is the AA
   comfort target. Small buttons get there on touch pointers. */
@media (hover: none), (pointer: coarse) {
  .sk-btn--sm,
  .get-directions-btn,
  .info-contact .get-directions-btn { --sk-btn-min-h: 44px; }
}


/* ==========================================================================
   7. STATE — DISABLED
   Apply:  <button class="sk-btn sk-btn--primary" disabled>
           <a class="sk-btn sk-btn--primary is-disabled" aria-disabled="true">
   Contrast: --sk-graphite #4A525E on --sk-cloud #E7EAEE = 6.54:1.
   Deliberately NOT dimmed with `opacity`: opacity applies to the composited
   result, so it silently drags the label below AA. WCAG exempts disabled
   controls from contrast requirements, but people still have to read them.
   ========================================================================== */

.sk-btn:disabled,
.sk-btn[aria-disabled="true"],
.sk-btn.is-disabled,
.ent-btn.disabled,
.ent-date-btn .ent-btn.disabled,
.expand-main-btn.is-disabled,
.booking-submit #sb-submit-btn:disabled {
  --sk-btn-fg: var(--sk-text-muted);
  --sk-btn-bg: var(--sk-cloud);
  --sk-btn-bg-image: none;
  --sk-btn-border: var(--sk-border-strong);
  --sk-btn-shadow: none;
  --sk-btn-lift: 0;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;   /* an <a aria-disabled> is still focusable — good */
}

/* …but keep it focusable and announce-able: pointer-events:none only blocks
   the mouse. Restore the pointer target for keyboard users so the focus ring
   still lands somewhere visible. */
.sk-btn[aria-disabled="true"]:focus-visible,
.sk-btn.is-disabled:focus-visible { pointer-events: auto; }

/* Disabled on a dark ground would disappear into the navy. */
.sk-btn--on-dark:disabled,
.sk-btn--on-dark[aria-disabled="true"],
.sk-btn--on-dark.is-disabled {
  --sk-btn-fg: var(--sk-text-on-dark-muted);   /* 10.04:1 on navy-900 */
  --sk-btn-bg: rgba(255, 255, 255, 0.07);
  --sk-btn-border: rgba(255, 255, 255, 0.16);
}


/* ==========================================================================
   8. STATE — LOADING
   Apply:  class="sk-btn sk-btn--primary is-loading"  +  aria-busy="true"
   The label is NOT dimmed and NOT hidden — dimming it would drop it below AA
   exactly when the user most wants to read it. A ring is appended instead.
   ========================================================================== */

.sk-btn.is-loading {
  cursor: progress;
  pointer-events: none;
}

.sk-btn.is-loading::after {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: sk-btn-spin 720ms linear infinite;
}

@keyframes sk-btn-spin { to { transform: rotate(360deg); } }

/* Reduced motion: a static broken ring still reads as "busy", and
   aria-busy carries the meaning for assistive tech. The design system's
   global kill switch already collapses the animation; this makes the
   resulting frozen ring look deliberate rather than broken. */
@media (prefers-reduced-motion: reduce) {
  .sk-btn.is-loading::after {
    animation: none;
    border-style: dashed;
    border-top-color: currentColor;
    opacity: 0.6;
  }
}


/* ==========================================================================
   8b. FOCUS
   --------------------------------------------------------------------------
   The ring itself is inherited unchanged from skagit-design-system.css §3:
   a 3px --sk-gold-500 outline at 2px offset PLUS a --sk-navy-950 halo ring
   just outside it (white halo on dark chrome). Nothing here weakens it and
   nothing here sets `outline: none`.

   On a brass primary button the gold core sits on the white page gap, but the
   navy halo immediately outside it measures 9.11:1 against the gold core and
   17.0:1 against a white page, so the composite indicator clears the 3:1
   required by WCAG 2.2 SC 1.4.11 on both of its edges.

   The only addition: a lift is suppressed on focus so the ring cannot be
   sheared by a translate mid-transition.
   ========================================================================== */

.sk-btn:focus-visible,
.expand-main-btn:focus-visible,
.subscribe-btn:focus-visible,
.ent-card-btn:focus-visible,
.sno-action-row .sno-btn-solid:focus-visible,
.booking-submit #sb-submit-btn:focus-visible,
.promotions-grid .card-btn:focus-visible,
.random-offers-wrapper .offer-btn:focus-visible,
.footer-view-all:focus-visible,
.month-view-link:focus-visible,
.related-view-btn:focus-visible,
.get-directions-btn:focus-visible,
.footer-mobile-buttons a:focus-visible,
.footer-mobile-buttons button:focus-visible { transform: none; }


/* ==========================================================================
   9. THE ONE !important RULE
   --------------------------------------------------------------------------
   DEFEATS: style.css's `button, input[type="button"], input[type="submit"], .elementor-button` rule
       button, input[type="button"], input[type="submit"], .elementor-button {
           background-color: var(--skagit-blue-dark) !important;
           color: #fff !important;
           border-color: var(--skagit-blue-dark) !important; }
       button:hover, … {
           background-color: var(--skagit-gold) !important;
           border-color: var(--skagit-gold) !important;
           color: #000 !important; }

   That rule is correct for generic theme buttons and wrong for every button
   listed here, each of which has a designed skin. Because an !important
   declaration can only be beaten by another !important declaration, four are
   unavoidable — but only four, because they paint from the custom properties
   the (entirely normal) cascade above has already resolved. Adding a variant
   or a state later needs NO further !important.

   Every selector below is an <button>/<input>. Anchors never reach this rule.
   :hover and :focus-visible are listed explicitly so the specificity clears
   style.css's `button:hover` (0,1,1) regardless of future source reordering.

   Fallbacks are spelled out on every var() so that if this rule ever matches
   an element outside the system it degrades to the primary skin rather than
   to an invalid value (which would compute to `inherit` and lose the label).
   ========================================================================== */

button.sk-btn,
button.sk-btn:hover,
button.sk-btn:focus-visible,
button.sk-btn:disabled,
input.sk-btn,
input.sk-btn:hover,
input.sk-btn:focus-visible,
.booking-submit #sb-submit-btn,
.booking-submit #sb-submit-btn:hover,
.booking-submit #sb-submit-btn:focus-visible,
.booking-submit #sb-submit-btn:disabled,
.footer-mobile-buttons button,
.footer-mobile-buttons button:hover,
.footer-mobile-buttons button:focus-visible,
.ent-date-btn button.ent-btn.btn-buy,
.ent-date-btn button.ent-btn.btn-buy:hover,
.ent-date-btn button.ent-btn.btn-buy:focus-visible,
.ent-date-btn button.ent-btn.disabled {
  background-color: var(--sk-btn-bg, transparent) !important;
  background-image: var(--sk-btn-bg-image, var(--sk-grad-brass)) !important;
  color: var(--sk-btn-fg, var(--sk-navy-950)) !important;
  border-color: var(--sk-btn-border, rgba(255, 255, 255, 0.28)) !important;
}


/* ==========================================================================
   10. REDUCED MOTION
   The design system's global kill switch (layer 1 §5) collapses every
   transition and animation to 0.001ms, which stops things *animating* but not
   things *moving* — an instant 2px jump on hover is still motion. These rules
   remove the movement itself.

   They override `transform` directly rather than zeroing `--sk-btn-lift`,
   because a variant's `:hover` rule (e.g. `.sk-btn--primary:hover`, (0,2,0))
   outranks a bare `.sk-btn` (0,1,0) and would keep reassigning the token.
   Nothing else sets `transform` on these elements, so a plain later
   declaration at the same specificity as §1 wins outright — no !important.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sk-btn,
  .expand-main-btn,
  .subscribe-btn,
  .ent-card-btn,
  .sno-action-row .sno-btn-solid,
  .booking-submit #sb-submit-btn,
  .promotions-grid .card-btn,
  .random-offers-wrapper .offer-btn,
  .footer-view-all,
  .month-view-link,
  .related-view-btn,
  .sno-btn-outline,
  .clean-slider-wrapper .sno-btn-outline,
  .get-directions-btn,
  .info-contact .get-directions-btn,
  .footer-mobile-buttons a,
  .footer-mobile-buttons button { transform: none; }

  /* The chevron nudge. `.expand-actions .expand-sub-link:hover i` is declared
     at (0,3,1) in skagit-components.css §6.3, so the ancestor has to be
     restated here to outrank it. */
  .sk-btn--link:hover i,
  .expand-sub-link:hover i,
  .expand-actions .expand-sub-link:hover i,
  .sno-link-rules:hover i,
  .clean-slider-wrapper .sno-link-rules:hover i,
  .footer-view-all:hover i,
  .footer-promo-header .footer-view-all:hover i,
  .month-view-link:hover i,
  .month-header-row .month-view-link:hover i { transform: none; }
}


/* ==========================================================================
   11. FORCED COLORS (Windows High Contrast)
   System colours must win; a gradient conveys nothing there, so give every
   variant a real border so the control still reads as a control.
   ========================================================================== */
@media (forced-colors: active) {
  .sk-btn,
  .expand-main-btn,
  .subscribe-btn,
  .ent-card-btn,
  .sno-action-row .sno-btn-solid,
  .booking-submit #sb-submit-btn,
  .promotions-grid .card-btn,
  .random-offers-wrapper .offer-btn,
  .footer-view-all,
  .month-view-link,
  .related-view-btn,
  .sno-btn-outline,
  .get-directions-btn,
  .footer-mobile-buttons a,
  .footer-mobile-buttons button {
    /* No forced-color-adjust here — the whole point is to LET the system
       palette through. The border is what stops a gradient-only button from
       vanishing once the gradient is discarded. */
    border: 1px solid ButtonBorder;
    background: ButtonFace;
    color: ButtonText;
  }

  .sk-btn:disabled,
  .sk-btn[aria-disabled="true"],
  .sk-btn.is-disabled { color: GrayText; border-color: GrayText; }
}


/* ==========================================================================
   TOUCH TARGETS
   --------------------------------------------------------------------------
   `.sk-btn--sm` sets a 36px min-height, which is right for a compact desktop
   header bar and wrong for a finger. On a phone the header's "Book Now" — the
   most important control on the site — measured 36px on all 27 pages, under
   the 44px minimum in WCAG 2.5.8 and in both platform guidelines.

   Raised only where the pointer is coarse or the screen is narrow, so the
   desktop header keeps its compact bar. Padding rather than height alone, so
   the label stays optically centred.
   ========================================================================== */

@media (pointer: coarse), (max-width: 47.99em) {
  .sk-btn--sm {
    min-height: 44px;
    padding-block: 0.7rem;
  }

  /* Anything else that opts into a small control gets the same floor —
     a 36px tap target is a 36px tap target whatever it is called. */
  .sk-btn,
  .ent-card-btn,
  .skagit-cal__nav {
    min-height: 44px;
  }
}

/* ==========================================================================
   SECONDARY BUTTON — HOVER LEGIBILITY
   Reported on /hotel/hotel-packages/: "Book at The Ridge" filled navy on hover
   while its label stayed dark, so the button read as blank.

   The variant already sets --sk-btn-fg to white on hover, but the label was
   resolving dark anyway. Rather than chase which layer wins the variable, the
   colour is stated outright on the element: a filled navy button must have a
   white label, and that is not a value worth deriving.

   Specificity is (0,3,1) — a.sk-btn.sk-btn--secondary — which clears the
   variant rules and the theme's own anchor colours without !important. The
   same tie-by-load-order has caught this project three times already.
   ========================================================================== */

a.sk-btn.sk-btn--secondary:hover,
a.sk-btn.sk-btn--secondary:focus-visible,
a.sk-btn.sk-btn--secondary:active {
  background-color: var(--sk-navy-700, #0B3D68);
  background-image: none;
  border-color: var(--sk-navy-700, #0B3D68);
  color: #fff;
}

/* The label and any icon inherit, so a nested <span> cannot stay dark. */
a.sk-btn.sk-btn--secondary:hover *,
a.sk-btn.sk-btn--secondary:focus-visible * {
  color: inherit;
}

/* Cyan variant of the same button, same reasoning. */
a.sk-btn.sk-btn--secondary.sk-btn--cyan:hover,
a.sk-btn.sk-btn--secondary.sk-btn--cyan:focus-visible {
  background-color: var(--sk-cyan-700, #0A6E9E);
  border-color: var(--sk-cyan-700, #0A6E9E);
  color: #fff;
}
