/*
Theme Name:   Divi Child - Oscoda Accessibility
Theme URI:    https://oscoda.com/
Description:  Accessibility remediation child theme for oscoda.com. Targets WCAG 2.2 Level AA.
              All changes are additive and reversible - deactivating this theme restores the
              site exactly as it was. Built by Envigor.
Author:       Andy Mazur, Envigor
Author URI:   https://envigor.com/
Template:     Divi
Version:      1.4.4
License:      GNU General Public License v2
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  divi-child-oscoda
*/

/* ==========================================================================
   COLOUR TOKENS

   STRATEGY: keep the original brand orange #e47e3d wherever it already meets
   contrast, and only substitute where it cannot.

     ROLE                              COLOUR      RATIO
     footer headings on #171717        #e47e3d     6.28:1   original
     top bar background                #e47e3d     6.09:1   original, charcoal text
     filled button                     #e27631     3.06:1   boundary vs white page
       text on that fill               #1a1a1a     5.69:1
     links / icons / borders on light  #0e3354    12.96:1   navy
     text on photos and dark panels    #ffffff              unchanged

   The orange fails in exactly three roles and nowhere else:
     as text on white          2.86:1  (needs 4.5)  -> navy
     as a border on white      2.86:1  (needs 3.0)  -> filled button instead
     under white text          2.86:1  (needs 4.5)  -> charcoal text instead

   Navy must NOT be used on the dark footer - it is 1.38:1 there.
   In-content links still need underlines: navy against grey body text is
   2.26:1, under the 3:1 that 1.4.1 requires for a colour-only distinction.
   ========================================================================== */

:root {
  /* --- Brand orange - KEPT AS THE ORIGINAL wherever it already passes -------
     #e47e3d is fine on dark backgrounds and behind dark text. It fails in only
     three roles: as text on white, as a border on white, and under white text.
     Those three move to navy or to a filled treatment, rather than darkening
     the brand colour across the whole site. */
  --oa-orange:            #e47e3d;   /* ORIGINAL - decorative, and on dark */
  --oa-orange-on-dark:    #e47e3d;   /* 6.28:1 on #171717, 4.82:1 on #2d2d2d */

  /* Filled buttons. A filled control's boundary is its fill, which 1.4.11 wants
     at 3:1 against the page; #e47e3d is 2.86:1, a hair short. #e27631 is the
     same hue two lightness points darker - visually indistinguishable - at
     3.06:1, with charcoal text on it at 5.69:1. */
  --oa-btn-fill:          #e27631;
  --oa-btn-text:          #1a1a1a;

  /* Top contact bar keeps the ORIGINAL orange; the TEXT changes to charcoal.
     White on #e47e3d is 2.86:1; charcoal on it is 6.09:1.
     To go the other way instead - darker bar, white text - set
     --oa-bar-bg to #aa5118 and --oa-bar-text to #ffffff (5.39:1). */
  --oa-bar-bg:            #e47e3d;   /* ORIGINAL */
  --oa-bar-text:          #1a1a1a;

  /* --- Navy - links and UI edges on LIGHT backgrounds only -----------------
     Never on the dark footer, where navy would be 1.38:1. */
  --oa-link:              #0e3354;   /* 12.96:1 on white, 11.58:1 on #f2f2f2 */
  --oa-ui:                #0e3354;   /* borders and icons on light */

  /* --- Gold ----------------------------------------------------------------- */
  --oa-gold:              #e09900;   /* decorative only - unchanged */
  --oa-gold-text:         #946500;   /* 5.10:1 on white, passes at any size */

  /* --- Blue contact panel --------------------------------------------------- */
  --oa-blue:              #4197cb;   /* decorative only - unchanged */
  --oa-blue-panel:        #2d77a4;   /* white text on it = 4.90:1 */

  /* --- Footer --------------------------------------------------------------- */
  --oa-footer-text:       #949494;   /* 5.91:1 on #171717 */

  /* --- Form errors ---------------------------------------------------------- */
  --oa-error:             #8c1d18;
  --oa-error-bg:          #ffffff;

  /* --- Focus indicator ------------------------------------------------------ */
  --oa-focus-dark:        #1a1a1a;
  --oa-focus-light:       #ffffff;
  --oa-focus-width:       3px;
  --oa-focus-offset:      2px;
}


/* ==========================================================================
   1.4.3 / 1.4.11 - BRAND ACCENT COLOUR OVERRIDES

   Divi emits its accent colour from Theme Options into an inline <style> block
   in the document head, which loads after this stylesheet. !important is used
   here so these overrides win; it is confined to this section.

   Selectors below mirror Divi's own accent-colour rules exactly, so behaviour
   is unchanged apart from the colour value.
   ========================================================================== */

/* Body links - the site-wide default.

   NOTE ON SPECIFICITY: this was originally written as a long :not() chain
   excluding the footer nav, top bar and slider. That was a mistake. :not()
   takes the specificity of its argument, so four ID-based exclusions gave the
   rule a specificity around (4,3,7) - it silently outranked every area-specific
   rule below it, which is why buttons on the blue panel stayed orange at 1.09:1
   even though a more targeted rule existed.

   The exclusions were never necessary. A plain `a` is (0,0,1), so any rule
   scoped by an ID (#et-footer-nav a) or by two classes wins on its own. Keep
   this selector as simple as possible and let the sections below override it. */
a {
  color: var(--oa-link) !important;
}

