/* =============================================================================
   Divi WCAG — Floating Widget Styles
   Version: 1.0.0
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Skip link
   ----------------------------------------------------------------------------- */
.dwcag-skip-link {
	position:        fixed;
	top:              -60px;
	left:             10px;
	z-index:          1000000;
	background:       #1a56db;
	color:            #ffffff;
	padding:          10px 18px;
	border-radius:    0 0 6px 6px;
	font-size:        14px;
	font-weight:      600;
	text-decoration:  none;
	transition:       top .15s ease;
}

.dwcag-skip-link:focus {
	top: 0;
	color: #ffffff;
}

/* -----------------------------------------------------------------------------
   Trigger button + panel container
   ----------------------------------------------------------------------------- */
.dwcag-widget,
.dwcag-widget * {
	box-sizing: border-box;
}

.dwcag-widget {
	position:    fixed;
	z-index:     var( --dwcag-z, 999999 );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size:   15px;
	line-height: 1.5;
}

.dwcag-pos-bottom-right { right:  var( --dwcag-offset-x, 20px ); bottom: var( --dwcag-offset-y, 20px ); }
.dwcag-pos-bottom-left  { left:   var( --dwcag-offset-x, 20px ); bottom: var( --dwcag-offset-y, 20px ); }
.dwcag-pos-top-right    { right:  var( --dwcag-offset-x, 20px ); top:    var( --dwcag-offset-y, 20px ); }
.dwcag-pos-top-left     { left:   var( --dwcag-offset-x, 20px ); top:    var( --dwcag-offset-y, 20px ); }

/* Centered vertically with a negative margin rather than a transform: a
   transformed ancestor would become the containing block for the panel's
   position:fixed mobile layout below. */
.dwcag-pos-center-right {
	right:      var( --dwcag-offset-x, 20px );
	top:        50%;
	margin-top: calc( var( --dwcag-size, 56px ) / -2 );
}

.dwcag-pos-center-left {
	left:       var( --dwcag-offset-x, 20px );
	top:        50%;
	margin-top: calc( var( --dwcag-size, 56px ) / -2 );
}

