/*
Theme Name: Canyon Creek Ridge HOA - Plain Sight
Theme URI: https://canyoncreekridge-hoa.net
Description: Accessibility-first child theme for Canyon Creek Ridge Condominiums HOA. Built for residents who are older, have low vision, or are not confident with computers: WCAG AAA contrast throughout, 21px base text that still honours the reader's own browser setting, a single-column linear layout, 60px targets, no motion, and Atkinson Hyperlegible - a typeface designed by the Braille Institute for low-vision readers. Nothing on the site conveys meaning by colour alone, so every page stays readable in greyscale and in print.
Author: Canyon Creek Ridge HOA
Template: twentytwentyfour
Version: 2.0.0
Text Domain: ccr-hoa
Tags: hoa, community, condominium, association, accessibility, high-contrast, large-text
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   PLAIN SIGHT - the accessibility-first design system for this portal.

   WHY THIS LOOKS THE WAY IT DOES
   Many residents of Canyon Creek Ridge are older, some have low vision, and
   many are not confident with computers. This stylesheet optimises for the
   hardest-to-serve resident and treats everything else as secondary. It is
   not a minimal aesthetic; it is a legibility requirement.

   THE RULES, none of which may be relaxed without a deliberate decision:
     - WCAG AAA contrast for body text (7:1), not merely AA. Only three text
       pairings exist site-wide: 17.71:1 ink on white, 13.75:1 green on white
       (and white on green), 7.87:1 white on alert red. Adding a fourth colour
       means re-measuring, not guessing.
     - Body text 21px, and NEVER below 18.9px anywhere on the site.
     - Interactive targets at least 60x60px.
     - Focus is a 4px ochre ring at 2px offset. It is never removed.
     - Nothing conveys meaning by colour alone: every status carries a word and
       a shape as well. Each page must survive being printed in black and white.
     - No motion. No transitions that move content, no scroll reveals.
     - One column, linear reading order, ~62ch measure, left aligned.
     - No horizontal scrolling at any width down to 320px, or at 200% zoom.

   ROOT SIZING
   html is set as a PERCENTAGE, never a pixel value, so a resident who has
   raised their browser's default font size still gets the benefit. 131.25% of
   a 16px default gives the 21px body this system is built around, and the
   whole rem scale follows from it.
   ========================================================================== */

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

/* ==========================================================================
   PLAIN SIGHT - Canyon Creek Ridge HOA Portal, Design Direction 4
   Accessibility-first. Every colour pairing below is computed, not estimated.

   PALETTE + MEASURED CONTRAST (WCAG 2.1 relative-luminance formula)
     page white   #ffffff
     body ink     #141a11  on white .............. 17.71 : 1   (AAA)
     anchor green #1b3310  on white .............. 13.75 : 1   (AAA)
     white on anchor green ....................... 13.75 : 1   (AAA)
     alert red    #a01b1b  on white ...............  7.87 : 1   (AAA)
     white on alert red ...........................  7.87 : 1   (AAA)
     focus ochre  #b07d00  vs white ...............  3.63 : 1   (>=3, UI)
     focus ochre  #b07d00  vs anchor green ........  3.78 : 1   (>=3, UI)
   Forbidden pairings, never used in this stylesheet:
     ink on green 1.29, ink on red 2.25, green on red 1.75, ochre on red 2.17.
   Nothing is set below 0.9rem (18.9px). There is no small print here.
   ========================================================================== */

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

/* 131.25% of the browser's own 16px default = 21px, and it still scales with
   a reader's own font-size preference. Never a hard pixel lock. */
body{
  margin:0;
  background:#ffffff;
  color:#141a11;
  font-family:"Atkinson Hyperlegible",Verdana,Tahoma,"DejaVu Sans",sans-serif;
  font-size:1rem;           /* 21px */
  line-height:1.7;
  text-align:left;          /* never justified */
  overflow-wrap:break-word;
}