/* Module headings that are links (Blurb/Blog/Portfolio titles).

   Divi colours the heading itself - often white, because these sit on coloured
   tiles or photographs - and the <a> inside simply inherits it. The site-wide
   `a` rule above was overriding that and painting them the accent orange, which
   is far worse on every one of those backgrounds:

     tile          white      accent orange
     #042b48       14.54:1        2.70:1
     #4c4832        9.21:1        1.71:1
     #47773c        5.29:1        1.02:1

   Inheriting from the heading restores Divi's intended colour. Specificity
   (0,1,1) beats the bare `a` selector, so this wins without needing a :not()
   chain - see the specificity note above for why those are avoided here. */
.et_pb_module_header a,
.et_pb_module_header a:hover,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit !important;
}

/* Footer navigation sits on #2d2d2d with a translucent white overlay.
   A light grey clears 4.5:1 against both the overlay and the base colour. */
#et-footer-nav .bottom-nav a,
#et-footer-nav .bottom-nav li a,
#et-footer-nav a {
  color: #d4d4d4 !important;   /* 7.67:1 on the overlay, 9.29:1 on #2d2d2d */
}

#et-footer-nav .bottom-nav a:hover,
#et-footer-nav .bottom-nav li.current-menu-item a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Buttons, submit controls, reply links.
   Divi Builder buttons carry per-module classes (.et_pb_button_0, _1, ...) that
   outrank a bare .et_pb_button selector, so the class combination below is
   matched explicitly rather than relying on Divi's own accent rule. */
.et_pb_contact_submit,
.et_password_protected_form .et_submit_button,
.et_pb_bg_layout_light .et_pb_newsletter_button,
.comment-reply-link,
.form-submit .et_pb_button,
.et_pb_button.et_pb_bg_layout_light,
a.et_pb_button.et_pb_bg_layout_light,
.et_pb_bg_layout_light.et_pb_module.et_pb_button {
  background-color: var(--oa-btn-fill) !important;
  color: var(--oa-btn-text) !important;
  border-color: var(--oa-btn-fill) !important;
}

/* Keep the hover state legible: charcoal fill, white text. */
.et_pb_button.et_pb_bg_layout_light:hover,
a.et_pb_button.et_pb_bg_layout_light:hover,
.et_pb_contact_submit:hover {
  background-color: var(--oa-btn-text) !important;
  color: #ffffff !important;
  border-color: var(--oa-btn-text) !important;
}

/* NOTE: buttons are now FILLED rather than outlined. An outlined orange button
   could never pass - the outline is the only thing identifying the control, and
   orange on white is 2.86:1 against the 3:1 that 1.4.11 requires. Filling it
   keeps the brand colour and moves the boundary onto the fill. */

/* Icons and small accents */
#et_search_icon:hover,
.mobile_menu_bar:before,
.mobile_menu_bar:after,
.et_toggle_slide_menu:after,
.et-social-icon a:hover,
.et_pb_sum,
.et_pb_pricing li a,
.et_pb_pricing_table_button,
.et_overlay:before,
.entry-summary p.price ins,
.woocommerce div.product span.price,
.et_pb_member_social_links a:hover {
  color: var(--oa-ui) !important;
}

/* Footer headings */
.footer-widget h4,
#main-footer .footer-widget h4,
#main-footer .widget_block h1,
#main-footer .widget_block h2,
#main-footer .widget_block h3,
#main-footer .widget_block h4,
#main-footer .widget_block h5,
#main-footer .widget_block h6 {
  /* On #171717 the ORIGINAL brand orange is 6.28:1 - it passes as-is. */
  color: var(--oa-orange-on-dark) !important;
}

/* Pagination and post meta links */
.wp-pagenavi a:hover,
.nav-single a,
.tagged_as a,
.posted_in a {
  color: var(--oa-link) !important;
}

/* Current menu item in the fixed header */
.et-fixed-header #top-menu li.current-menu-ancestor > a,
.et-fixed-header #top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current_page_item > a {
  color: var(--oa-link) !important;
}

/* Borders and rules - 1.4.11 requires 3:1 for meaningful UI edges */
.et-search-form,
.nav li ul,
.et_mobile_menu,
.footer-widget li:before,
.et_pb_pricing li:before,
blockquote {
  border-color: var(--oa-ui) !important;
}

/* The top contact bar carries white text on orange at 2.85:1. Darken the bar
   itself so the white text passes, rather than changing the text colour.
   Targeted on #top-header directly - the body class Divi's own rule depends on
   is not always present. */
/* Divi's own rule is `.et_secondary_nav_enabled #page-container #top-header`
   with !important - specificity (0,3,1) - and it is emitted inline in the head,
   so it lands after this stylesheet. A bare #top-header selector (0,1,0) loses
   even with !important, because specificity decides between two !important
   declarations. Prefixing with `html body` raises this to (0,3,3) so it wins. */
html body.et_secondary_nav_enabled #page-container #top-header,
html body.et_fixed_nav #page-container .et-fixed-header#top-header,
html body #page-container #top-header,
#top-header {
  background-color: var(--oa-bar-bg) !important;
}

#et-secondary-nav li ul,
.et_fixed_nav #page-container .et-fixed-header#top-header #et-secondary-nav li ul {
  background-color: var(--oa-bar-bg) !important;
}

