/* ==========================================================================
   /safety - readability pass
   Attached to the "Teen Travel Safety at Rustic Pathways" page only.
   Prints after the theme stylesheets, so equal specificity wins on order.

   Deliberately UNCHANGED: body font (theme Helvetica Neue stack) and page
   background (white).

   Changes presentation only. Article word count stays 4,331.
   ========================================================================== */

/* ---- 1. Reclaim the empty right rail ---------------------------------- */
/* The template reserves a 3rd grid column for the "Right sticky element".
   That field is unset on this page, so the column renders 432px wide and
   25,555px tall holding nothing, squeezing the article to 799px.
   --Grid__Size is the theme's own width variable, set inside
   @media (min-width:50rem) - matched here so mobile stacking is untouched.
   If a Right sticky element is ever added to this page, delete this block. */

@media (min-width:50rem){
  .Grid > .Grid__Cell--PaddingRightJumbo{--Grid__Size:0%; padding-left:0; padding-right:0; overflow:hidden}

  /* Ahrefs article grid, measured from their stylesheet 2026-09-19:
     252px rail + 48px gap + 840px column = 1140px, fixed, centred.
     The theme cell is border-box and carries 16px padding-left from
     --Grid__Spacing, so each --Grid__Size is the content width plus that
     16px, plus the 48px gap on the rail. justify-content centres the
     fixed cells without touching the theme negative margin. */
  .Grid:has(> .Blog_Content){justify-content:center}
  .Grid:has(> .Blog_Content) > .Grid__Cell--M1of4:first-child{--Grid__Size:316px; padding-right:48px}
  .Grid > .Grid__Cell--M1of2.Blog_Content{--Grid__Size:856px; padding-right:0}

  /* Layer__Inner carries the generic 24px side gutter. Inside the fixed
     grid the article should sit flush at 840px, so the gutter is dropped
     here only. It still applies below 50rem, where it is the phone gutter. */
  .Blog_Content .Layer__Inner{padding-left:0; padding-right:0}

  /* The article's first line started 16px under the reading bar, inside
     the bar's 20px white fade, and 32px above the TOC label beside it.
     48px puts both columns on one top line, clear of the fade. */
  .Grid > .Grid__Cell--M1of2.Blog_Content > .Layer > .Layer__Inner{padding-top:48px}
}

/* ---- 2. Reading measure and rhythm ------------------------------------ */
/* Ahrefs caps prose at 600px inside the 840px column (a withMargins
   wrapper); tables and images break out to the full width. 600px at 19px
   is about 62 characters. */

.Blog_Content .Module__Wysiwyg p,
.Blog_Content .Module__Wysiwyg ul,
.Blog_Content .Module__Wysiwyg ol{max-width:600px}

/* Lists keep their indent but end on the same 600px right edge as the
   prose. The theme indented ol 1.875em and ul 1.796em as margin, so a list
   ran about 35px past the paragraphs and the two list types sat 1.5px apart.
   One 36px padding inside a border-box fixes both. */
.Blog_Content .Module__Wysiwyg ul,
.Blog_Content .Module__Wysiwyg ol{box-sizing:border-box; margin-left:0; padding-left:36px}

