/* Grass-Fed Essentials responsive safety layer
 * Purpose: preserve the existing design system while preventing layout overflow and
 * improving touch geometry across modern phones, tablets, laptops and large desktops.
 */
html{box-sizing:border-box;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
*,*::before,*::after{box-sizing:inherit}
body{min-width:0;max-width:100%;overflow-x:hidden;overflow-x:clip}
main,header,footer,nav,section,article,aside{min-width:0}
img,picture,video,canvas{max-width:100%}
img{height:auto}
iframe,embed,object{max-width:100%}
svg{max-width:100%}
pre,code{overflow-wrap:anywhere}
pre{max-width:100%;overflow:auto}
table{max-width:100%}
input,select,textarea,button{max-width:100%}
textarea{resize:vertical}
:where(h1,h2,h3,h4,p,li,a,span){overflow-wrap:break-word}

/* Keep keyboard focus visible even when inline component styles vary. */
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #3d5c49!important;outline-offset:3px}

/* Prevent embedded card and hero media from creating a horizontal scrollbar. */
[style*="aspect-ratio"]{max-width:100%}
[style*="grid-template-columns"]>*{min-width:0}
[style*="display:flex"]>*{min-width:0}



/* Responsive typography and text flow. */
:where(h1,h2,h3,h4){text-wrap:balance;word-break:normal;overflow-wrap:normal}
:where(p,li){text-wrap:pretty;word-break:normal;overflow-wrap:break-word}
:where(a,button){line-height:1.35}
:where(a,button)[style*="letter-spacing"]{text-wrap:balance}

/* Homepage service line: keep each service name intact and use an intentional 2x2 layout. */
.gfe-hero-service-line{
  display:grid;
  grid-template-columns:max-content max-content;
  gap:8px 24px;
  align-items:center;
  width:max-content;
  max-width:100%;
  color:#5d685f;
  font-family:'Engravers Gothic','Julius Sans One',sans-serif;
  font-size:clamp(10px,.78vw,11px);
  letter-spacing:clamp(.12em,.28vw,.18em);
  line-height:1.45;
}
.gfe-hero-service-line>span{display:inline-flex;align-items:center;white-space:nowrap;min-width:0}
.gfe-hero-service-line>span:nth-child(even)::before{content:'·';color:#8eb79e;display:inline-block;margin-right:.9em}

/* Compact tablets keep the same two-column rhythm but use the available width safely. */
@media (max-width:1120px){
  .gfe-hero-service-line{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:8px 18px;
    font-size:10.5px;
    letter-spacing:.15em;
  }
  .gfe-hero-service-line>span{white-space:normal}
}

/* Phones: one item per row guarantees no clipped or orphaned labels. */
@media (max-width:520px){
  .gfe-hero-service-line{grid-template-columns:1fr;gap:7px;font-size:10.5px;letter-spacing:.14em}
  .gfe-hero-service-line>span{position:relative;padding-left:13px;white-space:normal}
  .gfe-hero-service-line>span::before{content:''!important;position:absolute;left:0;top:.52em;width:4px;height:4px;border-radius:50%;background:#8eb79e;margin:0!important}
}

/* Keep decorative oil spheres from competing with small-screen text. */
@media (max-width:900px){
  .gfe-oil-bg{opacity:.30!important}
}
@media (max-width:520px){
  .gfe-oil-bg{opacity:.20!important}
}

/* Wide desktop: keep reading content comfortable rather than stretching endlessly. */
@media (min-width:1600px){
  body{font-size:16px}
}

/* Tablet and compact laptop. */
@media (max-width:1120px){
  #gfeh-links{display:none!important}
  #gfeh-burger{display:inline-flex!important}
  header nav{gap:14px!important}
}

/* Phones and portrait tablets. */
@media (max-width:767px){
  body{font-size:15px}
  h1{line-height:1.12!important}
  h2{line-height:1.22!important}
  p{line-height:1.68}
  main{padding-bottom:76px}

  /* Prevent iOS zoom and keep form copy legible. */
  input,select,textarea{font-size:16px!important}
  button,a[role="button"]{max-width:100%;white-space:normal;text-align:center}

  /* Make common button geometry fit 320px devices without changing brand styling. */
  a[style*="padding:16px 32px"],button[style*="padding:16px 32px"]{
    padding:14px 20px!important;
    min-height:48px!important;
  }
  a[style*="padding:12px 22px"],button[style*="padding:12px 22px"]{
    padding:11px 16px!important;
  }

  /* Cards retain breathing room on narrow screens. */
  [style*="padding:32px"][style*="border-radius:16px"],
  [style*="padding:28px"][style*="border-radius:16px"]{
    padding:22px!important;
  }

  /* Tables are usable rather than forcing the whole page wider. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Touch targets. */
  :where(button,input[type="button"],input[type="submit"],summary){min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-width:22px;min-height:22px}

  /* Footer columns and action rows are allowed to wrap cleanly. */
  footer [style*="display:flex"],main [style*="display:flex"]{row-gap:12px}
}

/* Small phones, including 320px layouts. */
@media (max-width:420px){
  body{font-size:14.5px}
  header>div:first-child{padding-left:14px!important;padding-right:14px!important}
  header nav{padding-left:14px!important;padding-right:14px!important}
  #gfeh-burger{padding:10px 14px!important;min-height:44px!important}
  #gfeh-mobile-menu [style*="width:min(360px,92vw)"]{width:min(340px,94vw)!important;padding-left:18px!important;padding-right:18px!important}
  h1{font-size:clamp(28px,9.2vw,36px)!important}
  h2{font-size:clamp(22px,7.2vw,30px)!important}
  [style*="letter-spacing:0.28em"],[style*="letter-spacing:0.24em"]{letter-spacing:.18em!important}
  [style*="padding:clamp(20px,4vw,48px)"]{padding-left:16px!important;padding-right:16px!important}
}

/* Extremely narrow legacy phones. */
@media (max-width:359px){
  h1{font-size:27px!important}
  h2{font-size:22px!important}
  #gfeh-burger{font-size:9.5px!important;letter-spacing:.12em!important}
  a[style*="letter-spacing:0.16em"],button[style*="letter-spacing:0.16em"]{letter-spacing:.11em!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}