/* Everything inside the orange bar must stay white. Without this the global
   link rule above recolours the email link to the darkened orange, putting
   orange text on an orange background (1.88:1) - worse than the original. */
#top-header,
#top-header a,
#top-header span,
#et-info,
#et-info a,
#et-info-phone,
#et-info-email,
#et-secondary-menu a,
#et-secondary-nav a {
  color: var(--oa-bar-text) !important;   /* 6.09:1 on the orange bar */
}

/* Social icons in the top bar keep the white treatment on hover too. */
#et-info .et-social-icon a:hover { color: var(--oa-bar-text) !important; }

/* ---------------------------------------------------------------------------
   SLIDER HERO - text over photographs

   The accent-colour override must NOT reach the slider. Slide titles and the
   hero button sit directly on photographs, where any mid-tone colour is
   unreadable against a light part of the image. They revert to white, and a
   dark overlay is added so white is reliably readable whatever the photo shows.

   Automated tools do not catch this: axe skips text over background images
   because it cannot know the pixel behind the text. It was found by eye.

   How the overlay figure was chosen (white text over a black overlay):
     white text needs the backdrop no lighter than #767676 for 4.5:1,
     and no lighter than #949494 for 3:1 (large text, 24px+).

     worst-case pixel   overlay for 4.5:1   overlay for 3:1
        #ffffff               53%                42%
        #e6e6e6               48%                35%
        #c8c8c8               41%                26%
        #aaaaaa               30%                12%

   Slide titles render at 48px, so the 3:1 threshold applies to them; the hero
   button is normal-size text and needs 4.5:1. 0.45 covers the title against any
   photograph and the button against all but a near-white image. Raise
   --oa-slide-overlay to 0.55 for a guarantee against pure white; lower it to
   0.35 if the photographs in use are consistently dark.
   --------------------------------------------------------------------------- */

:root { --oa-slide-overlay: 0.45; }

.et_pb_slider .et_pb_slide,
.et_pb_fullwidth_slider .et_pb_slide {
  position: relative;
}

.et_pb_slider .et_pb_slide::before,
.et_pb_fullwidth_slider .et_pb_slide::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, var(--oa-slide-overlay));
  pointer-events: none;
  z-index: 1;
}

/* Keep slide content above the overlay. */
.et_pb_slider .et_pb_slide .et_pb_container,
.et_pb_slider .et_pb_slide .et_pb_slide_description,
.et_pb_slider .et_pb_slide .et_pb_slide_image,
.et_pb_fullwidth_slider .et_pb_slide .et_pb_container,
.et_pb_fullwidth_slider .et_pb_slide .et_pb_slide_description {
  position: relative;
  z-index: 2;
}

/* Slider controls must also sit above the overlay and stay clickable. */
.et_pb_slider .et-pb-controllers,
.et_pb_slider .et-pb-arrow-prev,
.et_pb_slider .et-pb-arrow-next {
  z-index: 3;
}

/* Slide text and the hero button revert to white - never the accent colour. */
.et_pb_slide_title,
.et_pb_slide_title a,
.et_pb_slide_description,
.et_pb_slide_description .et_pb_slide_content,
.et_pb_slide_content,
.et_pb_slide_content p,
.et_pb_slider .et_pb_slide_description .et_pb_button,
.et_pb_slider .et_pb_more_button,
.et_pb_fullwidth_slider .et_pb_slide_description .et_pb_button {
  color: #ffffff !important;
}

/* The hero button is outlined; the outline must be white too, and it needs
   3:1 against its backdrop as a UI boundary (1.4.11). */
.et_pb_slider .et_pb_slide_description .et_pb_button,
.et_pb_slider .et_pb_more_button,
.et_pb_fullwidth_slider .et_pb_slide_description .et_pb_button {
  border-color: #ffffff !important;
}

