/* ==========================================================================
   True Productions - Accessibility remediation for The Tides Laguna Beach
   Target: WCAG 2.1 Level AA
   Loaded by tp-accessibility.php after the parent and child theme stylesheets.

   Contrast values below were computed against the WCAG relative-luminance
   formula and verified, not eyeballed. Each is annotated with its measured
   ratio against white text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   S-03  Contrast (WCAG 1.4.3 - 4.5:1 for normal text)

   Brand green  #00bb27 on white text = 2.58:1  FAIL
   Replacement  #00871c on white text = 4.69:1  PASS
   Accent blue  #53a4f4 on white text = 2.63:1  FAIL
   Replacement  #1f6fb2 on white text = 5.28:1  PASS

   If the brand green must not change, delete the .button0/.bookbutton green
   rules below and use the commented alternative at the end of this block:
   near-black (#0a0a0a) on the ORIGINAL green measures 7.67:1.
   -------------------------------------------------------------------------- */

:root {
  --tp-green: #00871c;       /* was #00bb27 */
  --tp-green-hover: #006f17;
  --tp-blue: #1f6fb2;        /* was #53a4f4 */
  --tp-blue-hover: #18598f;
  --tp-disabled-bg: #6e6e6e; /* was #c2c2c2 - white text now 5.10:1 */
  --tp-focus: #b35c00;       /* focus ring, visible on light and dark grounds */
}

a.button0,
.button0,
a.button2,
.button2,
input.bookbutton,
.bookbutton,
input[type="button"].bookbutton {
  background-color: var(--tp-green) !important;
  color: #ffffff !important;
  border-color: var(--tp-green) !important;
}

a.button0:hover,
.button0:hover,
a.button2:hover,
.button2:hover,
input.bookbutton:hover,
.bookbutton:hover {
  background-color: var(--tp-green-hover) !important;
}

/* Blue submit controls and booking step indicators */
input.wpcf7-submit,
.wpcf7-submit,
#submit,
input#submit,
.bookbutton_iframe,
.step-icon-current,
.step-icon.current {
  background-color: var(--tp-blue) !important;
  color: #ffffff !important;
  border-color: var(--tp-blue) !important;
}

input.wpcf7-submit:hover,
.wpcf7-submit:hover,
#submit:hover {
  background-color: var(--tp-blue-hover) !important;
}

/* Blue link text on white grounds */
.content-wrapper a:not(.button0):not(.bookbutton):not(.flex-prev):not(.flex-next),
#page-header a,
.logged-in-as a,
a[title*="Airport"] {
  color: var(--tp-blue);
}

.content-wrapper a:not(.button0):not(.bookbutton):hover {
  color: var(--tp-blue-hover);
}

/* Disabled datepicker dates: raise contrast and stop relying on colour alone.
   jQuery UI wraps the day number in <s> (or <span>) with its own colour, so the
   text colour must be set on those children, not only on the cell. */
.ui-datepicker .ui-datepicker-unselectable,
.ui-datepicker .ui-state-disabled {
  background-color: var(--tp-disabled-bg) !important;
  color: #ffffff !important;
  opacity: 1 !important;           /* opacity dilutes the computed ratio */
}
.ui-datepicker .ui-datepicker-unselectable s,
.ui-datepicker .ui-datepicker-unselectable span,
.ui-datepicker .ui-state-disabled s,
.ui-datepicker .ui-state-disabled span,
.ui-datepicker .ui-state-disabled .ui-state-default {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: line-through;   /* non-colour indicator of unavailability */
  opacity: 1 !important;
}

/* ALTERNATIVE if the brand green must be preserved exactly - swap these in
   and remove the green rules above. #0a0a0a on #00bb27 measures 7.67:1.

   a.button0, .button0, input.bookbutton, .bookbutton {
     background-color: #00bb27 !important;
     color: #0a0a0a !important;
   }
*/

/* --------------------------------------------------------------------------
   S-07  Focus visibility (WCAG 2.4.7)

   Four rule sets in the theme and plugin stylesheets set outline:none on
   :focus without providing a replacement, including inside the prettyPhoto
   lightbox where losing the indicator is most damaging. These override them.

   :focus-visible keeps the ring off mouse clicks while guaranteeing it for
   keyboard users. The plain :focus block is the fallback for older engines.
   -------------------------------------------------------------------------- */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
div.pp_pic_holder a:focus,
.flex-container a:focus,
.flexslider a:focus,
.wu-wrapper .wu-search input:focus {
  outline: 3px solid var(--tp-focus) !important;
  outline-offset: 2px !important;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
div.pp_pic_holder a:focus-visible {
  outline: 3px solid var(--tp-focus) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   S-10  Skip link (WCAG 2.4.1)
   Off-screen until focused, then pinned top-left. Never display:none, which
   would remove it from the tab order entirely.
   -------------------------------------------------------------------------- */

.tp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #111111;
  color: #ffffff !important;
  font: 700 16px/1.2 Arial, Helvetica, sans-serif;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.tp-skip-link:focus,
.tp-skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--tp-focus) !important;
  outline-offset: -3px !important;
}

/* The main landmark receives focus from the skip link but must not show a ring */
#tp-main:focus {
  outline: none !important;
}

/* --------------------------------------------------------------------------
   S-09  Logo is no longer an h1; keep it looking identical
   -------------------------------------------------------------------------- */

#logo .tp-logo-wrap {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   S-04  Gallery items became <figure> instead of <dl>
   The theme styles key off dl.gallery-item, so carry the layout across.
   VISUAL CHECK REQUIRED on staging: if the grid shifts, the parent theme is
   using a selector not covered here.
   -------------------------------------------------------------------------- */

figure.gallery-item {
  display: inline-block;
  margin: 0 0 1em;
  text-align: center;
  vertical-align: top;
}

figure.gallery-item img {
  max-width: 100%;
  height: auto;
}

figure.gallery-item figcaption {
  margin: 0;
  font-size: 0.85em;
}

.gallery-columns-2 figure.gallery-item { width: 50%; }
.gallery-columns-3 figure.gallery-item { width: 33.33%; }
.gallery-columns-4 figure.gallery-item { width: 25%; }
.gallery-columns-5 figure.gallery-item { width: 20%; }

/* --------------------------------------------------------------------------
   Utility: visually hidden text that remains available to screen readers.
   Used by the rebuilt contact form for required-field wording.
   -------------------------------------------------------------------------- */

.screen-reader-text,
.tp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus,
.tp-visually-hidden:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   C-03  Contact form labelling
   -------------------------------------------------------------------------- */

.wpcf7-form label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.wpcf7-form .tp-required {
  color: #a3241c;   /* 7.43:1 on white */
  font-weight: 700;
}

.wpcf7-form .wpcf7-not-valid-tip {
  color: #a3241c;
  font-weight: 600;
}

/* Errors must not be signalled by colour alone (WCAG 1.4.1) */
.wpcf7-form .wpcf7-not-valid {
  border: 2px solid #a3241c !important;
}

.wpcf7-form .wpcf7-not-valid-tip::before {
  content: "\26A0\FE0E";   /* warning sign, text presentation */
  margin-right: 6px;
}