/* 00-gn-layout-fixes-v1.css */
/* Target: automatedhacks.com */
/* Updated: 2026-01-02 */
/* Goal: ayusin ang common UI/Layout/A11y issues na nakita sa audit:
   - link-not-visually-distinct (header/footer links)
   - low-text-contrast (footer text/links)
   - content-clipped-by-overflow (header search + cards)
   - touch-target-too-small (footer + adminbar)
   - element-horizontal-overflow (ads transforms / offscreen elements)
   - potential-overlap (adminbar vs header)
*/

/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------ */
:root{
  --gn-min-touch-target: 38px;
  --gn-min-touch-target-pad-y: 6px;
  --gn-min-touch-target-pad-x: 10px;
  --gn-safe-focus-ring: 0 0 0 3px rgba(0,0,0,.18);
  --gn-adminbar-h: 32px;
}

/* ------------------------------------------------------------------
   Helper classes (ina-apply ng JS runtime)
------------------------------------------------------------------ */
.gn-fix-overflow-visible{ overflow: visible !important; }
.gn-fix-overflow-y-visible{ overflow-y: visible !important; }
.gn-fix-overflow-x-hidden{ overflow-x: hidden !important; }

.gn-fix-breakword{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.gn-fix-touch-target{
  min-height: var(--gn-min-touch-target) !important;
  min-width: var(--gn-min-touch-target) !important;
  padding: var(--gn-min-touch-target-pad-y) var(--gn-min-touch-target-pad-x) !important;
  box-sizing: border-box !important;
}

.gn-fix-touch-target-inline{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: var(--gn-min-touch-target) !important;
  padding: var(--gn-min-touch-target-pad-y) var(--gn-min-touch-target-pad-x) !important;
  box-sizing: border-box !important;
}

.gn-fix-inline-center{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gn-fix-card-autoheight{
  height: auto !important;
  max-height: none !important;
}

.gn-fix-focusable:focus{
  outline: none !important;
  box-shadow: var(--gn-safe-focus-ring) !important;
}

/* ------------------------------------------------------------------
   0) Horizontal overflow guard (apply only kapag may overflow/offscreen)
------------------------------------------------------------------ */
html.gn-fix-no-xscroll,
body.gn-fix-no-xscroll{
  overflow-x: clip !important;
}

@supports not (overflow-x: clip){
  html.gn-fix-no-xscroll,
  body.gn-fix-no-xscroll{
    overflow-x: hidden !important;
  }
}

/* ------------------------------------------------------------------
   1) Admin bar overlap vs header (logged-in)
------------------------------------------------------------------ */
body.gn-fix-adminbar-overlap header.site-header{
  margin-top: var(--gn-adminbar-h) !important;
  top: var(--gn-adminbar-h) !important; /* kung fixed/sticky */
}

/* WP adminbar height differs on small screens */
@media (max-width: 782px){
  :root{ --gn-adminbar-h: 46px; }
}

/* ------------------------------------------------------------------
   2) Header links: visually distinct + focus states
   Audit flagged nav links + logo link without underline / color-dist.
------------------------------------------------------------------ */
header.site-header nav.main-navigation a:not(.button):not(.wp-block-button__link){
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(15,23,42,.35);
}

header.site-header nav.main-navigation a:not(.button):not(.wp-block-button__link):hover,
header.site-header nav.main-navigation a:not(.button):not(.wp-block-button__link):focus-visible{
  text-decoration-color: currentColor;
}

header.site-header a.custom-logo-link{
  border-radius: 10px;
}

header.site-header a.custom-logo-link:focus-visible{
  outline: none;
  box-shadow: var(--gn-safe-focus-ring);
}

header.site-header a.custom-logo-link:hover img{
  /* subtle affordance without changing layout */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.18));
}


/* CTA button/link (hero): make sure it's visually identifiable as interactive */
main.container > section.hero a.cta-button{
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}
main.container > section.hero a.cta-button:hover,
main.container > section.hero a.cta-button:focus-visible{
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------
   3) Header search: clipping fixes + alignment
   Audit: form overflow hidden + button clipped.
------------------------------------------------------------------ */
header.site-header form.search-form{
  overflow: visible !important;
}

header.site-header form.search-form *{
  box-sizing: border-box;
}

header.site-header form.search-form input.search-field{
  line-height: 1.2;
}

header.site-header form.search-form button.search-submit{
  overflow: visible !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ------------------------------------------------------------------
   4) Cards (services/testimonials): prevent text clipping
------------------------------------------------------------------ */
main.container > section.services .card,
main.container > section.testimonials .card{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0;
}

main.container > section.services .row,
main.container > section.testimonials .row{
  align-items: stretch;
}

/* ------------------------------------------------------------------
   5) Footer: contrast + link affordance + touch targets + overflow
   Audit: low-text-contrast + link-not-visually-distinct + touch target.
------------------------------------------------------------------ */
footer.site-footer{
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* contrast: make sure footer text/links aren't near-white on near-white bg */
footer.site-footer.gn-fix-footer-contrast{
  color: #0b1220 !important;
}

footer.site-footer.gn-fix-footer-contrast a{
  color: #0b1220 !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

footer.site-footer.gn-fix-footer-contrast a:hover,
footer.site-footer.gn-fix-footer-contrast a:focus-visible{
  text-decoration-color: currentColor;
}

/* make footer nav/social easier to tap/click */
footer.site-footer .footer-links a,
footer.site-footer .footer-social a{
  display: inline-flex;
  align-items: center;
  min-height: var(--gn-min-touch-target);
  padding: var(--gn-min-touch-target-pad-y) var(--gn-min-touch-target-pad-x);
  border-radius: 10px;
}

/* keep lists from adding weird spacing that reduces tap area */
footer.site-footer .footer-links li{
  margin: 0;
}

/* ------------------------------------------------------------------
   6) WP Admin Bar (touch targets + stability)
------------------------------------------------------------------ */
body.admin-bar #wpadminbar{
  min-height: 32px;
}

body.admin-bar #wpadminbar #wp-toolbar{
  min-height: 32px;
}

body.admin-bar #wpadminbar .ab-item,
body.admin-bar #wpadminbar a.ab-item{
  min-height: var(--gn-min-touch-target);
  padding-top: 4px;
  padding-bottom: 4px;
}

/* keep icons/labels centered */
body.admin-bar #wpadminbar .ab-icon,
body.admin-bar #wpadminbar .ab-label{
  line-height: 1.2;
}