/* Small extra margin for legibility where a photo is unusually bright. */
.et_pb_slide_title,
.et_pb_slide_content {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Decorative orange fills that carry NO text keep the original brand colour.
   Listed explicitly so the intent is clear and they are easy to find. */
.et_pb_counter_amount,
.et_pb_featured_table .et_pb_pricing_heading,
.et_quote_content,
.et_link_content,
.et_audio_content {
  background-color: var(--oa-orange);
}

/* ---------------------------------------------------------------------------
   BLUE CONTACT PANEL

   IMPORTANT - the blue is on a COLUMN, not the section:

       .et_pb_column_6 { background-color:#4197cb; padding:110px 10% }   (Members)
       .et_pb_column_2 { background-color:#4197cb; padding:110px 10% }   (Visit Us)

   The row is two columns: an ordinary white column of copy beside the blue
   form column. An earlier version of this file scoped these rules to
   .et_pb_section:has(.et_pb_contact_form_container), which painted the WHOLE
   section blue - taking the white sibling column with it - and then set every
   column transparent, so the form column was only blue by inheritance.

   Everything below is therefore scoped to the column that actually contains
   the form. Nothing outside it is touched.

   Why the column is darkened at all: white text on the original #4197cb is
   3.25:1, short of the 4.5:1 that 1.4.3 wants for the field labels. #2d77a4 is
   the same hue, a few points darker, and puts white text at 4.90:1.
   Original: background-color: #4197cb;
   --------------------------------------------------------------------------- */

.et_pb_column:has(.et_pb_contact_form_container) {
  background-color: var(--oa-blue-panel) !important;
}

/* Text on the panel. The error box keeps its own white background and dark red
   text, so it is excluded here. */
.et_pb_column:has(.et_pb_contact_form_container) :is(p, li, span, h1, h2, h3, h4, h5, h6, .et_pb_text):not(.et_pb_contact_error_text):not(.et-pb-contact-message):not(.oa-field-error) {
  color: #ffffff !important;          /* 4.90:1 on the darkened panel */
}

/* Links on the panel: white, and underlined so colour is not the only cue. */
.et_pb_column:has(.et_pb_contact_form_container) a:not(.et_pb_button):not(.et_pb_contact_submit) {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Form fields ----------------------------------------------------------
   Divi renders the inputs transparent - .et_pb_contact_form_0 .input has
   background-color:rgba(0,0,0,0) - so they take the colour of whatever sits
   behind them, and their only boundary is a 1px rgba(0,0,0,0.12) border. On a
   coloured panel that boundary is about 1.2:1, well under the 3:1 that 1.4.11
   requires for a form control.

   Giving the fields a solid white interior with a dark border fixes both: the
   control is clearly bounded (12.6:1) and the text typed into it is legible.
   -------------------------------------------------------------------------- */

.et_pb_contact_form_container .input,
.et_pb_contact_form_container input.input,
.et_pb_contact_form_container textarea.input,
.et_pb_contact_form_container select.input {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #4a4a4a !important;   /* 8.9:1 against the field interior */
}

/* 1.4.11 is satisfied by the field's white interior, which is 3.25:1 against
   the blue panel; the dark border is what separates the field from its own
   white background, and is not carrying the boundary requirement. */

.et_pb_contact_form_container .input::placeholder {
  color: #5c5c5c !important;              /* 6.3:1 on the white field */
  opacity: 1;
}

/* --- Submit button --------------------------------------------------------
   Divi's generated CSS for this module, at (1,4,1) with !important on several
   properties, produces the original look - a solid chunky orange button:

       background-color: #e37d3a;
       color: #ffffff !important;
       border-width: 8px !important;   border-color: #e37d3a;

   The 8px border is the same colour as the fill, so it simply makes the button
   bigger. Two problems with it:

     - white on #e37d3a is 2.89:1, short of 4.5:1 (1.4.3)
     - #e37d3a against the blue panel is 1.69:1, short of the 3:1 that 1.4.11
       wants for the boundary of a control

   An earlier version of this file recoloured the border to white, which was a
   mistake twice over: it lost on background and text (Divi's selector is more
   specific) but won on border-colour, leaving an 8px white frame around an
   orange button. The rule below is scoped tightly enough to win outright.

   The fix keeps the orange button exactly as designed and changes two things:
   the label goes charcoal (6.02:1 on the orange), and a 2px white ring is
   added OUTSIDE the button as a box-shadow, giving the control a boundary at
   3.25:1 against the panel. box-shadow is used rather than the border because
   Divi locks border-width at 8px with !important - any border colour would be
   a heavy 8px band, not a thin outline.

   SPECIFICITY - the reason this selector is so long. Divi's rule is

       body #page-container .et_pb_section
            .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module
            .et_pb_button

   which is (1,5,1). A selector that merely ties with it LOSES, because Divi's
   et-core-unified-deferred CSS is enqueued after the child stylesheet and a tie
   is broken by source order. Adding .et_pb_module below takes this to (1,6,1)
   so it wins outright. Do not shorten it.

   Original: color: #ffffff;  no ring.
   -------------------------------------------------------------------------- */

body #page-container .et_pb_section .et_pb_column:has(.et_pb_contact_form_container) .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit,
body #page-container .et_pb_section .et_pb_column:has(.et_pb_contact_form_container) .et_pb_contact_form_container.et_pb_module .et_pb_button {
  background-color: #e37d3a !important;   /* ORIGINAL brand orange */
  border-color: #e37d3a !important;       /* matches the fill, as designed */
  color: var(--oa-btn-text) !important;   /* 6.02:1 on the orange */
  box-shadow: 0 0 0 2px #ffffff !important;
}

body #page-container .et_pb_section .et_pb_column:has(.et_pb_contact_form_container) .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit:hover,
body #page-container .et_pb_section .et_pb_column:has(.et_pb_contact_form_container) .et_pb_contact_form_container.et_pb_module .et_pb_button:hover {
  background-color: var(--oa-btn-text) !important;
  border-color: var(--oa-btn-text) !important;
  color: #ffffff !important;              /* 16.1:1 on charcoal */
}

/* Keep the error panel readable - these must win over the rules above. */
.et_pb_column:has(.et_pb_contact_form_container) .et_pb_contact_error_text,
.et_pb_column:has(.et_pb_contact_form_container) .et_pb_contact_error_text li,
.et_pb_column:has(.et_pb_contact_form_container) .et-pb-contact-message,
.et_pb_column:has(.et_pb_contact_form_container) .et-pb-contact-message li,
.et_pb_column:has(.et_pb_contact_form_container) .oa-field-error {
  color: var(--oa-error) !important;
}


