/* ==========================================================================
   drsalma.com — stylesheet
   Values below were measured from the original theme's computed styles, so
   the rendering matches it. One file serves both text directions.
   Grid: 1100px container, 63.88889% / 30.55556% columns, 1.38889% gutters.
   Breakpoints: 40.063em (641px), 61.063em (977px).
   ========================================================================== */

:root {
  --ink:          #252525;
  --heading:      #353535;
  --title-ink:    #222222;
  --accent:       #2a6600;
  --accent-soft:  rgba(42, 102, 0, .5);
  --panel-head:   #e5edde;
  --footer-bg:    #f4f6f2;   /* soft green-grey; the footer is no longer a black slab */
  --rule:         #dde3d8;
  --muted:        #5c5c5c;
  --hairline:     rgba(0, 0, 0, .05);

  /* Every band keeps this much clear of the window. 20px, which is what the
     hero and the footer already used, and above the 16px floor the platform
     guidelines set. A percentage cannot do this job: 1.38889% is 15px inside
     an 1100px container and 5px on a phone. */
  --edge:   20px;

  --max:    1100px;
  --gutter: 1.38889%;
  --col-main:  63.88889%;
  --col-aside: 30.55556%;
  --col-full:  97.22222%;

  /* Open Sans has no Arabic, so Arabic characters fall through to Noto on
     their own: font fallback is per character, not per element. */
  --font: "Open Sans", "Cairo", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: .9rem;              /* 14.4px; 16px from 40.063em up */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: rgba(42, 102, 0, .8); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  margin: .2rem 0 .8rem;
  color: var(--heading);
  font-weight: 700;
  line-height: 1.4;
}
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }

/* float containment, which the original relies on throughout */
.site-header-inner::after, .site-content::after,
.page-content::after, .accordion-panel::after, .site-info-inner::after {
  content: ""; display: block; clear: both;
}

.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus {
  inset-inline-start: 8px; top: 8px; z-index: 100; background: #fff;
  color: var(--ink); padding: 12px 18px; border: 2px solid var(--accent);
}

/* ============================================================= header === */

.site-header { background: #fff; text-align: center; }
.site-header-inner { max-width: var(--max); margin: 0 auto; }

.site-branding { padding: 3% var(--edge); }

.site-title {
  margin: 0 0 .25rem;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: -.03em;
}
.site-title a { color: var(--title-ink); }
.site-title a:hover { color: var(--title-ink); text-decoration: none; opacity: .85; }

.site-description { margin: 0; color: var(--accent); font-size: 1rem; }

/* ================================================================ nav === */

/* D: the bar is sticky, so on a long page the menu stays one tap away rather
   than stranded at the top. This is why it is a sibling of the header and not
   a child: a sticky element only travels as far as its own containing block.
   It goes static again at 52em, where the whole bar is on screen anyway. */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  /* transparent now, coloured in when stuck: the border is always in the box,
     so condensing cannot change the bar's height */
  border-bottom: 1px solid transparent;
}
/* .is-stuck is set by script once the bar reaches the top of the viewport */
.nav-bar.is-stuck {
  border-bottom-color: var(--hairline);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}

/* One fixed height for both states. Sticky keeps its space in the flow, so a
   bar that shrank as it condensed would jolt the whole page up with it; only
   the arrangement changes, never the box. */
.nav-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 62px;
  padding: 7px var(--edge);
}
.nav-bar.is-stuck .nav-bar-inner { justify-content: space-between; }

