/* ==========================================================================
   base.css
   Handyman Services Marketplace — Design System Foundation
   Phase 2: CSS Design System

   Table of contents
   -----------------
   1.  Modern CSS Reset
   2.  CSS Custom Properties
       2a. Colour Palette
       2b. Typography
       2c. Spacing (8px base unit)
       2d. Border Radius
       2e. Shadows
       2f. Transitions
       2g. Z-index Scale
   3.  Breakpoints
   4.  Base HTML Element Styles
   5.  WCAG 2.1 AA Focus Styles
   ========================================================================== */


/* ==========================================================================
   1. Modern CSS Reset
   Based on Andy Bell's Modern CSS Reset, extended for production use.
   Goal: remove inconsistent browser defaults without being opinionated
   about design. Every intentional style lives in sections 2–5 below.
   ========================================================================== */

/* Use border-box on everything so padding never expands declared widths */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding applied by browsers */
* {
  margin: 0;
  padding: 0;
}

/*
 * Set core root defaults.
 * scroll-behavior: smooth is overridden by prefers-reduced-motion in §5.
 * font-size: 100% respects the user's browser font-size preference
 * (never set px here — it overrides accessibility settings).
 */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* prevent iOS auto-scaling on orientation change */
  text-size-adjust: 100%;
  tab-size: 4;
}

/* Give the body full height so page-level flex/grid layouts work */
body {
  min-height: 100vh;
  line-height: 1.5; /* overridden by --leading-normal in §4 */
  -webkit-font-smoothing: antialiased;  /* macOS/iOS sub-pixel rendering */
  -moz-osx-font-smoothing: grayscale;  /* Firefox equivalent */
  text-rendering: optimizeSpeed;
}

/* Block-level media: prevent overflow, never exceed container width */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Forms inherit font from body rather than browser system font */
input,
button,
textarea,
select {
  font: inherit;
}

/* Allow long words to break so they don't blow out narrow containers */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
 * Remove list semantics only from lists that are styled.
 * Lists with role="list" keep their semantics for screen readers.
 */
ul,
ol {
  list-style: none;
}

/* Links: inherit colour by default; intentional link colour set in §4 */
a {
  color: inherit;
  text-decoration: none;
}

/* Tables: collapse borders so adjacent cells share a single border */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ==========================================================================
   2. CSS Custom Properties
   All design tokens live here as custom properties on :root so they are
   globally available and can be overridden per-component or per-theme.
   ========================================================================== */

