/**
 * GraceHola global components - header, mobile drawer, footer (child theme)
 * ------------------------------------------------------------------------
 * Loaded on every front-end page (see functions.php). Everything here is
 * scoped to body.gh-global and to #gh-header / #gh-drawer / #gh-footer, so
 * it cannot touch page content. Homepage-only styling stays in gh-v4.css
 * (body.gh-v4, page IDs from gh_v4_pages()).
 * Contents: 1) header/footer line icons  2) drawer states  3) mobile gutter
 *           4) drawer link treatment  5) reduced motion
 * The active-page underline is emitted per page by functions.php (inline CSS
 * keyed on the page URL), so it is correct before any JavaScript runs.
 */

/* 1) LINE ICONS (header toggle/close, footer contact + social) ---------------- */

body.gh-global :is(#gh-header,#gh-drawer,#gh-footer) [data-gh-icon]{position:relative}
body.gh-global :is(#gh-header,#gh-drawer,#gh-footer) a[data-gh-icon]::before{content:"";display:inline-block;flex:none;width:18px;height:18px;margin-inline-end:8px;background-color:currentColor;-webkit-mask:var(--gh-ico) center/contain no-repeat;mask:var(--gh-ico) center/contain no-repeat}
body.gh-global [data-gh-icon="close"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSA1bDE0IDE0TTE5IDVMNSAxOSIvPjwvc3ZnPg==")}
body.gh-global [data-gh-icon="menu"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNCA3aDE2TTQgMTJoMTZNNCAxN2gxMCIvPjwvc3ZnPg==")}
body.gh-global [data-gh-icon="mail"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI1IiB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PHBhdGggZD0iTTMgN2w5IDYgOS02Ii8+PC9zdmc+")}
body.gh-global [data-gh-icon="phone"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSA0aDRsMiA1LTIuNTAwIDEuNTAwYTExIDExIDAgMCAwIDUgNUwxNSAxM2w1IDJ2NGEyIDIgMCAwIDEtMiAyQTE2IDE2IDAgMCAxIDMgNmEyIDIgMCAwIDEgMi0yeiIvPjwvc3ZnPg==")}
body.gh-global [data-gh-icon="facebook"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEzLjUgMjF2LTcuNWgyLjZsLjQtM2gtM1Y4LjYwMGMwLS45LjMtMS41MDAgMS42MDAtMS41MDBoMS41MDBWNC40MDBjLS4zIDAtMS4yMDAtLjEtMi4yMDAtLjEtMi4zMDAgMC0zLjkwMCAxLjQwMC0zLjkwMCA0djIuMjAwSDh2M2gyLjUwMFYyMXoiLz48L3N2Zz4=")}
body.gh-global [data-gh-icon="youtube"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA1aDEyYTQgNCAwIDAgMSA0IDR2NmE0IDQgMCAwIDEtNCA0SDZhNCA0IDAgMCAxLTQtNFY5YTQgNCAwIDAgMSA0LTR6bTQgNHY2bDUuMjAwLTN6Ii8+PC9zdmc+")}
body.gh-global [data-gh-icon="x"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE3LjUwMCAzaDNsLTYuNjAwIDcuNjAwTDIxLjYwMCAyMWgtNmwtNC43MDAtNi4yMDBMNS41MDAgMjFoLTNsNy04LjEwMEwyLjIwMCAzaDYuMjAwbDQuMjAwIDUuNzAwem0tMSAxNi4yMDBoMS43MDBMNy40MDAgNC43MDBINS42MDB6Ii8+PC9zdmc+")}
body.gh-global [data-gh-icon="instagram"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzLjUwMCIgeT0iMy41MDAiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgcng9IjUiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0IiBmaWxsPSJub25lIi8+PGNpcmNsZSBjeD0iMTcuMjAwIiBjeT0iNi44MDAiIHI9IjEiIHN0cm9rZT0ibm9uZSIvPjwvc3ZnPg==")}
body.gh-global [data-gh-icon="linkedin"]{--gh-ico:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQuNTAwIDloMy41MDB2MTFINC41MDB6TTYuMjUwIDMuNTAwYTIgMiAwIDEgMSAwIDQgMiAyIDAgMCAxIDAtNHpNMTAgOWgzLjMwMHYxLjUwMGMuNS0xIDEuODAwLTEuODAwIDMuNTAwLTEuODAwIDMuNDAwIDAgNC4yMDAgMi4yMDAgNC4yMDAgNS4xMDBWMjBoLTMuNTAwdi01LjQwMGMwLTEuMzAwIDAtMy0xLjgwMC0zcy0yLjEwMCAxLjQwMC0yLjEwMCAyLjkwMFYyMEgxMHoiLz48L3N2Zz4=")}
body.gh-global :is(#gh-header,#gh-drawer,#gh-footer) a[data-gh-social]::before{width:20px;height:20px;margin:0}

/* 2) HEADER DRAWER STATES ---------------------------------------------------- */
body.gh-global #gh-drawer.is-open{transform:translateX(0);visibility:visible}
body.gh-global #gh-drawer-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
body.gh-global.gh-drawer-open{overflow:hidden}
@media (min-width:1025px){body.gh-global #gh-drawer,body.gh-global #gh-drawer-overlay{display:none}}

/* 3) MOBILE GUTTER / SECTION RHYTHM for the global components ---------------- */
@media (max-width:767px){
  body.gh-global :is(#gh-header,#gh-drawer,#gh-footer){--gh-gutter:24px;--gh-section-y:64px}
}
@media (max-width:374px){
  body.gh-global :is(#gh-header,#gh-drawer,#gh-footer){--gh-gutter:20px}
}

/* 4) DRAWER LINKS: short gold underline on the active page only; no full-row hover */
@media (max-width:767px){
  body.gh-global #gh-drawer .gh-navlink{color:#fff}
  body.gh-global #gh-drawer .gh-navlink::after{inset-inline-start:0;inset-inline-end:auto;width:36px;inset-block-end:10px;transform:scaleX(0)}
  body.gh-global #gh-drawer .gh-navlink:hover{color:#fff}
  body.gh-global #gh-drawer .gh-navlink:hover::after{transform:scaleX(0)}
  body.gh-global #gh-drawer .gh-navlink:focus-visible{outline:3px solid var(--gh-gold,#F3C10C);outline-offset:-3px}
}
@media (max-width:1024px){
  body.gh-global #gh-drawer .gh-navlink{color:#fff}
  body.gh-global #gh-drawer .gh-navlink::after{inset-inline-start:0;inset-inline-end:auto;width:36px;transform:scaleX(0)}
  body.gh-global #gh-drawer .gh-navlink:hover{color:#fff}
  body.gh-global #gh-drawer .gh-navlink:hover::after{transform:scaleX(0)}
}

/* 5) REDUCED MOTION ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.gh-global #gh-drawer,body.gh-global #gh-drawer-overlay{transition:none}
}