/* the name appears only once the real title has scrolled out of view */
.nav-brand {
  display: none;
  min-width: 0;
  overflow: hidden;
  color: var(--title-ink);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-bar.is-stuck .nav-brand { display: block; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;              /* 48px, comfortably over the 44px minimum */
  padding: .55rem .9rem;
  margin: 0;
  background: none;
  /* a bare icon reads as decoration; the border and the word make it a button */
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:hover { background: rgba(0, 0, 0, .04); border-color: var(--accent); color: var(--accent); }

.menu-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  width: 1.375rem;               /* 22px */
  height: 1.0625rem;
}
.menu-bars span {
  display: block;
  height: .1875rem;              /* 3px */
  background: currentColor;
  border-radius: 2px;
}

.menu-label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

/* B: below 52em the menu opens as a full-screen panel. Because it covers the
   page, the script gives it role="dialog" + aria-modal while it is open, keeps
   Tab inside it, and locks the page behind it. */
.main-nav { display: none; font-weight: 500; }
.main-nav.is-open {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #fff;
  animation: nav-open .18s ease-out;
}

/* Opacity only. A panel that covers the viewport must not slide in: for the
   length of the animation a translate would leave a strip of page showing. */
@keyframes nav-open {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* the panel head is the same height as the condensed bar, so the X opens up
   exactly where the hamburger was tapped */
.nav-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;              /* same box as the bar it replaces */
  padding: 7px var(--edge);
  border-bottom: 1px solid var(--hairline);
}
.nav-head-name {
  min-width: 0;
  overflow: hidden;
  color: var(--title-ink);
  font-size: .9375rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;                /* 44px */
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-close:hover { background: rgba(0, 0, 0, .04); border-color: var(--accent); color: var(--accent); }

.main-nav > ul { list-style: none; margin: 0; padding: 0; }
.main-nav a { color: var(--ink); }
.main-nav a:hover, .main-nav a:focus { color: var(--accent); text-decoration: none; }
.main-nav [aria-current="page"] { color: var(--accent); font-weight: 700; }

/* The list only renders while the panel is open, so its sizing lives here and
   needs no unwinding in the desktop block. Child combinator throughout: the
   language switch in .nav-foot is also a ul of links, and these rules would
   otherwise stretch its segments out of shape. */
.main-nav.is-open > ul {
  flex: 1 1 auto;
  padding: .5rem 0;
  /* if the menu outgrows the screen it scrolls itself, not the page */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.main-nav.is-open > ul a {
  display: flex;
  align-items: center;
  min-height: 56px;              /* generous touch target */
  padding: .75rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  /* a bar on the leading edge marks the current page; logical, so it flips in ar */
  border-inline-start: 3px solid transparent;
}
.main-nav.is-open > ul a:hover,
.main-nav.is-open > ul a:focus { background: rgba(0, 0, 0, .03); }
.main-nav.is-open > ul [aria-current="page"] { border-inline-start-color: var(--accent); font-weight: 700; }

.nav-foot {
  flex: 0 0 auto;
  padding: 14px 1.25rem;
  border-top: 1px solid var(--hairline);
}

/* The page behind the panel must not scroll, and must come back to the same
   place when it closes -- the script stashes the offset in `top`. */
body.nav-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* =============================================================== hero === */

.hero { clear: both; padding: 40px var(--edge); text-align: center; background: #fff; }

/* The frame belongs to the page, not the window. Without the container it grew
   with the viewport -- 1200px at 1280 and 1840px at 1920 -- while the nav above
   it and the content below it both stopped at 1100, so the wider the screen the
   more plainly it broke the page's alignment. */
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px;
  border: 3px solid var(--accent-soft);
}

.hero h1 {
  margin: 0;
  color: var(--accent);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.4;
}

/* ============================================================= layout === */

/* In one column the band takes a fixed edge and the columns fill it. The
   theme's percentage gutters only have a meaning once there are two columns
   to divide, and on a phone they collapsed to 4-6px. */
/* The edge is kept at every width, not just in one column. max-width carries
   the padding so the grid inside is untouched: 1100 + 2x20 means the content
   box is still exactly 1100px once the window is wide enough, and the columns
   land on the same pixels as the original. Below that the band shrinks with
   the window and the edge holds. */
.site-content {
  max-width: calc(var(--max) + var(--edge) * 2);
  margin: 2em auto 0;
  padding: 0 var(--edge);
}

.content-area, .widget-area { width: 100%; float: left; }

/* ============================================================ content === */

/* The theme puts this inset on article.hentry to hold the text off the
   sidebar. In one column there is no sidebar and it only made the text
   lopsided -- 5px from one edge, 20px from the other -- so it waits for
   the two-column breakpoint. */
.page-content { padding-inline-end: 0; }
.page-content p { margin: 1em 0 1.5em; }


.page-content ul, .page-content ol { margin: 0 0 1.5em; padding-inline-start: 40px; }
.page-content li { margin: 0; }

/* A floated image has to leave the text a readable column beside it, and in a
   single column there is no such room: a 242px portrait in a 365px column
   leaves a 100px sliver running two words to the line. So below the two-column
   breakpoint the image sits above its text rather than beside it. */
.alignleft, .alignright {
  display: block;
  float: none;
  margin: 0 auto 1.25em;
}
.aligncenter { display: block; margin: 0 auto 1em; }

/* ========================================================== accordion === */
/* Box metrics measured off the original: item 248px tall when open
   (1px frame + 62px heading + 184px body + 1px frame), headings 62px. */

.accordion { margin: 0 0 20px; }

.accordion-item {
  background: #fff;
  /* the original's panel frame: it reserves 1px a side but paints nothing,
     which insets the heading and adds 2px to each item */
  border: 1px solid transparent;
  border-radius: 4px;
}

.accordion-item + .accordion-item { margin-top: 5px; }

.accordion-heading { margin: 0; font-size: 1rem; }

.accordion-trigger {
  display: block;
  width: 100%;
  padding: 22px 15px;            /* 18px line + 44px padding = 62px */
  background: var(--panel-head);
  border: 0;
  border-radius: 0;
  color: #000;
  font-family: inherit;
  font-size: 1.125rem;           /* 18px */
  font-weight: 700;
  line-height: 1;
  text-align: inherit;
  cursor: pointer;
}
.accordion-trigger:hover { color: var(--accent); }

.accordion-panel {
  padding: 15px;
  background: #fff;
  border: 2px solid var(--panel-head);
  border-radius: 0;
  color: #000;
}
.accordion-panel[hidden] { display: none; }
.accordion-panel img { width: 150px; }

/* ============================================================ contact === */
/* The page exists to get someone to call or write, so those two actions lead
   as real controls and the reference details follow in a card. Everything
   that can be a link is one: a phone number a reader has to copy out by hand
   is a phone number that does not get dialled. */

.lede { margin: 0 0 1.75em; color: var(--muted); font-size: 1.0625em; line-height: 1.7; }

.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 2em; }

/* 52px tall and full-width on a phone: these are the two things the page is
   for, and a thumb should not have to aim. */
.contact-btn {
  display: inline-flex;
  flex: 1 1 15rem;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 52px;
  padding: .75rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.contact-btn svg { flex: 0 0 auto; }
.contact-btn:hover, .contact-btn:focus { background: var(--panel-head); text-decoration: none; }
.contact-btn-primary { background: var(--accent); color: #fff; }
.contact-btn-primary:hover, .contact-btn-primary:focus { background: #1f4d00; color: #fff; }

/* ul.contact-list, not .contact-list: .page-content ul is the more specific
   selector and its 40px list indent would otherwise push every row off the
   card's left edge, taking the row dividers with it. */
.page-content ul.contact-list {
  margin: 0 0 1.5em;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  list-style: none;
}
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border-top: 1px solid var(--rule);
}
.contact-list li:first-child { border-top: 0; }

.contact-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--panel-head);
  border-radius: 50%;
  color: var(--accent);
}
.contact-text { min-width: 0; }    /* lets a long value wrap instead of pushing out */
.contact-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.contact-value { display: block; line-height: 1.5; overflow-wrap: anywhere; }

/* ============================================================ widgets === */

.widget { margin: 0 0 24px; }   /* the original keeps this on the last one too */
/* the embed stays inline, as in the original: the line box it sits in adds
   8.8px below each video, which is part of the sidebar's rhythm */
/* 280x158 was the theme's thumbnail size; held at it the video sat inside a
   336px column with dead space beside it, and was needlessly small on a phone.
   Filling the column is only half of it: the iframe carries a height="158"
   attribute, which maps to a presentational height, and aspect-ratio is
   ignored unless one axis is auto. So the box stayed 158px tall at every
   width -- 365x158 on a phone, 2.3:1 -- and YouTube cropped its 16:9 player
   to fit, cutting the poster and crowding the control bar at the bottom. height:auto
   is what lets the ratio govern; 16/9 is the player's real shape. */
.widget iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  /* the player is a black rectangle, so it needs an edge of its own to sit on
     white rather than reading as a hole in the page */
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}

/* ============================================================= footer === */
/* One light band closing the page: identity, contact, language, then the
   copyright line on a hairline. The accent rule on top is what separates it
   from the white page, so it needs no heavy fill. */

.site-footer {
  background: var(--footer-bg);
  border-top: 3px solid var(--accent);
  color: var(--ink);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em 3em;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--edge);
}

