/* =========================================
   Footer Component
   ========================================= */

.site-footer {
  background: #014785;
  color: #ffffff;
  padding: 48px 0 24px;
}

.site-footer,
.site-footer * {
  color: #ffffff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 34px;
}

.footer-brand p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  max-width: 320px;
}

.footer-brand > p:first-child strong {
  color: #fff;
  font-weight: 600;
}

.footer-contact-details {
  margin-top: 16px !important;
  line-height: 1.55;
}

.footer-contact-details strong {
  color: #fff;
}

.site-footer h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600 !important;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.site-footer a {
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 600 !important;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.social-list {
  gap: 11px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.social-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .32);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease;
}

.social-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-link:hover .social-icon,
.social-link:focus .social-icon {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .7);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .24);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, .78) !important;
  font-size: .9rem;
}

.footer-legal {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* Footer — High Contrast */

body.high-contrast .site-footer {
  background: #001f3f !important;
}

body.high-contrast footer.site-footer,
body.high-contrast footer.site-footer * {
  color: #ffffff !important;
}

body.high-contrast footer.site-footer a:focus {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px;
}

body.high-contrast .site-footer .social-icon {
  border-color: rgba(255, 255, 255, .75) !important;
}


/* Footer — Responsive */

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: unset;
  }
}


/* =========================================
   Header Component
   ========================================= */

.utility-bar{background:var(--surface);color:var(--brand-muted);font-size:.9rem}
.utility-bar .container{display:flex;justify-content:flex-end;align-items:center;gap:24px;padding:9px 0;font-weight:600;text-align:right}
.utility-bar .container>a{display:inline-flex;align-items:center;gap:4px}
.utility-bar .container>a svg{width:1em;height:1em;flex-shrink:0}
.utility-bar a:hover,.utility-bar a:focus{text-decoration:underline;text-underline-offset:3px}
.utility-item{position:relative}

.translation-menu{position:relative}
.translation-trigger{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--brand-muted);padding:0;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.translation-trigger:hover,.translation-trigger:focus,.translation-menu.open .translation-trigger{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px}
.translation-trigger svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.translation-trigger>svg:last-child{transition:transform .2s}
.translation-menu.open .translation-trigger>svg:last-child{transform:rotate(180deg)}
.translation-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:150;min-width:220px;padding:10px;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 28px rgba(15,45,64,.14);text-align:left}
.translation-menu.open .translation-panel{display:block}
.translation-panel a{display:flex;align-items:center;gap:10px;padding:9px 10px;color:var(--brand-text);font-weight:600}
.translation-panel a:hover,.translation-panel a:focus{background:var(--brand-light);color:var(--brand-blue);text-decoration:none}