:root {

  /* ========================================================================
     2a. Colour Palette
     ========================================================================
     Brand rationale
     ---------------
     Primary   Navy blue   — trust, professionalism, reliability
     Secondary Sky blue    — supporting UI chrome, links, accents
     Accent    Amber       — energy, tools, calls to action
     Neutral   Slate grey  — surfaces, borders, body text

     Each hue has a 9-stop scale (50–900).
     Semantic aliases map scale values to roles
     (e.g. --color-bg, --color-text) so components
     reference intent, not raw values.
     ======================================================================== */

  /* Primary — navy blue */
  --color-primary-50:  #eef4fb;
  --color-primary-100: #cde0f4;
  --color-primary-200: #9cc1e9;
  --color-primary-300: #6aa2de;
  --color-primary-400: #3983d3;
  --color-primary-500: #1a64b8; /* brand base */
  --color-primary-600: #154f93;
  --color-primary-700: #103b6e;
  --color-primary-800: #0b2849;
  --color-primary-900: #061425;

  /* Secondary — sky blue */
  --color-secondary-50:  #f0f7ff;
  --color-secondary-100: #d6eafe;
  --color-secondary-200: #add5fd;
  --color-secondary-300: #84c0fc;
  --color-secondary-400: #5baafb;
  --color-secondary-500: #3295f9; /* base */
  --color-secondary-600: #0d7de8;
  --color-secondary-700: #0a62b6;
  --color-secondary-800: #074884;
  --color-secondary-900: #042e53;

  /* Accent — amber orange */
  --color-accent-50:  #fff8eb;
  --color-accent-100: #feecc7;
  --color-accent-200: #fdd88f;
  --color-accent-300: #fcc457;
  --color-accent-400: #fbaf1f;
  --color-accent-500: #e8962b; /* base */
  --color-accent-600: #c4791b;
  --color-accent-700: #995e14;
  --color-accent-800: #6f440e;
  --color-accent-900: #452a08;

  /* Neutral — slate grey */
  --color-neutral-0:    #ffffff;
  --color-neutral-50:   #f8f9fa;
  --color-neutral-100:  #f1f3f5;
  --color-neutral-200:  #e9ecef;
  --color-neutral-300:  #dee2e6;
  --color-neutral-400:  #ced4da;
  --color-neutral-500:  #adb5bd;
  --color-neutral-600:  #6c757d;
  --color-neutral-700:  #495057;
  --color-neutral-800:  #343a40;
  --color-neutral-900:  #212529;
  --color-neutral-1000: #000000;

  /* Success — green */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-500: #22c55e; /* base */
  --color-success-600: #16a34a;
  --color-success-700: #15803d;

  /* Warning — amber */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-500: #f59e0b; /* base */
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  /* Error — red */
  --color-error-50:  #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-500: #ef4444; /* base */
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;

  /*
   * Semantic colour aliases
   * Use these in all components — never raw scale values.
   * This makes light → dark mode a single :root override.
   */
  --color-bg:           var(--color-neutral-50);   /* page background        */
  --color-bg-subtle:    var(--color-neutral-100);  /* section / card tint    */
  --color-surface:      var(--color-neutral-0);    /* raised surfaces        */
  --color-border:       var(--color-neutral-300);  /* default border         */
  --color-border-strong: var(--color-neutral-500); /* emphasis border        */
  --color-text:         var(--color-neutral-900);  /* primary body text      */
  --color-text-muted:   var(--color-neutral-600);  /* secondary / captions   */
  --color-text-subtle:  var(--color-neutral-500);  /* placeholder / disabled */
  --color-text-inverse: var(--color-neutral-0);    /* text on dark surfaces  */

  /* Interactive semantic aliases */
  --color-link:         var(--color-primary-600);
  --color-link-hover:   var(--color-primary-500);
  --color-focus-ring:   var(--color-primary-500);  /* §5 focus styles        */


  /* ========================================================================
     2b. Typography
     ========================================================================
     Font scale uses a 1.250 major-third ratio starting at 1rem (16px).
     All sizes in rem so they honour the user's browser font-size setting.

     Scale values (approx)
     ----------------------
     --text-xs    ~10px
     --text-sm    ~13px
     --text-base   16px  (1rem)
     --text-md    ~20px
     --text-lg    ~25px
     --text-xl    ~31px
     --text-2xl   ~39px
     --text-3xl   ~49px
     ======================================================================== */

  /* Font families */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", "Courier New",
               monospace;

  /* Type scale */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;

  /* Font weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;


  /* ========================================================================
     2c. Spacing — 8px base unit
     ========================================================================
     Formula: --space-N = N × 0.5rem
     (0.5rem = 8px when root font-size is 16px)

     Fractional names (0-5, 1-5, 2-5) use hyphens to avoid decimals.
     ======================================================================== */

  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.25rem;  /*  4px */
  --space-1:   0.5rem;   /*  8px */
  --space-1-5: 0.75rem;  /* 12px */
  --space-2:   1rem;     /* 16px */
  --space-2-5: 1.25rem;  /* 20px */
  --space-3:   1.5rem;   /* 24px */
  --space-4:   2rem;     /* 32px */
  --space-5:   2.5rem;   /* 40px */
  --space-6:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */
  --space-10:  5rem;     /* 80px */
  --space-12:  6rem;     /* 96px */
  --space-16:  8rem;     /* 128px */
  --space-20:  10rem;    /* 160px */
  --space-24:  12rem;    /* 192px */


  /* ========================================================================
     2d. Border Radius
     ======================================================================== */

  --radius-none: 0;
  --radius-sm:   0.25rem;  /*  4px — subtle rounding, form inputs   */
  --radius-md:   0.5rem;   /*  8px — cards, buttons                 */
  --radius-lg:   0.75rem;  /* 12px — modals, panels                 */
  --radius-xl:   1rem;     /* 16px — feature cards                  */
  --radius-2xl:  1.5rem;   /* 24px — large hero elements            */
  --radius-full: 9999px;   /* pill / circle                         */


  /* ========================================================================
     2e. Shadows
     ========================================================================
     Layered box-shadows that simulate natural light falling from above.
     Coloured glow variants for primary and accent CTAs.
     ======================================================================== */

  --shadow-sm:
    0 1px 2px 0 rgb(0 0 0 / 0.05);

  --shadow-md:
    0 4px 6px -1px  rgb(0 0 0 / 0.10),
    0 2px 4px -2px  rgb(0 0 0 / 0.10);

  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.10),
    0 4px  6px  -4px rgb(0 0 0 / 0.10);

  --shadow-xl:
    0 20px 25px -5px  rgb(0 0 0 / 0.10),
    0 8px  10px -6px  rgb(0 0 0 / 0.10);

  --shadow-2xl:
    0 25px 50px -12px rgb(0 0 0 / 0.25);

  --shadow-inner:
    inset 0 2px 4px 0 rgb(0 0 0 / 0.06);

  --shadow-none: none;

  /* Branded glow shadows — use sparingly on primary CTAs */
  --shadow-primary: 0 4px 14px 0 rgb(26 100 184 / 0.35);
  --shadow-accent:  0 4px 14px 0 rgb(232 150 43 / 0.40);


  /* ========================================================================
     2f. Transitions
     ========================================================================
     Easing curves follow Material Design conventions:
     ease-in    — elements leaving the screen
     ease-out   — elements entering the screen
     ease-in-out — elements that stay on screen but change state
     ======================================================================== */

  /* Easing curves */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  /* Composed shorthand transitions */
  --transition-fast:   all var(--duration-fast)   var(--ease-in-out);
  --transition-base:   all var(--duration-base)   var(--ease-in-out);
  --transition-slow:   all var(--duration-slow)   var(--ease-in-out);

  /* Colour-only transition — avoids animating layout properties by accident */
  --transition-colors:
    color            var(--duration-base) var(--ease-in-out),
    background-color var(--duration-base) var(--ease-in-out),
    border-color     var(--duration-base) var(--ease-in-out),
    fill             var(--duration-base) var(--ease-in-out);


  /* ========================================================================
     2g. Z-index Scale
     ========================================================================
     Named layers prevent magic numbers and z-index conflicts.
     Each layer is spaced by 100 so components can use ±1 within a layer.
     ======================================================================== */

  --z-below:    -1;   /* elements deliberately behind page flow      */
  --z-base:      0;   /* default stacking context                    */
  --z-raised:   10;   /* slightly elevated cards, sticky table heads */
  --z-dropdown: 100;  /* dropdowns, popovers                        */
  --z-sticky:   200;  /* sticky navigation bar                       */
  --z-overlay:  300;  /* backdrop behind modals                      */
  --z-modal:    400;  /* modal dialogs, drawers                      */
  --z-toast:    500;  /* toast / snackbar notifications              */
  --z-tooltip:  600;  /* tooltips — always on top                   */


  /* ========================================================================
     Layout helpers — not strictly tokens but used across layout.css
     ======================================================================== */

  --container-max:   1280px;           /* widest content column          */
  --container-pad:   var(--space-2);   /* horizontal page padding (mobile) */
}