/* ==========================================================================
   2.4.7 FOCUS VISIBLE  /  1.4.11 NON-TEXT CONTRAST
   The site previously shipped no focus styling at all. Uses :focus-visible so
   the ring appears for keyboard users without adding a ring on mouse clicks.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.et_pb_button:focus-visible,
.et_pb_contact_submit:focus-visible,
.et-social-icon a:focus-visible,
.et-pb-arrow-prev:focus-visible,
.et-pb-arrow-next:focus-visible,
.et_pb_video_play:focus-visible,
.et-pb-controllers a:focus-visible,
#et_mobile_nav_menu button:focus-visible,
.et_mobile_menu a:focus-visible {
  outline: var(--oa-focus-width) solid var(--oa-focus-dark) !important;
  outline-offset: var(--oa-focus-offset) !important;
  box-shadow: 0 0 0 calc(var(--oa-focus-width) + var(--oa-focus-offset)) var(--oa-focus-light) !important;
  border-radius: 2px;
}

/* Divi removes the outline on audio player buttons - restore it. */
.et_audio_container .mejs-controls .mejs-button button:focus-visible {
  outline: var(--oa-focus-width) solid var(--oa-focus-dark) !important;
  outline-offset: var(--oa-focus-offset) !important;
}

/* Older browsers without :focus-visible still get a visible ring. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
    outline: var(--oa-focus-width) solid var(--oa-focus-dark) !important;
    outline-offset: var(--oa-focus-offset) !important;
  }
}


/* ==========================================================================
   2.4.1 BYPASS BLOCKS - skip to content link
   Hidden until focused, then pinned to the top-left.
   ========================================================================== */

.oa-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  border: 2px solid #1a1a1a;
  border-radius: 0 0 4px 0;
}

.oa-skip-link:focus {
  left: 0;
  top: 0;
  outline: var(--oa-focus-width) solid var(--oa-focus-dark);
  outline-offset: var(--oa-focus-offset);
}

/* Utility: available to assistive technology, not shown visually.
   Used for the search label and the "read more" link context. */
.oa-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   4.1.2 NAME, ROLE, VALUE - social icon links

   Divi already puts the network name inside each social link
   (<a class="icon"><span>Facebook</span></a>) but hides it with display:none,
   which removes it from the accessibility tree entirely. The links therefore
   have no accessible name at all - 10 instances per page.

   Swapping display:none for a visually-hidden technique keeps the icons
   looking exactly the same while giving every link a real name. No JavaScript
   and no markup change required.
   ========================================================================== */

/* Divi uses the same display:none pattern on its slider arrows
   (<a class="et-pb-arrow-prev"><span>Previous</span></a>) and on the video
   play button, so the same treatment gives all of them a real name.
   This is why the JavaScript pass alone did not fix them: the text is present,
   so a "does it have text?" check passes, while the accessibility tree sees
   nothing at all. */
.et-social-icon a span,
#et-info .et-social-icon a span,
#main-footer .et-social-icon a span,
.et-pb-arrow-prev span,
.et-pb-arrow-next span,
.et_pb_video_play span {
  display: inline-block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The social anchor needs to be positioned so the hidden span does not escape.

   DO NOT add the slider arrows or the video play button here. Divi positions
   those absolutely - the arrows to left/right, the play button centred - and
   forcing position:relative drops them back into normal flow. That put both
   arrows on the left, and stretched the play button to 1128px wide, which
   pushed a horizontal scrollbar onto the whole page. They are already
   positioned, so they already contain the hidden span. */
.et-social-icon a { position: relative; }


/* ==========================================================================
   1.4.3 CONTRAST - corrections other than the brand orange
   ========================================================================== */

/* Footer body text was #666666 on #171717 (3.12:1). */
#main-footer,
#main-footer p,
#main-footer li,
#main-footer .et_pb_widget,
#main-footer .et_pb_widget a,
#footer-info,
#footer-info a {
  color: var(--oa-footer-text);
}

/* Keep footer links distinguishable from footer text without relying on colour. */
#main-footer a:hover,
#footer-info a:hover {
  text-decoration: underline;
}

/* Gold display headings were #e09900 at 2.41:1, failing even the 3:1
   large-text threshold. Applies to the Trails page hero headings. */
.et_pb_text h1[style*="e09900"],
.et_pb_text h2[style*="e09900"],
.et_pb_text h3[style*="e09900"],
[style*="color: #e09900"],
[style*="color:#e09900"] {
  color: var(--oa-gold-text) !important;
}


/* ==========================================================================
   1.4.1 USE OF COLOUR - in-content links
   Links inside body copy were distinguished from surrounding text by colour
   alone, at less than 3:1 difference. Underline them.
   Navigation, buttons and module links are excluded - they are identifiable
   by position and shape.
   ========================================================================== */

.et_pb_text a:not(.et_pb_button):not(.et_pb_more_link),
.entry-content p a:not(.et_pb_button),
.et_pb_blurb_description a:not(.et_pb_button),
#main-content li a:not(.et_pb_button):not(.et_pb_more_link) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Divi's blog "read more" links sit at the end of an excerpt inside
   .post-content, which none of the selectors above reach. They are the accent
   colour against surrounding body text at less than 3:1, so colour alone
   distinguishes them - underline is required (1.4.1). */
.et_pb_post .post-content a.more-link,
.post-content a.more-link,
a.more-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Do not underline links that only wrap an image. */
.et_pb_text a:has(> img),
.entry-content p a:has(> img) {
  text-decoration: none;
}


/* ==========================================================================
   3.3.2 LABELS OR INSTRUCTIONS - contact form
   Divi hides the labels with display:none, leaving the placeholder as the only
   visible label. Placeholders vanish as soon as the user types.
   ========================================================================== */