.dwcag-trigger {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              9px;
	width:            var( --dwcag-size, 56px );
	height:           var( --dwcag-size, 56px );
	padding:          0;
	border:           none;
	border-radius:    999px;
	background:       var( --dwcag-color, #1a56db );
	color:            var( --dwcag-icon-color, #ffffff );
	box-shadow:       0 6px 20px rgba( 0, 0, 0, .18 ), 0 2px 6px rgba( 0, 0, 0, .12 );
	cursor:           pointer;
	-webkit-appearance: none;
	appearance:       none;
	line-height:      0;
	transition:       transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Only widen the pill when a text label is actually shown. */
.dwcag-trigger.dwcag-has-label {
	width:   auto;
	padding: 0 20px 0 16px;
}

.dwcag-trigger:hover {
	filter:     brightness( 1.06 );
	transform:  scale( 1.06 );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, .24 ), 0 3px 8px rgba( 0, 0, 0, .14 );
}

.dwcag-trigger:active {
	transform: scale( .97 );
}

.dwcag-trigger:focus-visible {
	outline:        3px solid #ffffff;
	outline-offset: 3px;
	box-shadow:     0 0 0 5px var( --dwcag-color, #1a56db ), 0 6px 20px rgba( 0, 0, 0, .22 );
}

.dwcag-trigger .dwcag-icon {
	width:   60%;
	height:  60%;
	flex:    0 0 auto;
	display: block;
	overflow: visible;
}

.dwcag-trigger.dwcag-has-label .dwcag-icon {
	width:  calc( var( --dwcag-size, 56px ) * .56 );
	height: calc( var( --dwcag-size, 56px ) * .56 );
}

.dwcag-trigger-label {
	font-size:   14px;
	font-weight: 600;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Panel
   ----------------------------------------------------------------------------- */
.dwcag-panel {
	position:      absolute;
	width:         340px;
	max-width:     calc( 100vw - 24px );
	max-height:    min( 640px, calc( 100vh - 40px ) );
	overflow-y:    auto;
	background:    #ffffff;
	color:         #1f2937;
	border-radius: 14px;
	box-shadow:    0 12px 40px rgba( 0, 0, 0, .28 );
}

.dwcag-panel[hidden] { display: none; }

.dwcag-pos-bottom-right .dwcag-panel { right: 0; bottom: calc( var( --dwcag-size, 56px ) + 14px ); }
.dwcag-pos-bottom-left  .dwcag-panel { left:  0; bottom: calc( var( --dwcag-size, 56px ) + 14px ); }
.dwcag-pos-top-right    .dwcag-panel { right: 0; top:    calc( var( --dwcag-size, 56px ) + 14px ); }
.dwcag-pos-top-left     .dwcag-panel { left:  0; top:    calc( var( --dwcag-size, 56px ) + 14px ); }

/* Centered positions open the panel beside the button, vertically centered. */
.dwcag-pos-center-right .dwcag-panel {
	right:     calc( var( --dwcag-size, 56px ) + 14px );
	top:       50%;
	transform: translateY( -50% );
	max-width: calc( 100vw - var( --dwcag-size, 56px ) - var( --dwcag-offset-x, 20px ) - 28px );
}

.dwcag-pos-center-left .dwcag-panel {
	left:      calc( var( --dwcag-size, 56px ) + 14px );
	top:       50%;
	transform: translateY( -50% );
	max-width: calc( 100vw - var( --dwcag-size, 56px ) - var( --dwcag-offset-x, 20px ) - 28px );
}

.dwcag-panel-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	padding:         16px 18px;
	border-bottom:   1px solid #e5e7eb;
	position:        sticky;
	top:             0;
	background:      #ffffff;
	border-radius:   14px 14px 0 0;
}

.dwcag-panel-header h2 {
	margin:      0;
	font-size:   16px;
	font-weight: 700;
	color:       #111827;
}

.dwcag-close {
	background:    transparent;
	border:        1px solid #d1d5db;
	border-radius: 999px;
	width:         30px;
	height:        30px;
	font-size:     18px;
	line-height:   1;
	color:         #374151;
	cursor:        pointer;
}

.dwcag-close:hover { background: #f3f4f6; }

.dwcag-panel-body {
	padding: 6px 18px 12px;
}

.dwcag-section {
	padding: 12px 0;
	border-bottom: 1px solid #f0f1f3;
}

.dwcag-section:last-child { border-bottom: none; }

.dwcag-section h3 {
	margin:         0 0 10px;
	font-size:      12px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color:          #6b7280;
}

.dwcag-profiles-grid,
.dwcag-toggle-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   8px;
}

.dwcag-profile-btn,
.dwcag-toggle-btn {
	display:       block;
	width:         100%;
	padding:       9px 10px;
	font-size:     13px;
	font-weight:   600;
	text-align:    center;
	color:         #1f2937;
	background:    #f3f4f6;
	border:        1px solid #e5e7eb;
	border-radius: 8px;
	cursor:        pointer;
}

.dwcag-profile-btn:hover,
.dwcag-toggle-btn:hover { background: #e5e7eb; }

.dwcag-toggle-btn[aria-pressed="true"],
.dwcag-profile-btn.is-active {
	background:   var( --dwcag-color, #1a56db );
	border-color: transparent;
	color:        #ffffff;
}

.dwcag-control-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	margin-bottom:   10px;
}

.dwcag-control-label {
	font-size:   13px;
	font-weight: 600;
	color:       #374151;
}

.dwcag-btn-group {
	display:       inline-flex;
	border:        1px solid #e5e7eb;
	border-radius: 8px;
	overflow:      hidden;
}

.dwcag-btn-group button {
	min-width:   34px;
	padding:     6px 10px;
	background:  #f9fafb;
	border:      none;
	border-left: 1px solid #e5e7eb;
	font-size:   13px;
	font-weight: 700;
	color:       #1f2937;
	cursor:      pointer;
}

.dwcag-btn-group button:first-child { border-left: none; }
.dwcag-btn-group button:hover { background: #eef1f5; }

.dwcag-control-row.dwcag-tts-row {
	margin-top: 20px;
}

.dwcag-tts-row #dwcag-tts-play[aria-pressed="true"] {
	background: var( --dwcag-color, #1a56db );
	color:      #ffffff;
}

.dwcag-panel-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	padding:         12px 18px;
	border-top:      1px solid #e5e7eb;
	position:        sticky;
	bottom:          0;
	background:      #ffffff;
	border-radius:   0 0 14px 14px;
}

.dwcag-reset-btn {
	background:    transparent;
	border:        1px solid #d1d5db;
	border-radius: 8px;
	padding:       8px 12px;
	font-size:     13px;
	font-weight:   600;
	color:         #374151;
	cursor:        pointer;
}

.dwcag-reset-btn:hover { background: #f3f4f6; }

.dwcag-statement-link {
	font-size:       13px;
	font-weight:     600;
	color:           var( --dwcag-color, #1a56db );
	text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Reading guide bar
   ----------------------------------------------------------------------------- */
#dwcag-reading-guide {
	position:       fixed;
	left:           0;
	width:          100%;
	height:         40px;
	top:            0;
	background:     rgba( 255, 224, 51, .35 );
	border-top:     2px solid #1a56db;
	border-bottom:  2px solid #1a56db;
	pointer-events: none;
	z-index:        999998;
	display:        none;
}

html.dwcag-reading-guide-active #dwcag-reading-guide { display: block; }

/* =============================================================================
   Automatic Divi fixes (body classes added by class-frontend.php)
   ============================================================================= */

/* Visible keyboard focus indicator, for themes and child themes that remove
   the browser default. Scoped to :focus-visible so it only ever shows for
   keyboard users, never on mouse clicks. */
body.dwcag-fix-focus a:focus-visible,
body.dwcag-fix-focus button:focus-visible,
body.dwcag-fix-focus input:focus-visible,
body.dwcag-fix-focus select:focus-visible,
body.dwcag-fix-focus textarea:focus-visible,
body.dwcag-fix-focus summary:focus-visible,
body.dwcag-fix-focus [tabindex]:focus-visible {
	outline:        2px solid #1a56db !important;
	outline-offset: 2px !important;
}

/* Honour the visitor's system-level reduced-motion preference for Divi's
   entrance and scroll animations. */
@media ( prefers-reduced-motion: reduce ) {
	body.dwcag-fix-motion [class*="et_pb_"],
	body.dwcag-fix-motion [class*="et_pb_"]::before,
	body.dwcag-fix-motion [class*="et_pb_"]::after,
	body.dwcag-fix-motion .et-waypoint,
	body.dwcag-fix-motion .et_animated {
		animation-duration:        .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:       .01ms !important;
	}

	/* Divi keeps waypoint elements at opacity 0 until their entrance
	   animation runs, so they must be forced visible once that animation is
	   collapsed — otherwise the content would never appear. */
	body.dwcag-fix-motion .et-waypoint:not(.et_animated) {
		opacity: 1 !important;
	}

	body.dwcag-fix-motion {
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
   Site-wide state classes (applied to <html> by widget.js)
   ============================================================================= */

/* Text size steps.
   The html.dwcag-fs-1 … dwcag-fs-4 classes are state markers only (useful
   as hooks for custom CSS). The actual resizing is done in widget.js, which
   rescales each element from its own measured size — scaling the root font
   size alone has no effect on Divi, which sets font sizes in pixels. */

/* Line height steps (scoped to common text elements). */
html.dwcag-lh-1 body, html.dwcag-lh-1 p, html.dwcag-lh-1 li, html.dwcag-lh-1 a, html.dwcag-lh-1 span,
html.dwcag-lh-1 h1, html.dwcag-lh-1 h2, html.dwcag-lh-1 h3, html.dwcag-lh-1 h4, html.dwcag-lh-1 h5, html.dwcag-lh-1 h6,
html.dwcag-lh-1 blockquote, html.dwcag-lh-1 label { line-height: 1.7 !important; }

html.dwcag-lh-2 body, html.dwcag-lh-2 p, html.dwcag-lh-2 li, html.dwcag-lh-2 a, html.dwcag-lh-2 span,
html.dwcag-lh-2 h1, html.dwcag-lh-2 h2, html.dwcag-lh-2 h3, html.dwcag-lh-2 h4, html.dwcag-lh-2 h5, html.dwcag-lh-2 h6,
html.dwcag-lh-2 blockquote, html.dwcag-lh-2 label { line-height: 2 !important; }

html.dwcag-lh-3 body, html.dwcag-lh-3 p, html.dwcag-lh-3 li, html.dwcag-lh-3 a, html.dwcag-lh-3 span,
html.dwcag-lh-3 h1, html.dwcag-lh-3 h2, html.dwcag-lh-3 h3, html.dwcag-lh-3 h4, html.dwcag-lh-3 h5, html.dwcag-lh-3 h6,
html.dwcag-lh-3 blockquote, html.dwcag-lh-3 label { line-height: 2.3 !important; }

/* Letter spacing steps. */
html.dwcag-ls-1 body, html.dwcag-ls-1 p, html.dwcag-ls-1 li, html.dwcag-ls-1 a, html.dwcag-ls-1 span,
html.dwcag-ls-1 h1, html.dwcag-ls-1 h2, html.dwcag-ls-1 h3, html.dwcag-ls-1 h4, html.dwcag-ls-1 h5, html.dwcag-ls-1 h6 { letter-spacing: .05em !important; }

html.dwcag-ls-2 body, html.dwcag-ls-2 p, html.dwcag-ls-2 li, html.dwcag-ls-2 a, html.dwcag-ls-2 span,
html.dwcag-ls-2 h1, html.dwcag-ls-2 h2, html.dwcag-ls-2 h3, html.dwcag-ls-2 h4, html.dwcag-ls-2 h5, html.dwcag-ls-2 h6 { letter-spacing: .1em !important; }

html.dwcag-ls-3 body, html.dwcag-ls-3 p, html.dwcag-ls-3 li, html.dwcag-ls-3 a, html.dwcag-ls-3 span,
html.dwcag-ls-3 h1, html.dwcag-ls-3 h2, html.dwcag-ls-3 h3, html.dwcag-ls-3 h4, html.dwcag-ls-3 h5, html.dwcag-ls-3 h6 { letter-spacing: .16em !important; }

/* Readable font. */
html.dwcag-readable-font body, html.dwcag-readable-font p, html.dwcag-readable-font li, html.dwcag-readable-font span,
html.dwcag-readable-font a, html.dwcag-readable-font h1, html.dwcag-readable-font h2, html.dwcag-readable-font h3,
html.dwcag-readable-font h4, html.dwcag-readable-font h5, html.dwcag-readable-font h6, html.dwcag-readable-font blockquote,
html.dwcag-readable-font label, html.dwcag-readable-font input, html.dwcag-readable-font textarea, html.dwcag-readable-font button {
	font-family: Arial, Helvetica, "Segoe UI", Verdana, sans-serif !important;
}

/* Align text left. */
html.dwcag-align-left p, html.dwcag-align-left li, html.dwcag-align-left h1, html.dwcag-align-left h2,
html.dwcag-align-left h3, html.dwcag-align-left h4, html.dwcag-align-left h5, html.dwcag-align-left h6,
html.dwcag-align-left blockquote { text-align: left !important; }

/* Highlight links. */
html.dwcag-highlight-links a {
	text-decoration:           underline !important;
	text-decoration-thickness: 2px !important;
	background-color:          rgba( 255, 224, 51, .55 ) !important;
	color:                     #111111 !important;
}

/* Highlight headings. */
html.dwcag-highlight-headings h1, html.dwcag-highlight-headings h2, html.dwcag-highlight-headings h3,
html.dwcag-highlight-headings h4, html.dwcag-highlight-headings h5, html.dwcag-highlight-headings h6 {
	outline:        2px dashed #1a56db !important;
	outline-offset: 4px !important;
	background:     rgba( 26, 86, 219, .07 ) !important;
}

/* Contrast modes (mutually exclusive, enforced in JS). */
html.dwcag-contrast-dark body,
html.dwcag-contrast-dark body * {
	background-color: #111111 !important;
	color:             #f1f1f1 !important;
	border-color:      #444444 !important;
}
html.dwcag-contrast-dark a { color: #8ab4ff !important; }
html.dwcag-contrast-dark .dwcag-widget,
html.dwcag-contrast-dark .dwcag-widget * { background-color: initial !important; color: initial !important; border-color: initial !important; }
html.dwcag-contrast-dark .dwcag-widget .dwcag-panel { background: #ffffff !important; }
html.dwcag-contrast-dark .dwcag-trigger { background: var( --dwcag-color, #1a56db ) !important; color: var( --dwcag-icon-color, #ffffff ) !important; }

html.dwcag-contrast-light body,
html.dwcag-contrast-light body * {
	background-color: #ffffff !important;
	color:             #000000 !important;
	border-color:      #dddddd !important;
}
html.dwcag-contrast-light a { color: #0645ad !important; }

html.dwcag-contrast-high body,
html.dwcag-contrast-high body * {
	background-color: #000000 !important;
	color:             #ffff00 !important;
	border-color:      #ffff00 !important;
}
html.dwcag-contrast-high a { color: #00ffff !important; text-decoration: underline !important; }
html.dwcag-contrast-high img, html.dwcag-contrast-high video { filter: grayscale( 100% ) contrast( 120% ); }
html.dwcag-contrast-high .dwcag-widget .dwcag-panel,
html.dwcag-contrast-high .dwcag-widget .dwcag-panel * { background-color: revert !important; color: revert !important; border-color: revert !important; }
html.dwcag-contrast-high .dwcag-widget .dwcag-panel { background: #ffffff !important; color: #1f2937 !important; }
html.dwcag-contrast-high .dwcag-trigger { background: var( --dwcag-color, #1a56db ) !important; color: var( --dwcag-icon-color, #ffffff ) !important; }

/* Invert colors (images/video/widget re-inverted so they stay natural). */
html.dwcag-invert { filter: invert( 1 ) hue-rotate( 180deg ) !important; }
html.dwcag-invert img, html.dwcag-invert video, html.dwcag-invert picture, html.dwcag-invert iframe {
	filter: invert( 1 ) hue-rotate( 180deg ) !important;
}

/* Grayscale (widget stays in color for usability). */
html.dwcag-grayscale { filter: grayscale( 100% ) !important; }
html.dwcag-grayscale .dwcag-widget { filter: grayscale( 0% ) !important; }

/* Big cursor. */
html.dwcag-big-cursor,
html.dwcag-big-cursor * {
	cursor: url( "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3 L6 33 L14 26 L19 36 L24 34 L19 24 L29 24 Z' fill='%23111111' stroke='%23ffffff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E" ) 4 4, auto !important;
}

/* Stop animations & transitions. */
html.dwcag-stop-animations *,
html.dwcag-stop-animations *::before,
html.dwcag-stop-animations *::after {
	animation-play-state: paused !important;
	animation-duration:   0s !important;
	transition:           none !important;
	scroll-behavior:      auto !important;
}

/* Hide images (widget icons stay visible). */
html.dwcag-hide-images img,
html.dwcag-hide-images picture,
html.dwcag-hide-images video { visibility: hidden !important; }

html.dwcag-hide-images #dwcag-widget img,
html.dwcag-hide-images #dwcag-widget svg,
html.dwcag-hide-images #dwcag-widget picture,
html.dwcag-hide-images #dwcag-widget video { visibility: visible !important; }

/* Strong keyboard focus highlight. */
html.dwcag-focus-highlight *:focus,
html.dwcag-focus-highlight *:focus-visible {
	outline:        3px solid #ff5722 !important;
	outline-offset: 3px !important;
	box-shadow:     0 0 0 5px rgba( 255, 87, 34, .35 ) !important;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
	/* A side-anchored panel has no room next to the button on a phone, so
	   it becomes a bottom sheet pinned to the viewport instead. */
	.dwcag-pos-center-right .dwcag-panel,
	.dwcag-pos-center-left .dwcag-panel {
		position:   fixed;
		left:       12px;
		right:      12px;
		top:        auto;
		bottom:     12px;
		width:      auto;
		max-width:  none;
		max-height: calc( 100vh - 24px );
		transform:  none;
	}
}

@media ( max-width: 480px ) {
	.dwcag-panel { width: calc( 100vw - 24px ); }
}