.accessibility-trigger{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--brand-muted);font:inherit;font-weight:600;padding:0;cursor:pointer}
.accessibility-trigger:hover,.accessibility-trigger:focus,.utility-item.open .accessibility-trigger{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px}
.accessibility-trigger svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.accessibility-trigger>svg:last-child{transition:transform .2s}
.utility-item.open .accessibility-trigger>svg:last-child{transform:rotate(180deg)}
.accessibility-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;width:325px;padding:22px 18px 24px;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 28px rgba(15,45,64,.14);color:var(--brand-text);z-index:150;text-align:left}
.utility-item.open .accessibility-panel{display:block}
.accessibility-panel h3{margin:0 0 12px;color:#111;font-size:1.05rem}
.accessibility-options{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.accessibility-options button{display:inline-flex;align-items:center;gap:5px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--brand-blue);padding:0 0 6px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}
.accessibility-options button:hover,.accessibility-options button:focus,.accessibility-options button.active{border-bottom-color:var(--brand-blue)}
.accessibility-message{margin:0;color:#39434d;font-size:1rem;line-height:1.75}

.contact-trigger{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--brand-muted);font:inherit;font-weight:600;padding:0;cursor:pointer}
.contact-trigger:hover,.contact-trigger:focus,.utility-item.open .contact-trigger{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px}
.contact-trigger svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-trigger>svg:last-child{transition:transform .2s}
.utility-item.open .contact-trigger>svg:last-child{transform:rotate(180deg)}
.contact-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;width:325px;max-width:min(325px,calc(100vw - 20px));padding:22px 18px 24px;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 28px rgba(15,45,64,.14);color:var(--brand-text);z-index:150;text-align:left}
.utility-item.open .contact-panel{display:block}
.contact-panel h3{margin:0 0 12px;color:#111;font-size:1.05rem}
.contact-311-group{margin-bottom:0}
.contact-311-btn{display:inline-flex;align-items:center;gap:7px;background:var(--brand-blue);color:#fff;border:0;border-radius:100px;padding:7px 18px;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s}
.contact-311-btn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.contact-311-btn:hover,.contact-311-btn:focus{background:var(--brand-blue-dark)}
.contact-311-desc{margin:10px 0 0;color:#39434d;font-size:1rem;line-height:1.75}
.contact-options{display:flex;flex-direction:column;margin-top:4px}
.contact-option{display:flex;align-items:flex-start;gap:10px;padding:7px 0;color:var(--brand-text);text-decoration:none;font-size:1rem}
.contact-option:last-child{padding-bottom:0}
.contact-option svg{flex-shrink:0;margin-top:2px;width:15px;height:15px;stroke:var(--brand-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.contact-option-label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-muted);line-height:1.2;margin-bottom:2px;text-decoration:none}
.contact-option-value{display:block;color:var(--brand-text);line-height:1.3}
a.contact-option:hover,a.contact-option:focus{text-decoration:none}
a.contact-option:hover .contact-option-value,a.contact-option:focus .contact-option-value{color:var(--brand-blue);text-decoration:underline;text-underline-offset:2px}
.contact-option-static{cursor:default}
.contact-divider{border:0;border-top:1px solid var(--border);margin:16px 0}

.site-top{position:sticky;top:0;z-index:100;background:var(--surface)}
.site-header{background:var(--surface);border-bottom:0;box-shadow:0 4px 18px rgba(0,0,0,.04)}
.site-header::after{display:none}
.drawer-close-btn{display:none}
.main-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0 20px}
.logo{display:inline-flex;align-items:center;flex-shrink:0;min-width:210px}
.logo img{width:210px;min-width:210px;height:auto;display:block}
.nav-wrap{flex:1;display:flex;justify-content:flex-end;min-width:0;margin-left:auto}
.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:0;margin-left:auto}
.nav-item{position:static;border-left:1px solid var(--border)}
.nav-item:first-child{border-left:0}
.nav-link{display:inline-flex;align-items:center;padding:17px 20px;color:#000;font-weight:600;font-size:1.08rem;letter-spacing:.01em;white-space:nowrap;border-radius:0}
.nav-item:last-child .nav-link{padding-right:14px}
.nav-link:hover,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link{background:transparent;color:var(--brand-blue)}
.nav-item:hover .mega,.nav-item:focus-within .mega,.nav-item.focus-open .mega{display:block}

.mega{display:none;position:absolute;left:0;right:0;top:100%;z-index:110;padding:0 0 24px}
.mega:before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px;background:transparent}
.mega-inner{position:relative;width:100%;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 18px 18px;box-shadow:0 18px 45px rgba(15,45,64,.14);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 160px);overscroll-behavior:contain}
.mega-inner::before{content:"";display:block;height:8px;background:linear-gradient(90deg,#0276e8 0%,#0256a4 100%)}
.mega-header{padding:18px 24px;background:#f2f2f2;border-bottom:1px solid var(--border)}
.mega-header p{margin:0;color:var(--brand-muted);max-width:850px;font-size:1rem;font-weight:600;line-height:1.5}
.mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:24px}
.section-link{display:block;width:100%;margin-bottom:14px;padding:4px 0 12px;background:transparent;color:#000;font-size:1.08rem;font-weight:600;line-height:1.25;border-bottom:1px solid var(--border)}
.section-link:hover,.section-link:focus{background:transparent;color:var(--brand-blue);text-decoration:none}
.sub-links{list-style:none;margin:0;padding:0}
.sub-links li{margin:0 0 9px}
.sub-links a{color:#606060;font-size:.92rem;font-weight:600;line-height:1.45;display:inline-block;transition:transform .18s ease,color .18s ease}
.sub-links a:hover{color:#0a6ed1;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;transform:translateX(8px)}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.search-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--radius);background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease}
.search-toggle:hover,.search-toggle:focus,.search-toggle.active{background:var(--brand-green);color:#fff;border-color:var(--brand-green)}
.search-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.header-search-panel{display:none;position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:115;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:0 14px 28px rgba(15,45,64,.12)}
.header-search-panel.open{display:block}
.header-search-inner{width:min(var(--max-width),calc(100% - 32px));margin:0 auto;padding:18px 0;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.header-search-inner input{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;font-size:1rem;color:var(--brand-text)}
.header-search-submit{display:grid;place-items:center;width:54px;height:52px;border:0;border-radius:var(--radius);background:var(--brand-blue);color:#fff;cursor:pointer}
.header-search-submit:hover,.header-search-submit:focus{background:var(--brand-green)}
.header-search-submit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

body.homepage .header-actions .search-toggle{display:none}
.mobile-toggle{display:none;align-items:center;gap:10px;background:var(--brand-blue);color:#fff;border:0;border-radius:var(--radius);padding:12px 14px;font-weight:600;cursor:pointer}
.mobile-toggle svg{width:20px;height:20px}
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90}
body.menu-open .mobile-backdrop{display:block}
body.menu-open{overflow:hidden;touch-action:none}

/* Header — High Contrast */
body.high-contrast .utility-bar,
body.high-contrast .site-header,
body.high-contrast .accessibility-panel,
body.high-contrast .translation-panel,
body.high-contrast .mega-inner,
body.high-contrast .header-search-panel{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:none!important}
body.high-contrast .mega-inner::before{background:#000!important}
body.high-contrast .nav-link,
body.high-contrast .accessibility-message{color:#000!important}
body.high-contrast a:not(.section-link),
body.high-contrast .accessibility-trigger,
body.high-contrast .accessibility-options button{color:#003b78!important}
body.high-contrast .section-link,
body.high-contrast .header-search-submit,
body.high-contrast .search-toggle{background:#001f3f!important;color:#fff!important;border-color:#001f3f!important}
body.high-contrast .search-toggle:hover,
body.high-contrast .search-toggle:focus,
body.high-contrast .search-toggle.active{background:#000000!important;border-color:#000000!important;color:#ffffff!important}
body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus{outline:3px solid #000!important;outline-offset:3px}

/* Header — Responsive */
@media(max-width:1100px){
  .main-header{gap:16px}
  .nav-link{padding:15px 13px;font-size:1rem}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  .utility-bar .container{justify-content:center;flex-wrap:nowrap;text-align:center;gap:10px;font-size:.8rem;white-space:nowrap;position:relative}
  .mobile-toggle{display:inline-flex}
  .search-toggle{width:42px;height:42px}
  .logo img{width:168px}
  .header-actions{margin-left:auto}
  .header-search-inner{grid-template-columns:1fr auto;padding:14px 0}
  .nav-wrap{position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);transform:translateX(100%);transition:transform .25s ease;z-index:100;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;box-shadow:-10px 0 30px rgba(0,0,0,.18);background:#fff;display:block}
  body.menu-open .nav-wrap{transform:translateX(0)}
  .drawer-close-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 18px;background:var(--brand-blue);border:0;border-bottom:2px solid rgba(255,255,255,.2);color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:background .15s}
  .drawer-close-btn:hover,.drawer-close-btn:focus{background:#014785;outline:none}
  .drawer-close-label{flex:1;text-align:left}
  .drawer-close-x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--brand-blue);transition:background .15s}
  .drawer-close-btn:hover .drawer-close-x,.drawer-close-btn:focus .drawer-close-x{background:rgba(255,255,255,.9)}
  .drawer-close-x svg{width:18px;height:18px}
  .main-nav{display:block;width:100%;padding:0}
  .nav-item{border-left:0;border-bottom:1px solid rgba(2,86,164,.12)}
  .nav-link{display:flex;width:100%;justify-content:space-between;align-items:center;padding:16px 18px;color:var(--brand-blue);border-radius:0;font-weight:700 !important}
  .nav-link::after{content:'+';font-size:1.4rem;font-weight:600;line-height:1;margin-left:18px}
  .nav-item.mobile-open>.nav-link::after{content:'−'}
  .nav-item.mobile-open{border-bottom:1px solid rgba(2,86,164,.12)}
  .nav-link:hover,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link{background:rgba(2,86,164,.07);color:var(--brand-blue)}
  .main-nav .nav-item.mobile-open>.nav-link{background:var(--brand-blue)!important;color:#fff!important}
  .nav-item:hover .mega,.nav-item:focus-within .mega{display:none}
  .nav-item.mobile-open .mega{display:block}
  .mega{position:static;padding:0 0 12px}
  .mega:before{display:none}
  .mega-inner{width:100%;border-radius:0;box-shadow:none;border:0;background:#fff;overflow:visible;max-height:none}
  .mega-inner::before{display:none}
  .mega-header{display:none}
  .mega-grid{grid-template-columns:1fr;gap:0;padding:0}
  .column{padding:14px 18px;border-bottom:1px solid rgba(2,86,164,.1)}
  .column:last-child{border-bottom:0}
  .section-link{color:rgba(2,86,164,.6);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(2,86,164,.15);margin-bottom:10px;padding-bottom:8px}
  .section-link:hover,.section-link:focus{color:var(--brand-blue)}
  .sub-links li{margin-bottom:0}
  .sub-links a{color:rgba(2,86,164,.8);font-size:.95rem;font-weight:500;display:block;padding:7px 0;transition:color .15s;transform:none}
  .sub-links a:hover,.sub-links a:focus{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
  .nav-wrap .mobile-menu-support-cta{background:#f2f2f2!important;border-top:1px solid rgba(0,0,0,.08)!important;border-radius:0!important;margin:0!important;padding:16px 18px!important}
  .nav-wrap .mobile-menu-support-copy strong{color:var(--brand-blue-dark)!important}
  .nav-wrap .mobile-menu-support-copy span{color:#555!important}
  .nav-wrap .mobile-menu-support-actions{grid-template-columns:1fr!important;gap:8px!important;margin-top:12px!important}
  .nav-wrap .mobile-menu-support-primary{background:var(--brand-blue)!important;color:#fff!important;border-color:var(--brand-blue)!important}
  .nav-wrap .mobile-menu-support-secondary{background:#fff!important;color:var(--brand-blue)!important;border:1px solid var(--border)!important}
}

/* ============================================================
   ADD THESE LINES TO THE BOTTOM OF:
   /caledon/web/themes/custom/toc/css/components.css
   OR
   /caledon/web/themes/custom/toc/css/styles.css
   
   This loads AFTER accordion.frontend.css so it wins cleanly.
   No JS needed. Run: drush cr  after saving.
   ============================================================ */

/* Reset the module's blue header */
.ckeditor-accordion-container dl dt,
.ckeditor-accordion-container dl dt a,
.ckeditor-accordion-container dl dt span,
dl.ckeditor-accordion dt,
dl.ckeditor-accordion dt a,
dl.ckeditor-accordion dt span {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #1a1a1a !important;
}

/* The container / dl wrapper */
.ckeditor-accordion-container,
.ckeditor-accordion-container dl,
dl.ckeditor-accordion {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove the module's chevron icon */
.ckeditor-accordion-container dl dt .ckeditor-accordion-toggle,
dl.ckeditor-accordion dt .ckeditor-accordion-toggle {
  display: none !important;
}

/* Style the dt as a flex row */
.ckeditor-accordion-container dl dt,
dl.ckeditor-accordion dt {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  border: none !important;
}

.ckeditor-accordion-container dl dt:hover,
dl.ckeditor-accordion dt:hover {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
}

/* The toggler link inside dt */
.ckeditor-accordion-container dl dt a.ckeditor-accordion-toggler,
dl.ckeditor-accordion dt a.ckeditor-accordion-toggler {
  flex: 1 !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  background: none !important;
}

/* Add our + icon via pseudo-element AFTER the link */
.ckeditor-accordion-container dl dt a.ckeditor-accordion-toggler::after,
dl.ckeditor-accordion dt a.ckeditor-accordion-toggler::after {
  content: '+' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  margin-left: 12px !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #1a5ea8 !important;
  background: none !important;
}

/* When active show minus */
.ckeditor-accordion-container dl dt.active a.ckeditor-accordion-toggler::after,
dl.ckeditor-accordion dt.active a.ckeditor-accordion-toggler::after {
  content: '\2212' !important;
}

/* dd (body) */
.ckeditor-accordion-container dl dd,
dl.ckeditor-accordion dd {
  border-top: 1px solid #eee !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: #fff !important;
  padding: 12px 16px 16px !important;
  margin: 0 !important;
}

/**
 * Restyle Drupal core's contextual links trigger + dropdown to match
 * the Town of Caledon blue brand instead of the default dark/gray UI.
 * Add this to themes/custom/toc/css/components.css (or a new file
 * loaded via toc.libraries.yml).
 */

/* The floating gear/pencil trigger button */
.contextual .trigger,
.contextual-links-trigger {
  background-color: var(--brand-blue, #1a5ea8) !important;
  border-color: var(--brand-blue, #1a5ea8) !important;
}
.contextual .trigger:hover,
.contextual .trigger:focus {
  background-color: var(--brand-blue-dark, #154d8e) !important;
}

/* The dropdown panel itself */
.contextual .contextual-links {
  background-color: #ffffff !important;
  border: 1px solid var(--brand-blue, #1a5ea8) !important;
  border-radius: var(--radius, 6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 140px;
}

.contextual .contextual-links li {
  border-bottom: 1px solid #f0f0f0;
}
.contextual .contextual-links li:last-child {
  border-bottom: none;
}

.contextual .contextual-links a {
  color: var(--brand-blue, #1a5ea8) !important;
  font-weight: 600;
  padding: 10px 16px;
  display: block;
  text-decoration: none;
}
.contextual .contextual-links a:hover,
.contextual .contextual-links a:focus {
  background-color: #f4f8fc !important;
  color: var(--brand-blue-dark, #154d8e) !important;
  text-decoration: none;
}
/**
 * Restyle Drupal core's modal dialog (jQuery UI) to match the
 * Town of Caledon blue brand theme. Add to
 * themes/custom/toc/css/components.css (or a new file in the
 * theme's global-styling library).
 *
 * Applies specifically to the Hero Banner quick-edit modal, but will
 * restyle any core modal dialog the same way for consistency.
 */

/* Overlay behind the modal */
.ui-widget-overlay {
  background: rgba(20, 30, 45, 0.55) !important;
}

/* The dialog window itself */
.ui-dialog {
  background: #ffffff !important;
  border-radius: var(--radius, 8px) !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
  padding: 0 !important;
}

/* Title bar */
.ui-dialog .ui-dialog-titlebar {
  background: var(--brand-blue, #1a5ea8) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 24px 18px 48px !important;
  margin: 0 !important;
}

.ui-dialog .ui-dialog-title {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  padding-right: 40px !important;
  margin: 0 !important;
  display: block !important;
}

/* Close (X) button in the title bar.
   Uses `all: unset` first to strip out Gin admin theme's own button
   styling (which loads after our theme CSS and was overriding the
   earlier attempt at this), then rebuilds the button from scratch. */
.ui-dialog .ui-dialog-titlebar-close {
  all: unset !important;
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.15) !important;
  font-size: 0 !important;
  color: transparent !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}
/* Hide Drupal/jQuery UI's native sprite icon completely. */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}
.ui-dialog .ui-dialog-titlebar-close::before {
  display: none !important;
  content: none !important;
}
.ui-dialog .ui-dialog-titlebar-close::after {
  content: '\2715' !important; /* × character */
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  display: block !important;
  border: none !important;
  transform: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Content area (where the form renders) */
.ui-dialog .ui-dialog-content {
  background: #ffffff !important;
  color: #1a1a1a !important;
  padding: 24px !important;
}

/* Button pane (Save/Cancel row at the bottom) - Drupal renders this
   as a separate element from ui-dialog-content, so it needs its own
   background override or it stays dark. */
.ui-dialog .ui-dialog-buttonpane {
  background: #ffffff !important;
  border-top: 1px solid #eaeaea !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.ui-dialog .ui-dialog-content label {
  color: #1a1a1a !important;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.ui-dialog .ui-dialog-content .description {
  color: #6b7280 !important;
  font-size: 0.85rem;
}

.ui-dialog .ui-dialog-content input[type="text"] {
  border: 1px solid #d1d5db;
  border-radius: var(--radius, 4px);
  padding: 8px 12px;
  width: 100%;
}
.ui-dialog .ui-dialog-content input[type="text"]:focus {
  border-color: var(--brand-blue, #1a5ea8);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 94, 168, 0.15);
}

/* Buttons: Save Banner, Remove, Choose file */
.ui-dialog .ui-dialog-content input[type="submit"],
.ui-dialog .ui-dialog-content .button,
.ui-dialog .ui-dialog-content button,
.ui-dialog .ui-dialog-buttonpane input[type="submit"],
.ui-dialog .ui-dialog-buttonpane .button,
.ui-dialog .ui-dialog-buttonpane button {
  background: var(--brand-blue, #1a5ea8) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius, 4px);
  padding: 10px 22px;
  margin: 0 !important;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ui-dialog .ui-dialog-content input[type="submit"]:hover,
.ui-dialog .ui-dialog-content .button:hover,
.ui-dialog .ui-dialog-content button:hover,
.ui-dialog .ui-dialog-buttonpane input[type="submit"]:hover,
.ui-dialog .ui-dialog-buttonpane .button:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
  background: var(--brand-blue-dark, #154d8e) !important;
}

/* "Remove" button on the uploaded file - keep it visually secondary */
.ui-dialog .ui-dialog-content .file-widget .button,
.ui-dialog .ui-dialog-content [name="banner_image_0_remove_button"] {
  background: #ffffff !important;
  color: var(--brand-blue, #1a5ea8) !important;
  border: 1px solid var(--brand-blue, #1a5ea8) !important;
}
.ui-dialog .ui-dialog-content .file-widget .button:hover {
  background: #f4f8fc !important;
}
/**
 * Pulsing highlight for CKEditor's Fullscreen button, applied via
 * ckeditor-auto-fullscreen.js when arriving from the "Edit Content"
 * link on the live page. Draws the eye to the button so the editor
 * can click it themselves - add to themes/custom/toc/css/components.css
 */
.toc-pulse-highlight {
  position: relative;
  z-index: 10;
  border-radius: 4px !important;
  box-shadow: 0 0 0 0 rgba(26, 94, 168, 0.6) !important;
  animation: toc-pulse-ring 1.1s ease-out infinite;
}

@keyframes toc-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 94, 168, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(26, 94, 168, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 94, 168, 0);
  }
}
/* Force frontend editing toggle visibility */
.frontend-editing-toggle { z-index: 9999999 !important; }
.frontend-editing-toggle a { background-color: #1a5ea8 !important; opacity: 1 !important; visibility: visible !important; }
/* ── Policies/By-laws: search bar ── */
.policies-search-wrap{display:flex;align-items:center;gap:0;max-width:420px}
.policies-search-wrap input[type="search"]{
  flex:1;padding:10px 14px;border:1px solid #ccc;border-right:0;
  border-radius:var(--radius,6px) 0 0 var(--radius,6px);
}
.policies-search-wrap .header-search-submit{
  width:44px;height:44px;flex-shrink:0;border:1px solid var(--brand-blue-dark,#154d8e);
  border-radius:0 var(--radius,6px) var(--radius,6px) 0;
  background:var(--brand-blue-dark,#154d8e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center/20px no-repeat;
  color:transparent;cursor:pointer;
}
.policies-search-wrap .header-search-submit:hover{background-color:var(--brand-highlight-green,#3a8f4a)}

/* ── Policies/By-laws: pagination ── */
.policies-pagination-bar .pager{display:flex;gap:8px;justify-content:flex-end;list-style:none;margin:24px 0;padding:0}
.policies-pagination-bar .pager__item{list-style:none}
.policies-pagination-bar .pager__item a,
.policies-pagination-bar .pager__item.is-active{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border:1px solid #ddd;border-radius:var(--radius,6px);
  color:#1a1a1a;text-decoration:none;font-size:.9rem;
}
.policies-pagination-bar .pager__item.is-active{background:var(--brand-blue,#1a5ea8);color:#fff;border-color:var(--brand-blue,#1a5ea8)}
.policies-pagination-bar .pager__item a:hover{background:#f0f4f8}
.policies-pagination-bar .pager__item--disabled a,
.policies-pagination-bar .pager__item--disabled{opacity:.4;pointer-events:none}
/* =========================================
   Embedded Widget Component (PerfectMind, etc.)
   Rendered server-side from a [[EMBED:url]] marker by the
   toc_embed_marker filter (modules/custom/toc_embed_marker) — the
   filter always outputs a bare <iframe> with no wrapper div, so this
   targets any iframe sitting inside the main content area directly.
   ========================================= */

.content-main iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 6px);
  margin: 20px 0;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 45, 64, .08);
}

/* Loading state: a light placeholder background shows through until
   the embedded page's own content paints, instead of a stark blank
   white box — purely cosmetic, no JS required. */
.content-main iframe {
  background-color: var(--surface, #f7f8fa);
}

/* On narrow screens a fixed 1000px (or similar) height from the old
   source is usually too tall relative to viewport width — most
   embedded widgets (like PerfectMind's booking calendar) scroll
   internally on their own, so a shorter viewport here just means less
   scrolling to reach content below the widget, not lost content. */
@media (max-width: 600px) {
  .content-main iframe {
    height: 700px;
  }
}

/* High-contrast mode: keep the border visible against a dark page. */
body.high-contrast .content-main iframe {
  border-color: #ffffff !important;
}
.toc-booking-widget {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    overflow: hidden;
}

.toc-booking-widget iframe {
    width: 100%;
    min-height: 1000px;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .toc-booking-widget iframe {
        min-height: 1400px; /* widget often stacks taller on narrow screens */
    }
}