/* ==========================================================================
   3. Breakpoints
   ==========================================================================
   Breakpoints are not expressible as custom properties (media queries do
   not evaluate var()), so they are documented here and used directly
   in media queries throughout the codebase.

   320px  — xs  smallest supported handset
   768px  — md  tablet portrait
   1024px — lg  tablet landscape / small desktop
   1280px — xl  standard desktop

   Usage:
     @media (min-width: 768px) { ... }

   Min-width (mobile-first) strategy — styles target a breakpoint
   and up, never down. Override for smaller viewports only.
   ========================================================================== */

/*
 * Container padding scales with viewport width.
 * All other responsive overrides belong in layout.css or component files.
 */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-4); /* 32px on tablet */
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-6); /* 48px on desktop */
  }
}

@media (min-width: 1280px) {
  :root {
    --container-pad: var(--space-8); /* 64px on wide desktop */
  }
}


/* ==========================================================================
   4. Base HTML Element Styles
   Applies intentional defaults to raw HTML elements.
   No classes — purely element selectors so the cascade stays predictable.
   ========================================================================== */

/* --- Document & body ------------------------------------------------------- */

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  font-weight:      var(--font-regular);
  line-height:      var(--leading-normal);
  color:            var(--color-text);
  background-color: var(--color-bg);
}