.et_pb_contact_form_container .et_pb_contact_field label,
.et_pb_contact_form .et_pb_contact_field > label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px;
  padding: 0;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;          /* the contact section sits on a blue background */
}

/* Mark required fields in text, not colour alone. */
.et_pb_contact_form_container .et_pb_contact_field label .oa-required {
  font-weight: 400;
  font-style: normal;
}


/* ==========================================================================
   3.3.1 ERROR IDENTIFICATION  /  1.4.3  /  1.4.11  /  1.4.1
   The error summary was #666666 on #4197cb = 1.78:1, and invalid fields were
   marked by a #ff0000 border at 1.24:1 against the same blue.

   Rather than restyle the whole blue section (which would change the page's
   appearance), the error summary gets its own white panel. This keeps the
   section looking as it does today while giving full control of contrast.
   ========================================================================== */

.et_pb_contact_form_container .et_pb_contact_error_text,
.et_pb_contact_form_container .et-pb-contact-message {
  display: block;
  background: var(--oa-error-bg);
  color: var(--oa-error);
  border-left: 5px solid var(--oa-error);
  border-radius: 3px;
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
}

/* Divi always outputs <div class="et-pb-contact-message"></div>, empty, and
   fills it in only when the form is submitted. The styling above must not turn
   that empty container into a visible white bar on the panel. */
.et_pb_contact_form_container .et_pb_contact_error_text:empty,
.et_pb_contact_form_container .et-pb-contact-message:empty {
  display: none !important;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}

.et_pb_contact_form_container .et_pb_contact_error_text ul,
.et_pb_contact_form_container .et-pb-contact-message ul {
  margin: 8px 0 0 20px;
  list-style: disc;
}

.et_pb_contact_form_container .et_pb_contact_error_text li,
.et_pb_contact_form_container .et-pb-contact-message li {
  color: var(--oa-error);
  list-style: disc;
}

/* Invalid fields: dark red border for contrast against the white field
   interior, plus a white ring so the marker is also visible against the blue
   section behind it. Neither tone alone clears 3:1 on both sides. */
.et_pb_contact_form_container .et_contact_error,
.et_pb_contact_form_container input.et_contact_error,
.et_pb_contact_form_container textarea.et_contact_error {
  border: 2px solid var(--oa-error) !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

/* 1.4.1 - do not signal the error with colour alone. A warning glyph is added
   before the field via JS-set attribute so it is not colour-dependent. */
.et_pb_contact_form_container .et_contact_error + .oa-field-error,
.oa-field-error {
  display: block;
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--oa-error-bg);
  color: var(--oa-error);
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
}

.oa-field-error::before {
  content: "\26A0";     /* warning triangle */
  margin-right: 6px;
  font-weight: 700;
}


/* ==========================================================================
   2.5.8 TARGET SIZE (MINIMUM)
   Divi's slider pagination dots render at 7x7px with 17px centre-to-centre
   spacing, failing both the size threshold and the spacing exception.

   The visible dot keeps its original size; the clickable area is enlarged with
   padding so the design is unchanged while the target grows.
   ========================================================================== */






/* ==========================================================================
   1.3.1 - archive page heading
   Category and tag archives had no H1. functions.php outputs one; this styles
   it to match the site's existing page titles.
   ========================================================================== */

.oa-archive-title {
  font-size: 33px;
  line-height: 1.2;
  font-weight: 500;
  color: #1a1a1a;
  padding: 0 0 10px;
  margin: 0 0 20px;
}


/* ==========================================================================
   MOBILE MENU
   functions.php / a11y.js replace Divi's <span> toggle with a real <button>.
   These rules keep the button looking exactly like the original span.
   ========================================================================== */

#et_mobile_nav_menu .oa-menu-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Divi styles the toggle glyph via .mobile_menu_bar::before - preserve it. */
#et_mobile_nav_menu .oa-menu-toggle .mobile_menu_bar {
  display: inline-block;
}

/* Ensure the toggle itself is a large enough target. */
#et_mobile_nav_menu .oa-menu-toggle {
  min-width: 44px;
  min-height: 44px;
}


/* ==========================================================================
   1.4.4 RESIZE TEXT
   The viewport tag that disabled pinch-zoom is removed in functions.php.
   Nothing is needed here, but this guards against a fixed body font-size
   preventing browser text scaling.
   ========================================================================== */

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


/* ==========================================================================
   REDUCED MOTION - respect the user's system preference.
   ========================================================================== */

@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;
  }
}


/* ==========================================================================
   2.2.2 PAUSE, STOP, HIDE - slider autoplay control

   The hero slider auto-advances every 3.5s. Autoplay is kept; this adds the
   pause/play control the criterion requires.

   Styled to sit inline with Divi's existing pagination dots: same size and
   rhythm, same white-on-image treatment, low opacity at rest so it reads as
   part of the dot row rather than a new UI element. It becomes fully opaque
   on hover and on keyboard focus.

   The clickable area is 24x24 (2.5.8) even though the glyph is dot-sized.
   ========================================================================== */