/* No motion anywhere. Nothing moves, grows, drifts or fades in this design. */
*{ transition:none; animation:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- Type scale: clear steps, no skipped levels ---------- */
h1,h2,h3{ margin:0 0 1rem; line-height:1.25; font-weight:700; color:#141a11; }
h1{ font-size:2.05rem; }   /* 43px */
h2{ font-size:1.5rem;  }   /* 31.5px */
h3{ font-size:1.2rem;  }   /* 25px */
p{ margin:0 0 1.15rem; max-width:62ch; }
ul,ol{ margin:0 0 1.15rem; padding-left:1.7rem; max-width:62ch; }
li{ margin-bottom:.7rem; }
strong{ font-weight:700; }

.lede{ font-size:1.2rem; }
.note{ font-size:.95rem; }        /* 20px */
.help{ font-size:.9rem; }         /* 18.9px - the smallest text in the design */

/* ---------- Links ---------- */
a{
  color:#1b3310;
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:5px;
}
a:hover{ background:#1b3310; color:#ffffff; text-decoration-color:#ffffff; }

/* ---------- Focus: 4px ochre ring, 2px offset, never removed ---------- */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus,
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:4px solid #b07d00;
  outline-offset:2px;
}
/* The ring appearing is a shape change, not a colour swap. The background
   shift below is an addition to it, never a substitute for it. */
a:focus{ background:#1b3310; color:#ffffff; text-decoration-color:#ffffff; }

/* ---------- Shell: one column, relative widths, survives 200% zoom ---------- */
.shell{ max-width:44rem; margin:0 auto; padding:0 1.2rem; }

/* ---------- Skip link: first focusable element on every page ---------- */
.skip{ position:absolute; left:-9999px; top:0; }
.skip:focus{
  position:static; display:flex; align-items:center; min-height:60px;
  background:#1b3310; color:#ffffff; padding:1rem 1.2rem;
  font-size:1.1rem; font-weight:700; text-decoration:underline;
}

/* ---------- Masthead ---------- */
.masthead{ background:#1b3310; color:#ffffff; padding:1.5rem 0 1.4rem; }
.brand{
  display:inline-flex; flex-direction:column; justify-content:center;
  color:#ffffff; text-decoration:none;
  padding:.5rem .3rem; min-height:60px;
}
.brand:hover,.brand:focus{ background:#1b3310; color:#ffffff; text-decoration:underline; }
.brand__name{ display:block; font-size:1.5rem; font-weight:700; line-height:1.25; }
.brand__sub{ display:block; font-size:.9rem; line-height:1.5; }

/* ---------- Navigation: 60px+ targets, current item marked two ways ---------- */
.nav{ background:#ffffff; border-top:8px solid #141a11; border-bottom:8px solid #1b3310; }
.nav ul{ list-style:none; margin:0; padding:0; max-width:none; display:flex; flex-wrap:wrap; }
.nav li{ margin:0; }
.nav a{
  display:flex; align-items:center; min-height:60px;
  padding:.85rem 1.15rem;
  background:#ffffff; color:#1b3310;
  font-weight:700; text-decoration:none;
  border-right:3px solid #1b3310;
  border-bottom:8px solid #ffffff;   /* reserved space, so nothing shifts */
}
.nav li:last-child a{ border-right:0; }
.nav a:hover{ background:#1b3310; color:#ffffff; }
.nav a[aria-current="page"]{
  background:#1b3310; color:#ffffff;
  border-bottom-color:#141a11;       /* second, non-colour marker: a solid bar */
}

/* ---------- Hero: a plain green band. No imagery, no motion. ---------- */
.hero{ background:#1b3310; color:#ffffff; padding:3rem 0 3.2rem; }
.hero h1{ color:#ffffff; font-size:2.6rem; margin-bottom:1.1rem; }
.hero p{ color:#ffffff; max-width:46ch; }
.hero p:last-child{ margin-bottom:0; }

/* ---------- Sections and structural rules ---------- */
main{ display:block; }
.section{ padding:2.6rem 0 .6rem; }
.section:last-of-type{ padding-bottom:2.6rem; }
.rule{ border:0; border-top:8px solid #1b3310; margin:2.6rem 0 0; }

h2.bar{
  background:#1b3310; color:#ffffff;
  padding:.85rem 1.1rem; margin:0 0 1.7rem;
  font-size:1.3rem; line-height:1.35;
}

/* ---------- Buttons: minimum 64px tall, never smaller than 60x60 ---------- */
.actions{ display:flex; flex-direction:column; gap:1.2rem; max-width:34rem; margin:0 0 1.4rem; }
.btn{
  display:flex; flex-direction:column; justify-content:center; min-height:64px;
  padding:1rem 1.3rem;
  font-family:inherit; font-size:1.2rem; font-weight:700; line-height:1.35;
  text-align:left; text-decoration:none; cursor:pointer;
  border:4px solid #1b3310; border-radius:0;
}
.btn--primary{ background:#1b3310; color:#ffffff; }
.btn--primary:hover{ background:#141a11; color:#ffffff; border-color:#141a11; }
.btn--secondary{ background:#ffffff; color:#1b3310; }
.btn--secondary:hover{ background:#1b3310; color:#ffffff; }
.btn:focus{ outline:4px solid #b07d00; outline-offset:2px; }
.btn--primary:focus{ background:#141a11; color:#ffffff; border-color:#141a11; }
.btn--secondary:focus{ background:#1b3310; color:#ffffff; }
.btn__sub{ display:block; font-size:.9rem; font-weight:400; margin-top:.25rem; }

/* ---------- Notice box (emergency alert slot) ---------- */
.notice{ border:4px solid #1b3310; border-left-width:16px; padding:1.3rem 1.4rem; margin:0 0 1.6rem; }
.notice p:last-child{ margin-bottom:0; }
.notice__label{ font-size:1.15rem; font-weight:700; margin-bottom:.6rem; }
.notice--urgent{ border-color:#a01b1b; }
.notice--urgent .notice__label{ color:#a01b1b; }

/* ---------- Dashboard tiles: a stack, never a grid ---------- */
.tiles{ list-style:none; margin:0; padding:0; max-width:none; }
.tiles li{ margin:0 0 1.2rem; }
.tile{
  display:flex; gap:1.1rem; align-items:flex-start;
  min-height:60px; padding:1.2rem 1.3rem;
  background:#ffffff; color:#141a11; text-decoration:none;
  border:3px solid #141a11; border-left:16px solid #1b3310;
}
.tile:hover{ background:#1b3310; color:#ffffff; border-color:#141a11; border-left-color:#141a11; }
.tile:focus{ background:#1b3310; color:#ffffff; border-color:#141a11; border-left-color:#141a11; }
.tile__num{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem;
  background:#1b3310; color:#ffffff; font-size:1.1rem; font-weight:700;
}
.tile:hover .tile__num,.tile:focus .tile__num{ background:#ffffff; color:#1b3310; }
.tile__body{ min-width:0; }
.tile__title{
  display:block; font-size:1.3rem; font-weight:700; line-height:1.3;
  color:#1b3310; margin-bottom:.4rem;
  text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px;
}
.tile:hover .tile__title,.tile:focus .tile__title{ color:#ffffff; }
.tile__desc{ display:block; font-size:1rem; line-height:1.6; }
.tile__away{ display:block; font-size:.9rem; margin-top:.5rem; font-weight:700; }

/* ---------- Tables ---------- */
.tablewrap{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; margin:0 0 1.6rem; }
caption{ text-align:left; font-size:1rem; font-weight:700; padding:0 0 .9rem; color:#141a11; }
th,td{
  border:3px solid #141a11; padding:.9rem 1rem;
  text-align:left; vertical-align:top; font-size:1rem;
}
thead th{ background:#1b3310; color:#ffffff; font-size:1.05rem; }
tbody th{ background:#ffffff; color:#141a11; font-weight:700; }
.num{ text-align:right; white-space:nowrap; }
tr.total th,tr.total td{
  border-top:8px solid #1b3310; font-size:1.15rem; font-weight:700;
}
.reflink{ display:inline-flex; align-items:center; min-height:60px; padding:.2rem 0;
  white-space:nowrap; }   /* a reference read out over the telephone must never break in half */

/* ---------- Status: word + shape + border weight. Never colour alone. ---------- */
.status{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.4rem .75rem; font-weight:700; line-height:1.3;
  background:#ffffff; color:#1b3310; border:3px solid #1b3310;
}
.status__mark{ flex:0 0 auto; width:1rem; height:1rem; border:3px solid currentColor; }
.status--open .status__mark{ background:currentColor; }   /* solid square = still open */
.status--done .status__mark{ background:#ffffff; }        /* hollow square = finished */
.status--denied{ color:#a01b1b; border-color:#a01b1b; border-width:6px; }
.stage{ display:block; font-size:.9rem; margin-top:.5rem; }

/* ---------- Forms ---------- */
form{ margin:0; }
.field{ max-width:34rem; margin:0 0 2.4rem; }
.field > label{ display:block; font-size:1.15rem; font-weight:700; line-height:1.35; margin:0 0 .45rem; }
.req,.opt{
  display:inline-block; font-size:.9rem; font-weight:700;
  padding:.1rem .6rem; margin-left:.4rem;
}
.req{ background:#1b3310; color:#ffffff; }
.opt{ background:#ffffff; color:#141a11; border:3px solid #141a11; }
.field .help{ display:block; margin:0 0 .8rem; max-width:62ch; }
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="password"],input[type="search"],input[type="date"],input[type="time"],select,textarea,input[type="file"]{
  display:block; width:100%; min-height:60px;
  font-family:inherit; font-size:1rem; line-height:1.5;
  padding:.85rem 1rem;
  color:#141a11; background:#ffffff;
  border:3px solid #1b3310; border-radius:0;   /* 13.75:1 against the page */
}
textarea{ min-height:11rem; line-height:1.6; resize:vertical; }
input[type="file"]{ min-height:84px; padding:1rem; }
input[type="file"]::file-selector-button{
  font-family:inherit; font-size:1rem; font-weight:700;
  min-height:60px; padding:.7rem 1.1rem; margin-right:1.1rem;
  background:#1b3310; color:#ffffff; border:3px solid #1b3310; border-radius:0; cursor:pointer;
}
input[type="file"]::file-selector-button:hover{ background:#141a11; border-color:#141a11; }

/* ---------- Footer ---------- */
.footer{ background:#1b3310; color:#ffffff; border-top:8px solid #141a11; margin-top:3rem; padding:2.4rem 0 2rem; }
.footer h2{ color:#ffffff; font-size:1.2rem; }
.footer p{ color:#ffffff; font-size:.95rem; }
.footer ul{ list-style:none; margin:0; padding:0; max-width:none; display:flex; flex-wrap:wrap; }
.footer li{ margin:0 1.4rem 0 0; }
.footer a{ color:#ffffff; text-decoration-color:#ffffff; }
/* Footer navigation links are targets, so they get the full 60x60 minimum.
   Links sitting inside a sentence keep the inline flow instead - WCAG 2.5.8
   exempts inline links, and boxing them out would wreck the paragraph. */
.footer ul a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:60px; min-height:60px; padding:0 .7rem;
}
.footer a:hover,.footer a:focus{ background:#ffffff; color:#1b3310; text-decoration-color:#1b3310; }

/* ---------- Utility ---------- */
.vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   NARROW / ZOOMED VIEW
   Below 47rem (987px) the requests table becomes a stack of labelled blocks,
   so nothing ever scrolls sideways. 200% zoom in a 1280px window reports a
   640px viewport, which lands here. ARIA roles on the markup keep the real
   table semantics intact even though the CSS display changes.
   ========================================================================== */
@media (max-width:47rem){
  h1{ font-size:1.8rem; }
  .hero h1{ font-size:2.1rem; }
  .nav ul{ display:block; }
  .nav li{ width:100%; border-bottom:3px solid #1b3310; }
  .nav li:last-child{ border-bottom:0; }
  .nav a{ border-right:0; border-bottom:8px solid #ffffff; }
  .nav a[aria-current="page"]{ border-bottom-color:#141a11; }

  /* Drop the table formatting context entirely so the blocks size to the
     container. The role attributes in the markup keep the table semantics. */
  .stack-table,.stack-table tbody,.stack-table caption{ display:block; }
  .stack-table thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); border:0;
  }
  .stack-table tbody tr{
    display:block; margin:0 0 1.4rem;
    border:3px solid #141a11; border-left:16px solid #1b3310;
  }
  .stack-table tbody th,.stack-table tbody td{
    display:block; width:auto; border:0; border-bottom:3px solid #141a11;
    padding:.9rem 1rem; text-align:left;
  }
  .stack-table tbody tr > *:last-child{ border-bottom:0; }
  .stack-table tbody th::before,.stack-table tbody td::before{
    content:attr(data-label); display:block;
    font-size:.9rem; font-weight:700; margin-bottom:.3rem;
  }
  .stack-table .num{ white-space:normal; }
}

/* ==========================================================================
   PRINT - some residents will print this. It must read in black and white.
   ========================================================================== */
@media print{
  html{ font-size:118%; }
  body{ background:#ffffff; color:#000000; }
  .nav,.skip{ display:none !important; }
  .masthead,.hero,.footer,h2.bar,thead th,.tile__num,.req{
    background:#ffffff !important; color:#000000 !important;
    border:3px solid #000000 !important;
  }
  .hero h1,.footer h2,.footer p,.brand__name,.brand__sub{ color:#000000 !important; }
  a,.tile__title,.status{ color:#000000 !important; }
  .status,.tile,.notice{ border-color:#000000 !important; }
  .status--denied{ border-width:6px !important; }
}


/* ==========================================================================
   WORDPRESS / TWENTY TWENTY-FOUR BRIDGE
   The parent theme renders page content as blocks. These rules make block
   output obey the system above rather than fighting it.
   ========================================================================== */

/* Block containers behave as the design's .shell */
.wp-site-blocks > * { margin-block-start:0; }
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width:44rem; margin-left:auto; margin-right:auto;
}
.wp-block-group.has-background{ padding:var(--wp--preset--spacing--30); }

/* Block buttons inherit the system's target size, not the parent theme's */
.wp-block-button__link{
  min-height:60px; display:inline-flex; align-items:center;
  font-size:1.2rem; font-weight:700; border-radius:0; line-height:1.35;
}

/* Block tables get the system's borders and the narrow-view stack */
.wp-block-table table{ width:100%; border-collapse:collapse; }
.wp-block-table th, .wp-block-table td{
  border:3px solid #141a11; padding:.8rem 1rem; font-size:1rem; text-align:left;
}
.wp-block-table th{ background:#1b3310; color:#ffffff; }

/* Editor and admin-bar safety: never let a plugin reintroduce motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   LEGACY SHORTCODE CLASSES
   Page content stored in the database emits these class names via shortcodes
   that predate this theme. They are styled here so existing pages remain
   correct and legible until (and after) their markup is rewritten.
   ========================================================================== */

.ccr-account-balance{ margin:0 0 1.7rem; }
.ccr-balance-card{
  border:4px solid #1b3310; border-left-width:16px;
  padding:1.3rem 1.4rem; margin:0 0 1.1rem;
}
.ccr-balance-card h3{ margin:0 0 .4rem; font-size:1.2rem; }
.ccr-balance-total{ font-size:1.5rem; font-weight:700; }
.ccr-balance-total--owed{ color:#a01b1b; }
.ccr-balance-total--clear{ color:#1b3310; }

/* Alerts: border weight and a word carry the meaning, colour only reinforces */
.ccr-alert{ border:4px solid #1b3310; border-left-width:16px; padding:1.1rem 1.3rem; margin:0 0 1.6rem; }
.ccr-alert-emergency{ border-color:#a01b1b; border-left-width:24px; }
.ccr-alert-warning{ border-color:#141a11; }
.ccr-alert-info,.ccr-alert-success{ border-color:#1b3310; }

.bulletin-item{ border-top:3px solid #141a11; padding:1.3rem 0; }
.bulletin-title{ font-size:1.2rem; font-weight:700; margin:0 0 .3rem; }
.bulletin-date,.bulletin-category,.bulletin-meta{ font-size:.9rem; }
.bulletin-excerpt{ margin:.5rem 0 0; }
.announcement-widget{ margin:0 0 1.7rem; }
.announcement-title{ font-size:1.2rem; font-weight:700; }


/* ==========================================================================
   PARENT-THEME AND PLUGIN CHROME
   Measured on the live site, these are the only things left dragging a page
   below the bar this design sets. None of them is markup this theme emits, so
   they are corrected here rather than left as an exception.
   ========================================================================== */

/* ---------- Twenty Twenty-Four's header, navigation and footer ----------
   Measured before: navigation items 36px tall, the site title 31px, the site
   logo link 26px, the footer credit at 13px. The design requires 60px targets
   and nothing below 18.9px, and these are on every single page. */

.wp-block-navigation-item a,
.wp-block-navigation-item .wp-block-navigation-item__content{
  display:flex; align-items:center;
  min-height:60px; padding:0 .8rem;
  font-size:1rem; font-weight:700;
  color:#141a11; text-decoration:underline;
  text-underline-offset:5px; text-decoration-thickness:2px;
}
.wp-block-navigation-item a:hover,
.wp-block-navigation-item a:focus{
  background:#1b3310; color:#ffffff; text-decoration-thickness:3px;
}
.wp-block-navigation-item a:focus-visible{
  outline:4px solid #b07d00; outline-offset:2px;
}
.wp-block-navigation .wp-block-navigation__submenu-container{
  border:3px solid #141a11;
}

.wp-block-site-title,
.wp-block-site-title a{
  font-size:1.5rem; font-weight:700; line-height:1.3; color:#141a11;
}
.wp-block-site-title a{
  display:inline-flex; align-items:center; min-height:60px;
}
.wp-block-site-logo a{
  display:inline-flex; align-items:center; min-height:60px;
}

/* TT4 keeps its own "small" preset, which lands at 13px. Nothing on this site
   may be smaller than the help-text step. */
.has-small-font-size,
.wp-block-site-tagline{
  font-size:.9rem !important;
}

/* ---------- Cookie consent banner ----------
   Measured before: 13.3px buttons, and "Accept All" at 5.44:1 - below the 7:1
   this design holds elsewhere. It is the first thing a visitor must deal with,
   so it should not be the least readable thing on the page. Selectors are the
   plugin's own; if the plugin is ever removed these rules simply stop matching. */

.cookieadmin_notice_container,
.cookieadmin_notice_con{
  font-size:1rem !important;
  line-height:1.6 !important;
  background:#ffffff !important;
  color:#141a11 !important;
  border-top:4px solid #141a11 !important;
}
.cookieadmin_notice_container p,
.cookieadmin_notice_con p{
  font-size:1rem !important;
  color:#141a11 !important;
}
.cookieadmin_btn{
  font-family:inherit !important;
  font-size:1rem !important;
  font-weight:700 !important;
  min-height:60px !important;
  padding:.6rem 1.2rem !important;
  border-radius:0 !important;
  background:#1b3310 !important;
  color:#ffffff !important;
  border:3px solid #141a11 !important;
}
.cookieadmin_btn:hover,
.cookieadmin_btn:focus{
  background:#141a11 !important; color:#ffffff !important;
}
.cookieadmin_btn:focus-visible{
  outline:4px solid #b07d00 !important; outline-offset:2px !important;
}

/* The consent plugin's own credit line renders at 11px - the smallest text
   anywhere on the site. It is not content a resident needs, but it is visible
   text, so it is raised to the same floor everything else obeys rather than
   hidden. */
.cookieadmin_notice_container a[href*="cookie"],
.cookieadmin_powered_by,
.cookieadmin_notice_container small{
  font-size:.9rem !important;
  color:#141a11 !important;
}


/* ==========================================================================
   HEADER HEIGHT
   Measured on the live site: 308px of header before any page content, and the
   first action on the home page sitting at 1065px against a 712px viewport -
   below the fold on any normal laptop. A resident should not have to scroll to
   reach the thing they came for.

   The nav itself is 173px because there are 18 menu items at the 60px target
   size this design requires, wrapping onto three rows. The 60px targets are not
   negotiable, so what is tightened here is the SPACE AROUND them, not the
   targets. The item count is a separate question for the board.
   ========================================================================== */

/* Header band: less air above and below the title/nav row. */
header .wp-block-group.has-base-background,
header > .wp-block-group{
  padding-top:.5rem;
  padding-bottom:.5rem;
}

/* Wrapped nav rows sit closer together. The gap BETWEEN items stays generous
   enough that two 60px targets are never mistaken for one. */
.wp-block-navigation,
.wp-block-navigation__container{
  gap:.35rem .8rem;
}
.wp-block-navigation-item{
  margin-bottom:0;
}

/* The page title no longer floats a long way below the header. */
.wp-block-post-title,
main > .wp-block-group h1:first-child{
  margin-top:.8rem;
}

/* Trim the standing gap the parent theme leaves at the top of the content. */
main > .wp-block-group:first-child,
.wp-site-blocks > main{
  padding-top:0;
}


/* Twenty Twenty-Four's page template opens with two empty spacer blocks - 80px
   and 36px of nothing before the first word. Removed on pages. */
body.page main > .wp-block-group > .wp-block-spacer{
  display:none;
}

/* TWO <h1> ELEMENTS ON EVERY PAGE.
   The template prints the page title as an h1 ("Home"), and the page content
   then opens with its own, better-worded h1 ("Canyon Creek Ridge
   Condominiums"). Two h1s is wrong for a screen reader and wastes a screen's
   worth of space above the fold.

   The template's copy is hidden ONLY where the content genuinely supplies its
   own - privacy-policy, the residents hub and the user guide open with an h2,
   and on those the template's h1 is the only one there is, so it stays. Browsers
   without :has() simply keep today's behaviour; nothing is lost that is not
   already lost. */
body.page:has(.entry-content h1) .wp-block-post-title{
  display:none;
}


/* ==========================================================================
   bbPRESS FORUMS
   Measured on the live site after the flip: EVERY piece of text inside the
   forum was 11px or 12px, and 13 interactive targets were under 44px. The rest
   of the site is 21px with a 18.9px floor and 60px targets, so the forum read
   as broken rather than merely small.

   Cause: bbPress ships bbpress.min.css, which sets its own pixel sizes scoped
   to #bbpress-forums (12px on the container, 11px on the forum list). This
   theme had no bbPress rules at all, so the plugin's values simply won. The
   plugin stylesheet loads FIRST and this one loads LAST, so matching its
   specificity is enough - none of this needs !important, and the plugin is not
   modified.
   ========================================================================== */

#bbpress-forums,
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-lead-topic,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-search-results{
  font-size:1rem;                /* 21px, the site's body size */
  line-height:1.6;
  color:#141a11;
}

/* The forum list was rendering 482px wide inside a 924px column. */
#bbpress-forums,
#bbpress-forums ul.bbp-forums,
#bbpress-forums li.bbp-body,
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer,
.bbpress-wrapper{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* The smallest text bbPress produces: the per-forum description and the
   author/time metadata. Nothing on this site goes below the help-text step. */
#bbpress-forums .bbp-forums-list,
#bbpress-forums .bbp-forums-list .bbp-forum,
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content,
#bbpress-forums div.bbp-forum-author .bbp-author-name,
#bbpress-forums div.bbp-topic-author .bbp-author-name,
#bbpress-forums div.bbp-reply-author .bbp-author-name,
#bbpress-forums div.bbp-breadcrumb,
#bbpress-forums div.bbp-topic-tags,
div.bbp-breadcrumb,
div.bbp-topic-tags,
span.bbp-author-ip{
  font-size:.9rem;               /* 18.9px - the floor, never below */
  color:#141a11;
}

#bbpress-forums div.bbp-forum-title h3,
#bbpress-forums div.bbp-topic-title h3,
#bbpress-forums .bbp-forum-title{
  font-size:1.2rem;
  font-weight:700;
  line-height:1.35;
}

/* Column headings take the same treatment as every other table header here. */
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer{
  background:#1b3310;
  color:#ffffff;
  font-size:1rem;
  font-weight:700;
  border:3px solid #141a11;
  padding:.7rem .9rem;
}
#bbpress-forums li.bbp-header a,
#bbpress-forums li.bbp-footer a{
  color:#ffffff;
}

#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic{
  border-bottom:3px solid #141a11;
  padding:.7rem .9rem;
}

/* Targets. Forum and topic titles are the primary action and take the full
   60px; the secondary metadata links (who posted, how long ago) sit at 44px,
   which is the same allowance the board tables use for dense rows. */
#bbpress-forums a{
  color:#1b3310;
  text-decoration:underline;
  text-underline-offset:4px;
}
#bbpress-forums a:hover,
#bbpress-forums a:focus{
  color:#141a11;
  text-decoration-thickness:3px;
}
#bbpress-forums li.bbp-forum-info a,
#bbpress-forums li.bbp-topic-title a,
#bbpress-forums .bbp-forum-title{
  display:inline-block;
  min-height:60px;
  line-height:60px;
}
#bbpress-forums .bbp-forum-freshness a,
#bbpress-forums .bbp-topic-freshness a,
#bbpress-forums div.bbp-forum-author a,
#bbpress-forums div.bbp-topic-author a,
#bbpress-forums div.bbp-breadcrumb a{
  display:inline-block;
  min-height:44px;
  line-height:44px;
}

/* Focus is never removed here either. */
#bbpress-forums a:focus-visible,
#bbpress-forums input:focus-visible,
#bbpress-forums button:focus-visible,
#bbpress-forums textarea:focus-visible,
#bbpress-forums select:focus-visible{
  outline:4px solid #b07d00;
  outline-offset:2px;
}

/* The search box was a 57x21 input floated into the corner. */
#bbpress-forums #bbp-search-form,
.bbpress-wrapper #bbp-search-form{
  float:none;
  width:100%;
  margin:0 0 1.4rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
#bbpress-forums #bbp_search,
.bbpress-wrapper #bbp_search{
  flex:1 1 16rem;
  min-height:60px;
  font-family:inherit;
  font-size:1rem;
  padding:.5rem .8rem;
  border:3px solid #141a11;
  border-radius:0;
}
#bbpress-forums #bbp_search_submit,
.bbpress-wrapper #bbp_search_submit,
#bbpress-forums button,
#bbpress-forums input[type="submit"]{
  min-height:60px;
  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  padding:.5rem 1.2rem;
  background:#1b3310;
  color:#ffffff;
  border:3px solid #141a11;
  border-radius:0;
  cursor:pointer;
}

/* Post/reply editors need to be usable, not a 12px box. */
#bbpress-forums textarea,
#bbpress-forums input[type="text"],
#bbpress-forums input[type="email"],
#bbpress-forums select{
  font-family:inherit;
  font-size:1rem;
  min-height:60px;
  padding:.5rem .8rem;
  border:3px solid #141a11;
  border-radius:0;
  width:100%;
  box-sizing:border-box;
}
#bbpress-forums textarea{
  min-height:12rem;
}

/* Narrow screens: the forum rows stack rather than scrolling sideways. */
@media screen and (max-width: 47rem){
  #bbpress-forums li.bbp-header,
  #bbpress-forums li.bbp-body ul.forum,
  #bbpress-forums li.bbp-body ul.topic{
    display:block;
  }
  #bbpress-forums li.bbp-forum-info,
  #bbpress-forums li.bbp-forum-topic-count,
  #bbpress-forums li.bbp-forum-reply-count,
  #bbpress-forums li.bbp-forum-freshness{
    display:block;
    width:100%;
    text-align:left;
  }
}

/* bbPress sets these at ID-plus-TWO-classes, which beats an ID-plus-one-class
   selector no matter which sheet loads later. Matching its exact selectors is
   what wins - specificity first, load order only as the tie-break. Found by
   measuring, not by guessing: the forum descriptions and the last-post metadata
   were still rendering at 11px after the first pass. */
#bbpress-forums .bbp-forum-info .bbp-forum-content,
#bbpress-forums .bbp-forum-freshness .bbp-topic-meta,
#bbpress-forums .bbp-topic-freshness .bbp-topic-meta,
#bbpress-forums .bbp-topic-meta .bbp-topic-freshness-author,
#bbpress-forums div.bbp-forum-author .bbp-author-role,
#bbpress-forums div.bbp-topic-author .bbp-author-role,
#bbpress-forums div.bbp-reply-author .bbp-author-role,
#bbpress-forums p.bbp-topic-meta,
#bbpress-forums .bbp-body .bbp-forum-content{
  font-size:.9rem;
  line-height:1.55;
  color:#141a11;
}


/* ==========================================================================
   bbPRESS: single forum, topic and reply views
   The first pass covered the forum INDEX. The single-forum view uses a
   different set of classes, and measuring it found 12-13px text and 27 targets
   under 44px still coming from the plugin's stylesheet.
   ========================================================================== */

#bbpress-forums .bbp-forum-description,
#bbpress-forums .bbp-topic-description,
#bbpress-forums p.bbp-topic-meta,
#bbpress-forums .bbp-author-name,
#bbpress-forums .bbp-topic-started-by,
#bbpress-forums .bbp-topic-started-in,
#bbpress-forums .bbp-pagination-count,
#bbpress-forums .bbp-pagination,
#bbpress-forums .bbp-topic-voice-count,
#bbpress-forums .bbp-topic-reply-count,
#bbpress-forums .bbp-topic-freshness,
#bbpress-forums div.bbp-template-notice,
#bbpress-forums div.bbp-template-notice p,
div.bbp-template-notice,
div.bbp-template-notice p{
  font-size:.9rem;
  line-height:1.55;
  color:#141a11;
}

/* The notice strip ("This forum has 1 topic...") is information, not decoration. */
#bbpress-forums div.bbp-template-notice,
div.bbp-template-notice{
  border:3px solid #1b3310;
  border-left-width:12px;
  background:#ffffff;
  padding:.8rem 1rem;
  margin:0 0 1.3rem;
}

/* Every link in a forum view is a target, not just the ones on the index. */
#bbpress-forums .bbp-topic-permalink,
#bbpress-forums .bbp-forum-permalink,
#bbpress-forums .bbp-topic-title a,
#bbpress-forums li.bbp-topic-title a,
#bbpress-forums .bbp-pagination a,
#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .subscription-toggle,
#bbpress-forums .bbp-topic-action a{
  display:inline-block;
  min-height:44px;
  line-height:44px;
}
#bbpress-forums li.bbp-topic-title > a{
  min-height:60px;
  line-height:60px;
  font-size:1.1rem;
  font-weight:700;
}

/* ==========================================================================
   THE BLOCK TEMPLATE'S POST META ON bbPRESS PAGES
   bbPress renders through a dummy post, so the single template prints that
   post's date and an empty author - "Jan 7, 2026 - by" above every forum. It is
   meaningless here and actively misleading, since it is not the date of
   anything a resident can see. Hidden on bbPress views only; ordinary posts and
   pages keep their meta.
   ========================================================================== */
.bbpress .wp-block-post-date,
.bbpress .wp-block-post-author,
.bbpress .wp-block-post-author-name,
.single-forum .wp-block-post-date,
.single-forum .wp-block-post-author,
.single-topic .wp-block-post-date,
.single-topic .wp-block-post-author,
.post-type-archive-forum .wp-block-post-date,
.post-type-archive-forum .wp-block-post-author{
  display:none;
}


/* ==========================================================================
   bbPRESS corrections found by measuring the single-forum view
   ========================================================================== */

/* MY OWN REGRESSION. The rule above sets ink on .bbp-topic-voice-count,
   .bbp-topic-reply-count and .bbp-topic-freshness so the row metadata is
   readable - but bbPress uses those SAME class names on the green column-header
   row, where ink on green measures 1.29:1. That is one of the four pairings
   this stylesheet's own header lists as banned. The header row wins its colour
   back here, at a specificity that beats the rule that broke it. */
#bbpress-forums li.bbp-header .bbp-topic-voice-count,
#bbpress-forums li.bbp-header .bbp-topic-reply-count,
#bbpress-forums li.bbp-header .bbp-topic-freshness,
#bbpress-forums li.bbp-header .bbp-forum-topic-count,
#bbpress-forums li.bbp-header .bbp-forum-reply-count,
#bbpress-forums li.bbp-header .bbp-forum-freshness,
#bbpress-forums li.bbp-footer .bbp-topic-voice-count,
#bbpress-forums li.bbp-footer .bbp-topic-reply-count,
#bbpress-forums li.bbp-footer .bbp-topic-freshness{
  color:#ffffff;          /* 13.75:1 on the association green */
  font-size:1rem;
  font-weight:700;
}

/* The "last updated ... by ..." links in a forum description were 23px tall. */
#bbpress-forums .bbp-forum-description a,
#bbpress-forums .bbp-topic-description a,
#bbpress-forums .bbp-forum-description .bbp-author-link,
#bbpress-forums .bbp-topic-description .bbp-author-link{
  display:inline-block;
  min-height:44px;
  line-height:44px;
}

/* bbPress form fields live outside #bbpress-forums on some views. */
.bbp-form input[type="text"],
.bbp-form input[type="email"],
.bbp-form input[type="password"],
.bbp-form select,
#bbpress-forums .bbp-form input[type="text"]{
  min-height:60px;
  font-family:inherit;
  font-size:1rem;
  padding:.5rem .8rem;
  border:3px solid #141a11;
  border-radius:0;
  box-sizing:border-box;
}

/* The block template's previous/next post navigation is meaningless on a forum
   - it walks the dummy posts bbPress creates, not anything a resident can use.
   Hidden for the same reason as the dummy post's date. */
.bbpress .wp-block-post-navigation-link,
.bbpress .post-navigation-link-next,
.bbpress .post-navigation-link-previous,
.single-forum .wp-block-post-navigation-link,
.single-topic .wp-block-post-navigation-link{
  display:none;
}

/* The posting form's fields were still 28px: some bbPress inputs carry no type
   attribute at all, so an [type="text"] selector never matched them. Match any
   text-like field instead, and give the checkbox a target its label shares. */
.bbp-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
#bbpress-forums .bbp-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]){
  min-height:60px;
  font-family:inherit;
  font-size:1rem;
  padding:.5rem .8rem;
  border:3px solid #141a11;
  border-radius:0;
  box-sizing:border-box;
}
.bbp-form input[type="checkbox"],
#bbpress-forums input[type="checkbox"]{
  width:28px;
  height:28px;
}
.bbp-form label,
#bbpress-forums .bbp-form label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  font-size:1rem;
}


/* ==========================================================================
   STRUCTURAL CORRECTION: li.bbp-header is not always a column header

   I assumed .bbp-header meant "the grey column-header strip". On a TOPIC page
   bbPress reuses the SAME class to wrap each reply, so the green background I
   gave it landed behind the reply text: ink on green, measured 1.29:1, one of
   the four pairings this stylesheet's header lists as banned.

   The green treatment therefore belongs only where the element really is a
   column header - as a direct child of a forum or topic LIST. Inside a reply
   list it is explicitly returned to plain white with ink text.
   ========================================================================== */

#bbpress-forums ul.bbp-replies > li.bbp-header,
#bbpress-forums ul.bbp-replies li.bbp-header,
#bbpress-forums ul.bbp-replies > li.bbp-footer,
#bbpress-forums ul.bbp-replies li.bbp-footer,
#bbpress-forums ul.bbp-lead-topic > li.bbp-header,
#bbpress-forums ul.bbp-lead-topic li.bbp-header,
#bbpress-forums ul.bbp-lead-topic li.bbp-footer{
  background:#ffffff;
  color:#141a11;
  border:0;
  border-bottom:3px solid #141a11;
  padding:.8rem 0;
  font-weight:400;
}
#bbpress-forums ul.bbp-replies li.bbp-header a,
#bbpress-forums ul.bbp-replies li.bbp-footer a,
#bbpress-forums ul.bbp-lead-topic li.bbp-header a,
#bbpress-forums ul.bbp-lead-topic li.bbp-footer a{
  color:#1b3310;
}

/* Reply and topic bodies read as prose, at the site's body size. */
#bbpress-forums .bbp-reply-content,
#bbpress-forums .bbp-topic-content{
  font-size:1rem;
  line-height:1.7;
  color:#141a11;
  padding:.6rem 0 1.2rem;
}
#bbpress-forums .bbp-reply-content p,
#bbpress-forums .bbp-topic-content p{
  font-size:1rem;
  color:#141a11;
}

/* "Reply" was rendering at 10px - the smallest text found anywhere on the site. */
#bbpress-forums .bbp-topic-reply-link,
#bbpress-forums .bbp-reply-to-link,
#bbpress-forums .bbp-admin-links a,
#bbpress-forums .bbp-meta a,
#bbpress-forums span.bbp-admin-links a{
  font-size:.9rem;
  display:inline-block;
  min-height:44px;
  line-height:44px;
  color:#1b3310;
}
#bbpress-forums .bbp-meta,
#bbpress-forums span.bbp-admin-links{
  font-size:.9rem;
}

/* ==========================================================================
   MOBILE FIXES (measured at 390px)
   ========================================================================== */

/* ---------- Submit buttons (Contact Form 7, comment forms) look like .btn--primary ---------- */
input[type="submit"],.wpcf7-submit,.wpcf7 button,.comment-form button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:60px; padding:.85rem 1.3rem; max-width:100%; box-sizing:border-box; white-space:normal; text-align:center;
  font-family:inherit; font-size:1.2rem; font-weight:700; line-height:1.35;
  color:#ffffff; background:#1b3310; border:3px solid #1b3310; border-radius:0; cursor:pointer;
}
input[type="submit"]:hover,.wpcf7-submit:hover,.wpcf7 button:hover{ background:#141a11; border-color:#141a11; color:#ffffff; }
input[type="submit"]:focus,.wpcf7-submit:focus,.wpcf7 button:focus{ outline:4px solid #b07d00; outline-offset:2px; }

/* ---------- Radios and checkboxes: 28px control, 44px+ label row ---------- */
input[type="radio"],input[type="checkbox"]{
  width:28px; height:28px; margin:0 .7rem 0 0; flex:none; accent-color:#1b3310; vertical-align:middle;
}
label:has(> input[type="radio"]),label:has(> input[type="checkbox"]),
.wpcf7-list-item label,.wpcf7-list-item-label{
  display:inline-flex; align-items:center; min-height:44px; padding:.3rem 0; margin:0 1rem .3rem 0; cursor:pointer;
}
.wpcf7-list-item{ display:block; margin:0 0 .3rem; }

/* ---------- Inline buttons and bbPress links get 44px targets ---------- */
.notice .btn{ min-height:44px; }
#bbpress-forums .bbp-breadcrumb a,.bbp-forum-title{
  display:inline-flex; align-items:center; min-height:44px;
}

@media (max-width:47rem){
  /* Menu toggle and close: 48px targets; toggle reads "Menu" */
  .wp-block-navigation__responsive-container-open{
    display:inline-flex; align-items:center; gap:.5rem;
    min-width:48px; min-height:48px; padding:0 .5rem; flex:none;
    color:#1b3310; background:#ffffff; border:3px solid #1b3310; border-radius:0;
  }
  .wp-block-navigation__responsive-container-open::after{ content:"Menu"; font-size:1rem; font-weight:700; }
  .wp-block-navigation__responsive-container-open svg{ width:24px; height:24px; }
  .wp-block-navigation__responsive-container-close{
    min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
    color:#1b3310; background:#ffffff; border:3px solid #1b3310; border-radius:0;
  }
  .wp-block-navigation__responsive-container-close svg{ width:28px; height:28px; }

  /* Open overlay: left-aligned, full-width rows, tight spacing, readable current page */
  .wp-block-navigation__responsive-container.is-menu-open{ padding:1rem; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ padding-top:2.5rem; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
    align-items:stretch; justify-content:flex-start; gap:.15rem; width:100%; padding:0; text-align:left;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
    width:100%; align-items:stretch; margin:0;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content{
    width:100%; min-height:48px; padding:.3rem .8rem; justify-content:flex-start; text-align:left;
    color:#141a11; background:#ffffff; border:3px solid transparent;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus{
    background:#1b3310; color:#ffffff;
  }
  /* Current page: white on dark green (14:1) with a visible border */
  .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
  .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"]{
    background:#1b3310; color:#ffffff; border-color:#141a11;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ border:0; padding-left:1rem; }

  /* Compact header: logo + title on one row, menu button beside them */
  .wp-block-template-part > .wp-block-group{ padding-top:8px !important; padding-bottom:8px !important; }
  .wp-block-template-part .wp-block-group.alignwide{ flex-wrap:nowrap; gap:.5rem; align-items:center; }
  .wp-block-template-part .wp-block-group.alignwide > .wp-block-group{ flex:1 1 0; flex-wrap:nowrap; gap:.5rem; align-items:center; min-width:0; }
  .wp-block-template-part .wp-block-group.alignwide > .wp-block-navigation,.wp-block-template-part .wp-block-group.alignwide > nav{ flex:none; }
  .wp-block-site-logo{ flex:none; }
  .wp-block-site-logo img{ width:128px; height:auto; max-width:none; }
  .wp-block-site-logo a{ min-height:0; }
  /* The logo already reads 'Canyon Creek Ridge HOA'. Keep the site title for screen readers only. */
  .wp-block-template-part .wp-block-site-title{
    position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .wp-block-template-part .wp-block-group.alignwide{ justify-content:space-between; }
}