.footer-widget { flex: 1 1 240px; min-width: 0; }

.footer-identity .footer-name {
  margin: 0;
  color: var(--title-ink);
  font-size: 1.0625rem;
  font-weight: 700;
}
.footer-identity .footer-role {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
}

.footer-widget .widget-title {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.footer-widget .widget-body { font-size: .875rem; }
.footer-widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widget li { padding: .25rem 0; }

/* Weight, not a rule, marks these as links. Phone numbers and addresses read
   as actionable on their own, so they carry the distinction without underlines. */
.footer-widget a {
  color: var(--ink);
  font-weight: 600;
}
.footer-widget a:hover,
.footer-widget a:focus {
  color: var(--accent);
  text-decoration: none;
}

/* The language pair as one segmented control: the side you are reading is
   filled, the other is plainly a button to press. */
.lang-list {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .875rem;
  background: #fff;
  border: 1px solid #7f9472;   /* 3.03:1, so the control has a visible edge */
  border-radius: 999px;
  overflow: hidden;
}
.lang-list li { display: flex; padding: 0; }

.lang-list a,
.lang-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1.15rem;
  font-weight: 600;
  white-space: nowrap;
}

/* the language you are already reading: shown, but not a link back to here */
.lang-current { background: var(--accent); color: #fff; }

.lang-list a { color: var(--ink); }
.lang-list a:hover,
.lang-list a:focus { background: #e9efe4; color: var(--accent); text-decoration: none; }

/* ====================================================== copyright === */
/* Same surface as the footer, divided by a hairline rather than a colour
   change, so the page ends on one band instead of two. */

.site-info {
  background: var(--footer-bg);
  border-top: 1px solid var(--rule);
}
.site-info-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }
.site-info p {
  margin: 0;
  padding: 16px 0;
  color: var(--muted);
  font-size: .8125rem;
  text-align: center;
}

/* ====================================== breakpoint: 40.063em (641px) === */

@media only screen and (min-width: 40.063em) {

  body { font-size: 1rem; }

  /* two columns: the theme's percentage grid again, inside the padded band */
  .page-content { padding-inline-end: 15px; }

  .content-area {
    width: var(--col-main); float: left;
    margin-left: var(--gutter); margin-right: var(--gutter);
  }
  .widget-area {
    width: var(--col-aside); float: right;
    margin-left: var(--gutter); margin-right: var(--gutter);
  }

  /* Floated again now there are two columns, but never taking more than 40% of
     the one it sits in, so the text keeps a column and not a sliver. max-width
     caps without stretching, so a small image still renders at its own size. */
  .alignleft  { float: left;  max-width: 40%; margin: 0 24px 0 0; }
  .alignright { float: right; max-width: 40%; margin: 0 0 0 24px; }

  [dir="rtl"] .alignleft  { float: right; margin: 0 0 0 24px; }
  [dir="rtl"] .alignright { float: left;  margin: 0 24px 0 0; }
}

/* ========================================= breakpoint: 52em (832px) === */
/* The nav switches to a bar on its own schedule, not the layout's. Measured,
   the five items need 767px tightened and 984px at full size, so below 832px
   the bar cannot fit on one line and the button keeps the job. A wrapped menu
   bar reads as broken; the hamburger does not. */

@media only screen and (min-width: 52em) {

  .menu-toggle { display: none; }
  .main-nav { display: block; }
  .main-nav > ul { text-align: center; }
  .main-nav li { display: inline-block; }

  /* The bar is whole here, so nothing sticks and nothing is condensed. It
     also gets the container back: moving it out of .site-header-inner to make
     it sticky took the 1100px box and the centring with it, which left the
     items flush against the window edge instead of over the content. */
  .nav-bar {
    position: static;
    max-width: var(--max);
    margin: 0 auto;
  }
  .nav-bar.is-stuck { box-shadow: none; }
  /* holds only the condensed name and the hamburger, both of which belong to
     the small layout -- left as a block it would sit here as an empty 62px band */
  .nav-bar-inner { display: none; }
  .nav-head, .nav-foot { display: none; }

  /* if the viewport grows while the panel is open, it is a menu bar again */
  .main-nav.is-open {
    position: static;
    display: block;
    background: none;
    animation: none;
  }
  .main-nav.is-open > ul { padding: 0; overflow: visible; }
  .main-nav.is-open > ul a {
    min-height: 0;
    font-size: inherit;
    font-weight: inherit;
    border-inline-start: 0;
  }

  /* hairlines above and below make it a menu bar rather than five words
     floating between the title and the page */
  .nav-bar {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .main-nav a {
    position: relative;
    display: block;
    min-height: 0;
    padding: 1.1em .5em;
    font-size: .8125rem;
    border-bottom: 0;
  }

  /* the marker that says where you are, and previews where you are going */
  .main-nav a::after {
    content: "";
    position: absolute;
    inset-inline: .5em;
    bottom: -1px;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .18s ease;
  }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after,
  .main-nav [aria-current="page"]::after { transform: scaleX(1); }
}

/* ======================================== breakpoint: 63em (1008px) === */
/* Past the point where the full-size items fit on one line, let them breathe. */
@media only screen and (min-width: 63em) {

  /* With the container at full width the line runs to 75 characters at 16px,
     the far edge of the comfortable range. A step up in size brings it back to
     about 70 and suits the kind of reading these pages ask for. Headings are
     sized in em, so they follow; everything chrome-like is in rem and does not. */
  body { font-size: 1.0625rem; }        /* 17px */

  .main-nav a { padding: 1.25em .75em; font-size: 1rem; }
  .main-nav a::after { inset-inline: .75em; }
}

/* =============================================== right-to-left (ar) === */

/* Arabic is cursive: inside a word the letters join up. Tracking prises those
   joins apart, which is what makes the text read as loose, disconnected
   letters, and uppercasing does nothing because Arabic has no letter case.
   Keyed on language and not direction, so it also covers the العربية control
   that sits on the otherwise-English pages. */
:lang(ar),
:lang(ar) .site-title,
:lang(ar) .nav-brand,
:lang(ar) .menu-label,
:lang(ar) .contact-label,
:lang(ar) .footer-widget .widget-title {
  letter-spacing: normal;
  text-transform: none;
}

/* The small labels are sized for Latin capitals. Arabic has no capitals and
   sits lower against the baseline, so at the same pixel size it reads a step
   smaller than the text beside it; these two put it back. */
:lang(ar) .menu-label { font-size: .9375rem; }                    /* 13 -> 15px */
:lang(ar) .footer-widget .widget-title { font-size: .875rem; }    /* 12 -> 14px */
:lang(ar) .contact-label { font-size: .875rem; }                  /* 12 -> 14px */

[dir="rtl"] .content-area { float: right; }
@media only screen and (min-width: 40.063em) {
  [dir="rtl"] .widget-area { float: left; }
}

/* Latin runs (phone, email, URLs) inside Arabic text */
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ==================================================== reduced motion === */

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

/* ================================================================ print = */

@media print {
  .main-nav, .menu-toggle, .nav-brand, .hero, .site-footer, .site-info, .widget-area { display: none !important; }
  .content-area { width: 100%; float: none; margin: 0; }
  body { font-size: 11pt; }
}