.et-pb-controllers .oa-slider-pause {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin: 0 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.et-pb-controllers .oa-slider-pause:hover,
.et-pb-controllers .oa-slider-pause:focus-visible {
  opacity: 1;
}

/* Pause glyph. Divi's dots are white at 50% opacity with an orange border -
   the border is what makes them visible, because the controller row sits on the
   white area BELOW the slider image, not on the photograph. A white glyph would
   be invisible there, so the bars take the same orange as the dot borders.
   #aa5118 on white is 5.39:1, comfortably past the 3:1 required for a control. */
.oa-slider-pause__icon,
.oa-slider-pause__icon::before,
.oa-slider-pause__icon::after {
  position: absolute;
  top: 50%;
  background-color: var(--oa-ui);
  content: "";
}

.oa-slider-pause__icon {
  left: 50%;
  width: 8px;
  height: 9px;
  transform: translate(-50%, -50%);
  background: none;
}

.oa-slider-pause__icon::before,
.oa-slider-pause__icon::after {
  top: 0;
  width: 3px;
  height: 9px;
  border-radius: 1px;
}

.oa-slider-pause__icon::before { left: 0; }
.oa-slider-pause__icon::after  { right: 0; }

/* Play glyph: a single triangle, shown once paused. */
.oa-slider-pause.is-paused .oa-slider-pause__icon::before {
  left: 1px;
  width: 0;
  height: 0;
  background: none;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--oa-ui);
  border-radius: 0;
}

.oa-slider-pause.is-paused .oa-slider-pause__icon::after {
  display: none;
}

/* Fallback position if a slider has no controller row. */
.oa-slider-pause--floating {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 4;
}

/* If a slider places its controls over the image instead of below it, a white
   halo keeps the orange glyph legible against a dark photograph. */
.oa-slider-pause--floating .oa-slider-pause__icon::before,
.oa-slider-pause--floating .oa-slider-pause__icon::after {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* Match the dots' resting opacity so the control reads as part of the row. */
.et-pb-controllers .oa-slider-pause { opacity: 0.5; }
.et-pb-controllers .oa-slider-pause:hover,
.et-pb-controllers .oa-slider-pause:focus-visible { opacity: 1; }


/* ==========================================================================
   HEADING-LEVEL STYLING CARRY-OVER

   Divi styles headings PER LEVEL. A module's font settings live on the H1 tab,
   the H2 tab, and so on separately. When a heading's level is changed for
   accessibility - h1 -> h2, say - Divi does NOT carry the styling across, so
   the generated rule `.et_pb_text_3 h1 {...}` stops matching and the heading
   falls back to the theme default.

   These rules re-apply the original treatment at the new level.

   THE DURABLE FIX is to set the same values on the module's H2 tab in the
   Builder (Design -> Heading Text -> H2). Once that is done for a module, its
   entry here can be deleted. This block is a stopgap so the site looks right in
   the meantime.

   Selectors are scoped by page ID because Divi's module indices
   (.et_pb_text_2, _3 ...) restart on every page - an unscoped rule would hit
   an unrelated module elsewhere on the site.
   ========================================================================== */

/* Home (page-id-7): "Four Seasons... Naturally!" and
   "Stories from the Oscoda Area..." — were h1, now h2 */
body.page-id-7 .et_pb_text_3 h2,
body.page-id-7 .et_pb_text_4 h2 {
  font-family: 'Dancing Script', handwriting;
  font-weight: 700;
  font-size: 45px;
}

/* Plan Your Visit (page-id-264): "Visit the Oscoda Area" — was h1, now h2 */
body.page-id-264 .et_pb_text_0 h2 {
  font-family: 'Dancing Script', handwriting;
}

/* Plan Your Visit: "Four Seasons... Naturally!" and
   "Stories from the Oscoda Area..." — were h1, now h2 */
body.page-id-264 .et_pb_text_2 h2,
body.page-id-264 .et_pb_text_5 h2 {
  font-family: 'Dancing Script', handwriting;
  font-weight: 700;
  font-size: 45px;
}

/* ==========================================================================
   SLIDER CONTROL COLOURS

   These sit on photographs, so they must stay white - the site-wide `a` rule
   would otherwise paint them the navy link colour, which is unreadable on a
   dark image and was making the video play buttons blue.
   ========================================================================== */

.et_pb_video_play,
.et_pb_video_overlay .et_pb_video_play,
.et-pb-arrow-prev,
.et-pb-arrow-next,
.et_pb_slider .et-pb-arrow-prev,
.et_pb_slider .et-pb-arrow-next {
  color: #ffffff !important;
}

/* Keep them legible on a light photograph. */
.et_pb_video_play,
.et-pb-arrow-prev,
.et-pb-arrow-next {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}


/* ==========================================================================
   2.5.8 / 1.4.11 - SLIDER PAGINATION DOTS

   Divi renders inactive dots as white at 50% opacity with no border, sitting
   directly on the slide photograph. Against a light image they disappear
   entirely - the reported "dots don't always show" - and as controls they need
   3:1 against their surroundings.

   A dark 1px ring gives them a visible edge on light photography while the
   white fill keeps them visible on dark photography. Same two-tone principle as
   the focus indicator: whichever half the photo defeats, the other survives.
   ========================================================================== */




/* ==========================================================================
   1.4.3 - OVERLAY FOR WHITE TEXT OVER PHOTOGRAPHS

   Applied by js/a11y.js, which tags only those sections that have a background
   image AND whose text is predominantly white. It cannot be a plain CSS rule:
   other image-backed sections on this site use dark text, and darkening those
   would make them worse.

   Opacity uses the same reasoning as the slider overlay - white text needs the
   backdrop no lighter than #767676 for 4.5:1, or #949494 for 3:1 at 24px+.
   0.45 covers large text against any photograph and normal text against all but
   a near-white image. Raise --oa-photo-overlay to 0.55 for a hard guarantee.
   ========================================================================== */

:root { --oa-photo-overlay: 0.45; }

.et_pb_section.oa-photo-overlay {
  position: relative;   /* Divi already sets this on sections; harmless repeat */
}

.et_pb_section.oa-photo-overlay::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, var(--oa-photo-overlay));
  pointer-events: none;
  z-index: 0;
}