.Blog_Content .Module__Wysiwyg p{margin:0 0 1.15em; line-height:1.68; text-wrap:pretty}
.Blog_Content .Module__Wysiwyg li{margin:0 0 .7em; line-height:1.62}
.Blog_Content .Module__Wysiwyg li::marker{color:#222; font-weight:600}

/* ---- 3. Headings carry the navigation --------------------------------- */
/* 11 H2s across a 25,000px page. A hairline turns the scroll into chapters.
   NOTE: do not add an h2:first-child guard here. Each H2 is the first child
   of its own <section>, so that guard suppresses every rule on the page. */

.Blog_Content .Module__Wysiwyg h2{
  /* no font-size here: the theme's 32px H2 is the default and stays.
     An earlier clamp() topped out at 36.8px and grew with viewport width. */
  line-height:1.16;
  letter-spacing:-.018em;
  color:#222;
  max-width:600px; /* the reading measure, same as p/ul/ol */
  margin:1.5em 0 .6em;
  text-wrap:wrap; /* fill each line to 600px, as Ahrefs does; balance halved two-line H2s */
}
.Blog_Content .Module__Wysiwyg h2::before{
  content:""; display:block; height:1px;
  background:rgba(0,11,20,.12); margin-bottom:1.8em;
}

.Blog_Content .Module__Wysiwyg h3{
  /* no font-size here either - theme default retained */
  line-height:1.3; letter-spacing:-.01em;
  color:#222; margin:2.4em 0 .5em; max-width:600px;
}

/* first paragraph after a section head is the answer - let it read like one */
.Blog_Content .Module__Wysiwyg h2 + p{line-height:1.6; margin-bottom:1.3em}

/* ---- 4. Tables -------------------------------------------------------- */
/* Layout copied in full from the Ahrefs blog table system, measured from
   their stylesheet 2026-09-19. The load-bearing idea is that a WRAPPER DIV
   is the scroller and the table is never display:block. The old mobile rule
   put display:block on the table itself and then restored display:table to
   thead and tbody only, so tfoot fell out of the table formatting context
   and the three Total rows stopped lining up with their columns below 800px.
   With a frame there is nothing to restore and that bug cannot recur.

   Ahrefs values used verbatim: overflow-x:auto, -webkit-overflow-scrolling,
   box-sizing:border-box, inset 0 0 0 1px rgba(0,0,0,.1), radius 6px, frame
   padding 8px 16px stepping to 8px 12px at their 767px breakpoint,
   border-collapse:collapse, width:100%, row rule 1px rgba(0,0,0,.1),
   th padding 16px 8px 8px, td padding 8px, both vertical-align:top.
   min-width is their own wide-table value (768px) rather than the 300px on
   the article, because our cells hold sentences and theirs hold labels
   capped at 180px.

   Colour: none. The header row is bold ink over a 2px rule, the grey
   row-subject column stays as the only fill.

   class="rp-data-table" still opts every table out of the theme's
   table:not([class]) block, which is why no !important appears below. */

.rp-table-frame{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  border-radius:6px;
  padding:8px 16px;
  margin:2em 0 2.4em;
}
@media (max-width:47.99rem){
  .rp-table-frame{padding:8px 12px}
}

.rp-data-table{
  width:100%;
  min-width:48rem;
  table-layout:auto;
  border-collapse:collapse;
  font-size:1rem;
  line-height:1.5;
  margin:0;
}

.rp-data-table caption{
  caption-side:top; text-align:left;
  font-size:.8125rem; font-weight:700; letter-spacing:.055em;
  text-transform:uppercase; color:rgba(0,11,20,.6);
  padding:.4em 0 .8em; max-width:none; /* a caption labels its table: full table width */
}

.rp-data-table thead th{
  /* no fill: plain bold ink over a rule, as on the Ahrefs blog.
     Ruled 2026-09-30: no navy band with white text on table headers. */
  color:#222; font-size:1rem; font-weight:700;
  text-align:left; padding:16px 8px 8px; vertical-align:bottom;
  border-bottom:2px solid rgba(0,11,20,.2);
}

.rp-data-table tbody td,
.rp-data-table tbody th,
.rp-data-table tfoot td,
.rp-data-table tfoot th{
  padding:8px;
  vertical-align:top;
  text-align:left;
}

.rp-data-table tbody tr,
.rp-data-table tfoot tr{border-top:1px solid rgba(0,0,0,.1)}

/* row-subject column is the anchor */
/* Ahrefs caps every cell's content at 180px (cellContent{max-width:180px}).
   We have no inner div, so the cap goes on the row-subject column, which
   is the only one that balloons under table-layout:auto: at 1440px the Year
   column measured 378px holding 4-character values. */
.rp-data-table tbody th[scope="row"]{
  font-weight:700; color:#222; background:#f4f5f6;
  width:11.25rem; min-width:8rem; max-width:11.25rem;
}

.rp-data-table tfoot{border-top:2px solid rgba(0,11,20,.2)}
.rp-data-table tfoot td,
.rp-data-table tfoot th{font-weight:700; background:#f4f5f6; color:#222}

/* ---- 6. Labelled lead-ins --------------------------------------------- */
/* 8 paragraphs open with a bolded label - the "Current evidence limit:" and
   "Current assurance limit:" caveats, the record notes, and a plain contact
   line. They get a typographic distinction only: bold, in body ink. Navy
   is reserved for headings, so a label does not flip colour mid-line.
   No box, no tinted background, no coloured border strip. That combination
   reads as a generated callout rather than as part of the page, and it was
   also boxing paragraphs that are not caveats at all. */

.Blog_Content .Module__Wysiwyg p > strong:first-child{color:inherit}

/* ---- 7. Images -------------------------------------------------------- */

/* Two image widths. Standard images sit on the 600px text measure. An
   image whose file is at least 840px wide carries class="rp-wide" in the
   body and breaks out to the 840px table width, so nothing is upscaled.

   Each image sits in a well copied from the Ahrefs blog (measured
   2026-09-30): #f4f5f6 fill, 16px padding, 6px radius. The well is the box
   that lands on 600 or 840, so the photo inside is 568 or 808, the same
   16px inset the table frame gives its table. The well rounds the corners,
   so the image itself does not. The incident chart is wrapped in a <p>,
   so that paragraph is its well. */
.Blog_Content .Module__Wysiwyg img{max-width:600px; height:auto}

.Blog_Content .Module__Wysiwyg figure:has(> img),
.Blog_Content .Module__Wysiwyg p:has(> img:only-child){
  box-sizing:border-box; max-width:600px;
  padding:16px; background:#f4f5f6; border-radius:6px;
}
.Blog_Content .Module__Wysiwyg figure:has(> img.rp-wide),
.Blog_Content .Module__Wysiwyg p:has(> img.rp-wide:only-child){max-width:840px}

.Blog_Content .Module__Wysiwyg figure > img,
.Blog_Content .Module__Wysiwyg p > img:only-child{display:block; width:100%; max-width:100%}

/* ---- 10. Author box ---------------------------------------------------- */
/* The bio card rendered 1,200px wide while body copy is 576px, so the
   biography read at roughly twice the article measure. The card's outer
   edge sits on the same 600px line as the prose. */

.Blog_Content .rp-author-stack,
.Blog_Content .rp-author-box{max-width:600px}


/* ---- 8. Figure captions ----------------------------------------------- */
/* The theme ships one figure rule, figure{margin:0}, and nothing for
   figcaption, so a caption inherits full body type and reads as a stray
   paragraph. Size, colour and gap only; no font-family change. */

.Blog_Content .Module__Wysiwyg figcaption{font-size:.875rem; line-height:1.5;
  color:rgba(0,11,20,.62); margin-top:.6rem}

/* ---- 9. Links ---------------------------------------------------------- */
/* The theme draws the underline with border-bottom:1.5px, so links already
   carried three cues: colour, weight 600 and a rule. Bold is the page's
   label signal (8 paragraphs open with a bold navy lead-in at the same
   weight), so weight drops to regular and the underline does the work.
   text-decoration replaces border-bottom so the line skips descenders.
   Hover flips to the header orange, as Ahrefs flips to theirs. */

.Blog_Content .Module__Wysiwyg a{
  font-weight:400;
  border-bottom:0;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.16em;
  text-decoration-color:rgba(0,102,204,.45);
}
.Blog_Content .Module__Wysiwyg a:hover{color:#c1601c; text-decoration-color:#c1601c}

/* ---- 11. Table of contents -------------------------------------------- */
/* The rail is a plugin widget whose stylesheet sets EVERY declaration
   !important: font-family:Arial, border-left:2px solid blue on the active
   item, a #e2e3e5 fill on hover and active, and padding:2px. Only
   !important beats !important, and the escape-the-selector trick cannot
   work because the markup is generated and carries no hook to opt out of.
   So this is the one block on the page that uses it, at higher specificity
   so the result is deterministic rather than order-dependent.

   It also reclaims the rail width. The cell is 252px, but Layer__Inner's
   24px gutters plus the widget's own 10px padding left the list 177px, so
   every item wrapped to three lines and the list ran 763px, not 625px. */

@media (min-width:50rem){
  .Grid__Cell--M1of4 .Layer__Inner{padding-left:0; padding-right:0}

  .Grid__Cell--M1of4 .toc{
    font-family:inherit !important;
    border-right:0 !important;
    padding:0 !important;
    scrollbar-width:thin;
  }

  /* the widget renders its own label as a bare div */
  .Grid__Cell--M1of4 .toc > div:first-child{
    font-size:.6875rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:rgba(0,11,20,.6);
    line-height:1.45; margin:0 0 .9rem;
  }

  .Grid__Cell--M1of4 .toc ul li,
  .Grid__Cell--M1of4 .toc-list-item{margin:0 !important; font-size:inherit !important}

  .Grid__Cell--M1of4 .toc a{
    font-family:inherit !important;
    font-size:.875rem !important;
    line-height:1.45 !important;
    color:#222 !important;
    padding:.45rem 0 .45rem .875rem !important;
    border-left:2px solid rgba(0,0,0,.1) !important;
    background:none !important;
    transition:color .15s ease, border-color .15s ease !important;
  }
  .Grid__Cell--M1of4 .toc a:hover{
    color:#000 !important; background:none !important;
    border-left-color:rgba(0,0,0,.1) !important;
  }
  .Grid__Cell--M1of4 .toc a.active{
    color:#222 !important; font-weight:700 !important;
    background:none !important; border-left-color:#c1601c !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .Grid__Cell--M1of4 .toc a{transition:none !important}
}

/* ---- 12. Author box colour ------------------------------------------- */
/* The byline, bio popup and author box introduced four values that appear
   nowhere else on the page: #888888 on the micro-labels (3.54:1 on white,
   failing WCAG AA at 4.5:1), #767676 on the roles and meta line (4.54:1,
   scraping past), #555555 on the bio prose, and #0C3964 on the names and
   links, which is the brand navy #003964 with 0C typed for 00.

   Mapped onto values already on the page: rgba(0,11,20,.6) is the same
   muted the table of contents uses (5.26:1), #222222 is body ink, and
   #003964 is the real brand navy. Twelve of the thirteen selectors win on
   a plain class. .rp-bio-link is the exception: its theme rule is
   !important, so that one line matches it. */

.rp-byline-label,
.rp-author-box__label{color:rgba(0,11,20,.6)}

.rp-article-date,
.rp-article-dot,
.rp-article-readtime,
.rp-byline-shortbio,
.rp-bio-role,
.rp-bio-description,
.rp-author-box__role{color:rgba(0,11,20,.6)}

.rp-author-box__bio{color:#222}

/* names in body ink; the profile links in the page's link blue */
.rp-byline-name{color:#222}
.rp-author-box__link{color:#0066cc}

/* the only !important on this page outside the plugin-owned rail */
.rp-bio-card a.rp-bio-link{color:#0066cc !important}

/* the name is an anchor, not the .rp-author-box__link class */
.rp-author-box__name a{color:#222}

/* the verified badge was #21B573 at 2.65:1. Darkened to keep the green
   signal while clearing 4.5:1 for 12px text. */
.rp-verline{color:#16804f}

/* ---- 13. Header clearance ---------------------------------------------- */
/* The theme pins .ReadingProgressContainer at var(--SiteNavHeight) - 1px,
   and --SiteNavHeight is still the old nav's 4rem. The SiteMasthead is
   2.25rem util bar + 4.75rem white bar + 1px rule, so the progress bar sat
   at 63px across a 112px header and its 20px white fade wiped the bottom of
   the logo, nav and button. Below 68rem the theme tucks the util bar away
   (top: -1px - 2.25rem) and shrinks the white bar to 3.875rem. */

.SiteWrapper .ReadingProgressContainer{top:calc(7rem - 1px)}
@media (max-width:67.9999rem){
  .SiteWrapper .ReadingProgressContainer{top:calc(3.875rem - 1px)}
}

/* Anchor jumps from the TOC: the theme's 100px scroll-margin predates the
   taller header, so an H3 landed under it. Header plus progress bar. */
.Grid>.Grid__Cell.Blog_Content .Module__Wysiwyg h2,
.Grid>.Grid__Cell.Blog_Content .Module__Wysiwyg h3{scroll-margin-top:8rem}

/* ---- 14. Text colour roles ------------------------------------------ */
/* Four text colours, one job each: #222 = everything read, headings
   included (size carries the hierarchy, as on the Ahrefs blog), link blue =
   links, muted = metadata and captions, no white text; tables carry no header band.
   The current TOC item is bold with the orange rule, not a second colour.
   The theme's .TextBlock h1 rule outranks a single class, so the title
   takes its parent to win. */
.rp-article-header .rp-article-title{color:#222}

/* ---- 15. Article header at 960px ------------------------------------ */
/* The title, meta line and byline were capped three times over: the
   Article__Head layer carried 25% side padding (the theme's rail grid),
   the TextBlock 744px and the hero section 860px. 960px centred on the
   page matches the Ahrefs title block; the 24px Layer__Inner gutter stays,
   so narrower desktops keep an edge. Phones are untouched. */
@media (min-width:50rem){
  .Layer.Article__Head{padding-left:0; padding-right:0}
  .Article__Head > .Layer__Inner{box-sizing:border-box; width:100%; max-width:calc(960px + 48px); margin-inline:auto}
  .TextBlock:has(> .rp-hero-article){max-width:none}
  .TextBlock > .rp-hero-article{max-width:none; padding-inline:0}
}