/*
Theme Name: On The Go Delivery
Theme URI: https://otgdelivery.ca/
Author: OpenAI for On The Go Delivery
Description: Modern responsive WordPress theme for On The Go Delivery & Courier in Norfolk and Haldimand County, with Ontario-wide rush courier service.
Version: 2.1.2-mobile-v4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: otg-delivery
*/
:root{--navy:#062d4d;--blue:#087aa7;--teal:#08a0bb;--green:#4e9824;--green2:#6ebc2c;--ink:#102438;--muted:#526474;--soft:#f5f8fa;--line:#dbe4ea;--white:#fff;--gold:#b89042;--shadow:0 16px 45px rgba(9,45,72,.13);--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.55}img{max-width:100%;height:auto}a{color:inherit}.wrap{width:min(1220px,calc(100% - 38px));margin:auto}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:9999}.topbar{background:linear-gradient(90deg,#087ca8,#06365e);color:#fff;font-size:.92rem}.topbar .wrap{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.topbar a{text-decoration:none}.site-header{background:#fff;border-bottom:1px solid #e9eef2;position:sticky;top:0;z-index:80;box-shadow:0 3px 15px rgba(6,45,77,.05)}.nav{min-height:118px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}.brand img,.custom-logo{width:min(390px,34vw);height:auto;display:block}.menu{display:flex;align-items:center;gap:28px}.menu a{text-decoration:none;font-weight:700;font-size:.96rem}.menu a:hover{color:var(--green)}.nav-actions{display:flex;align-items:center;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 19px;border-radius:9px;font-weight:850;text-decoration:none;border:2px solid transparent;transition:.18s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(180deg,#62a92e,#4d9021);color:#fff;box-shadow:0 8px 22px rgba(78,152,36,.22)}.btn-outline{border-color:var(--blue);color:var(--blue);background:#fff}.mobile-toggle{display:none;background:none;border:0;font-size:1.8rem}.hero{background:#edf8fd;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0;display:block!important}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(242,249,252,.99) 0%,rgba(242,249,252,.97) 37%,rgba(242,249,252,.78) 50%,rgba(242,249,252,.18) 66%,rgba(242,249,252,0) 78%);z-index:0}.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9));z-index:0}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;min-height:585px;padding:48px 0}.hero-copy h1{font-size:clamp(3rem,5.7vw,5.6rem);letter-spacing:-.055em;line-height:.96;text-transform:uppercase;margin:0 0 20px;font-weight:950}.hero-copy h1 span{display:block;color:var(--green)}.hero-copy .lead{font-size:1.15rem;max-width:660px}.coverage{display:grid;gap:12px;margin:22px 0;font-size:1.04rem}.coverage-row{display:flex;align-items:flex-start;gap:10px}.dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900;flex:0 0 30px}.coverage strong{color:var(--blue)}.coverage .local strong{color:var(--green)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-visual{position:relative;min-height:470px;display:block}.hero-visual>*{display:none!important}.vehicle-stage{position:absolute;left:4%;right:0;bottom:0;height:62%;background:linear-gradient(165deg,#eef4f6,#d7e1e7);border-radius:160px 35px 30px 30px;box-shadow:inset 0 -30px 50px rgba(9,45,72,.08)}.vehicle-stage:before,.vehicle-stage:after{content:"";position:absolute;bottom:26px;background:#fff;border:5px solid #cad5db;box-shadow:var(--shadow)}.vehicle-stage:before{width:55%;height:150px;left:6%;border-radius:70px 80px 30px 30px;transform:skewX(-6deg)}.vehicle-stage:after{width:44%;height:115px;right:2%;border-radius:65px 75px 28px 28px;transform:skewX(-5deg)}.vehicle-logo{position:absolute;z-index:3;left:27%;bottom:63px;width:135px;transform:rotate(-1deg)}.vehicle-logo.second{left:auto;right:13%;bottom:54px;width:105px}.wheel{position:absolute;z-index:4;bottom:7px;width:62px;height:62px;border-radius:50%;background:#18252c;border:11px solid #73808a}.w1{left:15%}.w2{left:49%}.w3{right:28%}.w4{right:5%}.award-block{position:absolute;z-index:6;right:0;top:8px;text-align:center;width:48%}.award-block h2{margin:0;color:var(--navy);font-size:1.65rem;line-height:1;text-transform:uppercase}.award-block h2 span{display:block;color:var(--green);font-size:1.1rem;margin-top:6px}.award-block img{width:190px;margin-top:8px;filter:drop-shadow(0 8px 12px rgba(60,42,15,.15))}.services-band{position:relative;z-index:5;margin-top:-10px}.services-grid{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:var(--shadow)}.service-mini{padding:23px 18px;min-height:154px;border-right:1px solid var(--line)}.service-mini:last-child{border-right:0}.service-mini .ico{font-size:2rem}.service-mini h3{font-size:.92rem;margin:8px 0 4px;color:var(--blue);text-transform:uppercase}.service-mini:nth-child(even) h3{color:var(--green)}.service-mini p{font-size:.84rem;margin:0}.partners{padding:0 0 36px}.partner-box{border:1px solid var(--line);border-top:0;background:#fff;border-radius:0 0 14px 14px;padding:22px 26px 28px}.partner-title{text-align:center;text-transform:uppercase;color:var(--green);font-weight:950;letter-spacing:.04em;margin:0 0 20px;display:flex;align-items:center;gap:14px;justify-content:center}.partner-title:before,.partner-title:after{content:"";height:1px;background:#9db688;flex:1}.partner-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}.partner{min-height:80px;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;font-weight:900;color:#1b506b}.partner img{max-height:72px;object-fit:contain}.partner.wordmark{border:1px dashed #cad7de;border-radius:12px;background:#fbfdfe;font-size:1rem}.partner.wordmark.dark{color:#222}.partner.wordmark.green{color:#24743c}.local-band{padding:0 0 34px}.local-panel{display:grid;grid-template-columns:1.05fr .95fr .78fr;background:linear-gradient(90deg,#063b62,#074f72 48%,#063653);border-radius:12px;color:#fff;overflow:hidden}.local-copy{padding:30px}.local-copy h2{font-size:2rem;line-height:1;margin:0 0 12px;text-transform:uppercase}.local-copy p{margin:0;color:#eaf4f8}.local-copy em{display:block;margin-top:16px;color:#a8da61;font-size:1.35rem}.benefits{padding:28px;display:grid;gap:9px}.benefits span:before{content:"✓";display:inline-grid;place-items:center;width:23px;height:23px;border:1px solid #9ad55e;border-radius:50%;margin-right:9px;color:#a9dd67}.order-card,.merchant-card{margin:14px;background:#fff;color:var(--ink);border-radius:12px;padding:18px;text-align:center}.order-card h3,.merchant-card h3{margin:0 0 12px;text-transform:uppercase}.order-buttons{display:grid;gap:8px}.order-buttons a{background:var(--blue);color:#fff;text-decoration:none;padding:10px;border-radius:7px;font-weight:850}.merchant-card p{font-size:.9rem}.merchant-card .btn{background:var(--navy);color:#fff;width:100%}.section{padding:78px 0}.section-soft{background:#f4f8fa}.section-head{text-align:center;max-width:820px;margin:0 auto 38px}.section-head .eyebrow{text-transform:uppercase;color:var(--green);font-weight:900;letter-spacing:.08em}.section-head h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;margin:10px 0}.section-head p{color:var(--muted)}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.detail{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff}.detail h3{margin:0 0 8px;color:var(--blue)}.detail p{margin:0;color:var(--muted)}.business{background:linear-gradient(135deg,#f0f7fa,#f8fbfc)}.business-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px}.business-card{background:var(--navy);color:#fff;padding:34px;border-radius:20px}.business-card h2{margin-top:0;font-size:2.2rem}.business-card p{color:#dcecf4}.business-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.business-item{background:#fff;border:1px solid var(--line);padding:18px;border-radius:14px}.contact{background:var(--navy);color:#fff}.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}.contact-card{background:#fff;color:var(--ink);border-radius:18px;padding:28px}.contact-card a{color:var(--blue);font-weight:850}.site-footer{background:#04233a;color:#d9e6ed;padding:22px 0}.footer-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-grid a{color:#fff}.site-note{font-size:.83rem;color:var(--muted)}
@media(max-width:1050px){.hero-grid{grid-template-columns:1fr 1fr;min-height:520px}.hero{background-position:58% center}.services-grid{grid-template-columns:repeat(3,1fr)}.service-mini{border-bottom:1px solid var(--line)}.partner-grid{grid-template-columns:repeat(4,1fr)}.local-panel{grid-template-columns:1fr 1fr}.order-card,.merchant-card{margin:10px}.hero-visual{min-height:390px}.award-block{top:0}.nav{min-height:95px}.brand img,.custom-logo{width:300px}}
@media(max-width:820px){.hero{background-position:65% center}.hero:before{background:linear-gradient(180deg,rgba(242,249,252,.99) 0%,rgba(242,249,252,.96) 52%,rgba(242,249,252,.46) 70%,rgba(242,249,252,.05) 88%)}.hero-grid{grid-template-columns:1fr;min-height:720px;align-items:start;padding-bottom:280px}.hero-visual{display:none}.menu{display:none;position:absolute;left:18px;right:18px;top:96px;background:#fff;padding:20px;box-shadow:var(--shadow);border-radius:12px;flex-direction:column;align-items:flex-start}.menu.open{display:flex}.mobile-toggle{display:block}.nav-actions .btn-outline{display:none}.business-wrap,.contact-wrap{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr 1fr}.partner-grid{grid-template-columns:repeat(3,1fr)}.hero-copy h1{font-size:3.8rem}}
@media(max-width:620px){.hero{background-position:68% bottom;background-size:auto 62%;background-color:#edf8fd}.hero-grid{min-height:690px;padding-bottom:250px}.wrap{width:min(100% - 24px,1220px)}.topbar .wrap{padding:8px 0;justify-content:center;text-align:center}.brand img,.custom-logo{width:230px}.nav{min-height:82px;gap:10px}.nav-actions .btn-primary{display:none}.menu{top:82px}.hero-grid{padding:30px 0}.hero-copy h1{font-size:3rem}.hero-visual{min-height:330px}.award-block{width:55%}.award-block img{width:130px}.award-block h2{font-size:1.2rem}.vehicle-stage{height:58%}.vehicle-logo{width:90px}.vehicle-logo.second{width:72px}.wheel{width:45px;height:45px;border-width:8px}.services-grid{grid-template-columns:1fr 1fr}.partner-grid{grid-template-columns:1fr 1fr}.local-panel{grid-template-columns:1fr}.detail-grid,.business-list{grid-template-columns:1fr}.section{padding:58px 0}}

@media(min-width:821px){.hero:before,.hero:after{display:none}.hero-grid{min-height:auto;aspect-ratio:1536/418;padding:0}.hero-copy,.hero-visual{visibility:hidden;pointer-events:none}.hero-bg{object-fit:cover;object-position:center}}
@media(max-width:820px){.hero-bg{object-fit:cover;object-position:66% center;opacity:.28}.hero:before{z-index:1}.hero-grid{z-index:2}.hero-copy{visibility:visible}.hero-visual{display:none!important}}

/* v2.1.2-no-partners: partner section intentionally removed */
.partners, .partner-section, .partners-section, .proud-partners,
#partners, #partner-section, #partners-section { display:none !important; }


/* ==========================================================
   OTG MOBILE RESPONSIVE ENHANCEMENTS
   Keeps desktop design intact while optimizing phone/tablet.
   ========================================================== */

/* Safer global sizing */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Prevent long labels/URLs from forcing horizontal scrolling */
body, p, a, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 1024px) {
  .site-header .container,
  .topbar .container,
  .hero .container,
  .services .container,
  .business-section .container,
  .contact-section .container,
  .footer-inner,
  .site-footer .container {
    width: min(94%, 960px) !important;
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .main-nav ul,
  .site-header nav ul {
    gap: 14px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .hero {
    min-height: auto !important;
  }

  .hero-inner,
  .hero .container {
    align-items: center !important;
  }

  .service-grid,
  .services-grid,
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .business-grid,
  .footer-grid,
  .bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

/* Phones */
@media (max-width: 767px) {
  body {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Top contact strip */
  .topbar,
  .top-bar,
  .header-top {
    padding: 8px 12px !important;
  }

  .topbar .container,
  .top-bar .container,
  .header-top .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* Header / logo / navigation */
  .site-header,
  header.site-header {
    position: relative !important;
  }

  .site-header .container,
  .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .site-logo img,
  .custom-logo,
  .logo img {
    max-width: 230px !important;
    width: min(70vw, 230px) !important;
    height: auto !important;
  }

  .main-nav,
  .site-navigation,
  nav {
    width: 100% !important;
  }

  .main-nav ul,
  .site-header nav ul,
  .menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 12px !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }

  .main-nav a,
  .site-header nav a,
  .menu a {
    font-size: 14px !important;
    padding: 6px 4px !important;
    white-space: normal !important;
  }

  /* Hero */
  .hero,
  .hero-section {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .hero .container,
  .hero-inner,
  .hero-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .hero-copy,
  .hero-content,
  .hero-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 20px 20px !important;
    text-align: center !important;
    order: 1 !important;
  }

  .hero-copy h1,
  .hero-content h1,
  .hero h1 {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.04 !important;
    margin-bottom: 10px !important;
  }

  .hero-copy h2,
  .hero-content h2,
  .hero h2 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.12 !important;
  }

  .hero-copy p,
  .hero-content p,
  .hero p {
    font-size: 16px !important;
  }

  .hero-image,
  .hero-media,
  .hero-visual,
  .hero-picture {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
  }

  .hero-image img,
  .hero-media img,
  .hero-visual img,
  .hero-picture img,
  .hero img.hero-background,
  img.hero-vehicles-background {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  /* If v2.1.2 uses the image as a CSS background, show full composition */
  .hero[style*="background"],
  .hero-section[style*="background"],
  .hero-visual-bg {
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  /* Services */
  .services,
  .service-section {
    padding: 30px 16px !important;
  }

  .service-grid,
  .services-grid,
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .service-card,
  .service-item,
  .card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
  }

  /* Lower blue / information banner */
  .business-section,
  .bottom-banner,
  .local-roots,
  .site-info-band {
    padding: 30px 18px !important;
  }

  .business-grid,
  .footer-grid,
  .bottom-grid,
  .info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .business-grid > *,
  .footer-grid > *,
  .bottom-grid > *,
  .info-grid > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Touch-friendly CTA buttons */
  .button,
  .btn,
  .cta-button,
  a.button,
  .wp-block-button__link {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  .order-links .button,
  .delivery-buttons .button,
  .business-section .button,
  .bottom-banner .button {
    width: 100% !important;
    margin: 5px 0 !important;
  }

  /* Footer */
  .site-footer {
    text-align: center !important;
  }

  /* Reduce oversized spacing */
  section {
    scroll-margin-top: 10px;
  }
}

/* Extra-small phones */
@media (max-width: 420px) {
  .hero-copy,
  .hero-content,
  .hero-text {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .main-nav ul,
  .site-header nav ul,
  .menu {
    gap: 4px 8px !important;
  }

  .main-nav a,
  .site-header nav a,
  .menu a {
    font-size: 13px !important;
  }

  .service-card,
  .service-item,
  .card {
    padding: 15px !important;
  }
}


/* ==========================================================
   OTG MOBILE v2 FIXES
   1. Mobile hamburger now truly opens/closes.
   2. Menu closes above the hero instead of permanently covering it.
   3. Desktop hero banner height reduced by approximately 10%.
   ========================================================== */

/* Desktop: reduce hero banner height by 10% from the original 1536:418 ratio. */
@media (min-width: 821px) {
  .hero-grid {
    aspect-ratio: 1536 / 376 !important;
    min-height: 0 !important;
  }

  .hero-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Mobile/tablet navigation state */
@media (max-width: 820px) {
  .site-header {
    z-index: 1000 !important;
  }

  .nav {
    position: relative !important;
  }

  /* Closed state must override the earlier mobile display:flex rule. */
  .menu:not(.open) {
    display: none !important;
  }

  .menu.open {
    display: flex !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(100% + 4px) !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid #dbe4ea !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(9,45,72,.18) !important;
    z-index: 1001 !important;
  }

  .menu.open a {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    text-align: left !important;
    border-radius: 8px !important;
  }

  .menu.open a:hover,
  .menu.open a:focus {
    background: #f2f7f9 !important;
  }

  .mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1002 !important;
  }

  /* Avoid leaving an invisible menu layer over the hero. */
  .menu:not(.open) {
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .menu.open {
    pointer-events: auto !important;
    visibility: visible !important;
  }
}


/* ==========================================================
   OTG MOBILE v4 - HERO FIX
   Full-width desktop hero, no cropping, no blank centre.
   ========================================================== */

@media (min-width: 821px) {
  .hero-grid {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1536 / 418 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: fill !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* Slightly tighter desktop header, but do not alter logo proportions. */
  .site-header .container,
  .header-inner {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}