/* Keep the section's own content above the overlay. */
.et_pb_section.oa-photo-overlay > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   2.5.8 TARGET SIZE - slider pagination dots

   Divi renders each dot as a 7x7 anchor, 17px apart. An earlier attempt bolted
   a 24x24 ::after onto each one, but at 17px spacing those enlarged areas
   OVERLAP each other - a click in the overlap is ambiguous - and automated
   checkers measure the element box, not the pseudo-element, so it looked
   unfixed either way.

   The anchor itself is now the 24x24 target, and the visible 7px dot is drawn
   with ::before. Same appearance, real target size, no overlap:
   24px wide plus 2px margins = 26px centre to centre.

   The dark ring keeps the dots visible on light photography - white at 50%
   opacity on a pale image was disappearing entirely.
   ========================================================================== */

.et-pb-controllers {
  line-height: 24px;
}

.et-pb-controllers a {
  position: relative;
  width: 24px !important;
  height: 24px !important;
  margin: 0 1px !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.et-pb-controllers a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.et-pb-controllers a.et-pb-active-control::before {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75);
}

/* ==========================================================================
   1.3.1 INFO AND RELATIONSHIPS - split-title "eyebrow" lines

   Seven section pages open with a title split across two modules:

       [et_pb_text admin_label="Subtitle"]<h2>LET YOURSELF</h2>[/et_pb_text]
       [et_pb_text admin_label="EXPLORE"] <h1>EXPLORE</h1>     [/et_pb_text]

   A visitor sees one title. A screen reader announces two sections, the first
   of them empty. The small line is styling, not structure, so it becomes a
   <span class="oa-eyebrow"> in the module content and stops being a heading.

   CARRYING THE STYLING OVER. Divi styles headings per level, so the moment the
   element stops being an h2 it loses everything Divi hung on that level:

       .et_pb_text_0     { font-family:Roboto; font-weight:700; font-size:18px;
                           letter-spacing:4px; text-transform:uppercase }
       .et_pb_text_0 h2  { font-family:Nunito; font-size:35px }
       h1,h2,h3,h4,h5,h6 { font-weight:500; line-height:1em; padding-bottom:10px;
                           color:#333 }

   Only family and size come from the module; weight, line-height, padding and
   colour come from Divi's global heading rule. A bare span would inherit the
   module's Roboto 700 18px instead - visibly smaller and heavier. Every one of
   those values is therefore restated below, measured from the rendered page
   before the change.

   The colour pair mirrors what Divi itself does: headings are #333 by default
   and white inside a dark-layout module. On the light pages that means the
   eyebrow stays grey rather than picking up the module's navy #002b48, which
   is what it looks like today. To let it match the title below instead, delete
   the color line and it will inherit the navy.
   ========================================================================== */

.oa-eyebrow {
  display: block;
  font-family: 'Nunito', Helvetica, Arial, Lucida, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 1em;
  margin: 0;
  padding: 0 0 10px;
  color: #333333;
}

.et_pb_bg_layout_dark .oa-eyebrow {
  color: #ffffff;
}

/* ==========================================================================
   2.5.8 TARGET SIZE - blog post titles and "read more" links

   In the Blog module the post title link and the "read more" link measure
   19.3px and 18px tall against the 24x24 the criterion asks for. On a phone it
   is worse than it looks on desktop: Divi hides the excerpt at that breakpoint
   (et_multi_view_hidden), so the two links end up 1.3px apart. That closes off
   the spacing exception as well - a 24px circle centred on one target overlaps
   the other - so the targets themselves have to grow.

   Vertical padding on an INLINE element enlarges the hit area without taking
   part in layout, so on its own it would not move anything on the page. The
   1.3px gap is the problem: padding both links would make their hit areas
   overlap, which is its own failure. The "read more" link therefore becomes
   inline-block and takes a real margin, buying the separation back.

   Net effect is about 11px of extra height per post at phone width, and the
   two links no longer touch. Type size, colour and line-height are untouched.

   NOTE ON LIGHTHOUSE. It will still flag these. Its tap-target audit uses
   Google's own mobile-usability threshold of 48x48 with 8px spacing, which is
   twice what WCAG 2.2 Level AA requires. Reaching 48px means visibly taller
   cards and much more padding - a design change, not a fix. We meet the
   standard we are working to; the Lighthouse item is documented instead.
   ========================================================================== */

/* Deliberately NOT inline-block. As inline-block the link adopts .entry-title's
   line-height, which Divi sets to 16px on a 16px font - so the box came out at
   16 + padding = 22px, still short. Left inline, the box is the font's own
   19.3px line box PLUS the padding, giving 25.3px, and because vertical padding
   on an inline element does not participate in layout, nothing on the page
   moves by even a pixel. */
.entry-title a,
.et_pb_post_title a {
  padding-top: 3px;
  padding-bottom: 3px;
}

a.more-link {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 10px;
}