/* --- Headings -------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color:       var(--color-neutral-900);
}

h1 {
  font-size:      var(--text-3xl);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size:      var(--text-2xl);
  letter-spacing: var(--tracking-tight);
}

h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }


/* --- Body copy ------------------------------------------------------------- */

p {
  max-width:   72ch;   /* ~70 characters — optimal reading line length */
  line-height: var(--leading-relaxed);
}

/* Consecutive paragraphs need breathing room */
p + p {
  margin-top: var(--space-2);
}


/* --- Links ----------------------------------------------------------------- */

a {
  color:                 var(--color-link);
  text-underline-offset: 0.2em;
  transition:            var(--transition-colors);
}

a:hover {
  color:           var(--color-link-hover);
  text-decoration: underline;
}


/* --- Lists ----------------------------------------------------------------- */

/*
 * Restore list styling for content lists.
 * Navigation and component lists typically override list-style: none.
 */
ul {
  list-style:  disc;
  padding-left: var(--space-3);
}

ol {
  list-style:  decimal;
  padding-left: var(--space-3);
}

li + li {
  margin-top: var(--space-0-5);
}


/* --- Inline text ----------------------------------------------------------- */

strong,
b {
  font-weight: var(--font-semibold);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

/* Highlight — used in search result snippets */
mark {
  background-color: var(--color-accent-100);
  color:            var(--color-neutral-900);
  padding:          0 0.2em;
  border-radius:    var(--radius-sm);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor:          help;
}

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

sup { top:    -0.5em; }
sub { bottom: -0.25em; }


/* --- Code & monospace ------------------------------------------------------ */

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

/* Inline code */
code {
  background-color: var(--color-neutral-100);
  color:            var(--color-primary-700);
  padding:          0.1em 0.35em;
  border-radius:    var(--radius-sm);
}

/* Code block */
pre {
  font-family:      var(--font-mono);
  font-size:        var(--text-sm);
  line-height:      var(--leading-relaxed);
  background-color: var(--color-neutral-900);
  color:            var(--color-neutral-100);
  padding:          var(--space-3);
  border-radius:    var(--radius-lg);
  overflow-x:       auto;
}

/* Reset inline code styles when nested inside a pre block */
pre code {
  background: none;
  color:      inherit;
  padding:    0;
  font-size:  1em;
}

/* Keyboard shortcut */
kbd {
  background-color: var(--color-neutral-200);
  border:           1px solid var(--color-neutral-400);
  border-radius:    var(--radius-sm);
  padding:          0.1em 0.4em;
  font-size:        var(--text-xs);
  box-shadow:       inset 0 -1px 0 var(--color-neutral-400);
}


/* --- Blockquote ------------------------------------------------------------ */

blockquote {
  border-left: 4px solid var(--color-primary-400);
  padding:     var(--space-1) var(--space-3);
  color:       var(--color-text-muted);
  font-style:  italic;
}

blockquote cite {
  display:     block;
  margin-top:  var(--space-1);
  font-size:   var(--text-sm);
  font-style:  normal;
  font-weight: var(--font-medium);
  color:       var(--color-text-subtle);
}


/* --- Divider --------------------------------------------------------------- */

hr {
  border:        none;
  border-top:    1px solid var(--color-border);
  margin-block:  var(--space-6);
}


/* --- Tables ---------------------------------------------------------------- */

table {
  width:     100%;
  font-size: var(--text-sm);
}

thead {
  background-color: var(--color-neutral-100);
}

th {
  padding:       var(--space-1-5) var(--space-2);
  font-weight:   var(--font-semibold);
  text-align:    left;
  color:         var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  white-space:   nowrap;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size:      var(--text-xs);
}

td {
  padding:        var(--space-1-5) var(--space-2);
  border-bottom:  1px solid var(--color-border);
  vertical-align: top;
}

/* Remove bottom border from last row so it doesn't double up on container */
tr:last-child td {
  border-bottom: none;
}


/* --- Forms (normalization; full styles in components.css) ----------------- */

fieldset {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
}

legend {
  padding:     0 var(--space-0-5);
  font-size:   var(--text-sm);
  font-weight: var(--font-semibold);
  color:       var(--color-text-muted);
}

label {
  display:     inline-block;
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
  color:       var(--color-neutral-800);
}


/* --- Images & figures ------------------------------------------------------ */

figure {
  margin-block: var(--space-4);
}

figcaption {
  margin-top:  var(--space-1);
  font-size:   var(--text-sm);
  color:       var(--color-text-subtle);
  text-align:  center;
}


/* --- Details / disclosure -------------------------------------------------- */

details {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-1-5) var(--space-2);
}

summary {
  font-weight: var(--font-medium);
  cursor:      pointer;
  user-select: none;
  padding:     var(--space-0-5) 0;
  transition:  var(--transition-colors);
}

summary:hover {
  color: var(--color-link);
}


/* ==========================================================================
   5. WCAG 2.1 AA Focus Styles
   ==========================================================================
   Requirements met
   ----------------
   • Focus indicator visible on all interactive elements              (1.4.11)
   • Minimum 3px outline with 3px offset for non-text contrast ≥ 3:1  (1.4.11)
   • :focus-visible suppresses ring on mouse/touch — shows only on
     keyboard navigation, reducing visual noise without hiding the ring
     from keyboard users                                               (2.4.7)
   • Skip-to-main link provided for keyboard navigation               (2.4.1)
   • prefers-reduced-motion respected                                 (2.3.3)

   Focus ring colour: --color-primary-500 (#1a64b8) against white (#fff)
   Contrast ratio: 4.61:1 — exceeds the 3:1 minimum for UI components.
   ========================================================================== */

/* Strip the browser default outline so we control all states */
:focus {
  outline: none;
}

/*
 * Keyboard focus ring — :focus-visible fires only for keyboard/sequential
 * navigation, not mouse clicks, so sighted mouse users are not distracted.
 */
:focus-visible {
  outline:       3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/*
 * On dark backgrounds (nav, hero, footer) the navy ring is invisible.
 * Override to the amber accent, which has 4.84:1 contrast on dark navy.
 */
.bg-dark :focus-visible,
.bg-primary :focus-visible {
  outline-color: var(--color-accent-400);
}

/*
 * Form inputs get an inward glow instead of an outward ring.
 * The border is already part of the visual boundary, so offset: 0
 * with a soft box-shadow gives better affordance inside the field.
 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:        3px solid var(--color-focus-ring);
  outline-offset: 0;
  box-shadow:     0 0 0 4px rgb(26 100 184 / 0.20);
}

/* Buttons and interactive non-form elements retain the outward ring */
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline:        3px solid var(--color-focus-ring);
  outline-offset: 3px;
}


/* --- Skip-to-content link --------------------------------------------------
 * Visually hidden until focused; becomes visible for keyboard users.
 * Place <a class="skip-link" href="#main-content">Skip to content</a>
 * as the very first element inside <body>.
 * -------------------------------------------------------------------------*/

.skip-link {
  position:      absolute;
  top:           var(--space-2);
  left:          var(--space-2);
  z-index:       var(--z-toast);
  padding:       var(--space-1) var(--space-2);
  background:    var(--color-primary-600);
  color:         var(--color-text-inverse);
  font-weight:   var(--font-semibold);
  font-size:     var(--text-sm);
  border-radius: var(--radius-md);

  /* Hidden off-screen until focused */
  transform:  translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform:      translateY(0);
  outline:        3px solid var(--color-accent-400);
  outline-offset: 3px;
}


/* --- Reduced motion --------------------------------------------------------
 * Honour the user's OS-level "reduce motion" preference.
 * Collapses all animation and transition durations to near-zero
 * without disabling them entirely (avoids JANK from instant jumps).
 * Overrides scroll-behavior set on html in §1.
 * -------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto  !important;
  }
}