/*
 * mstyles.css — List Dakota Home Page Styles
 * Brand colors: #43789B (primary blue) · #222222 (dark)
 * Font: Open Sans (Bunny Fonts)
 */

/* CSS CUSTOM PROPERTIES */
:root {
    /* Brand */
    --color-primary:        #43789B;
    --color-primary-dark:   #315d7c;
    --color-primary-light:  #5a94b8;
    --color-primary-xlight: #e8f2f8;
    --color-dark:           #222222;
    --color-dark-2:         #333333;
    --color-mid:            #4a4a4a;
    --color-light:          #f5f7fa;
    --color-white:          #ffffff;
    --color-border:         #dde4ea;
    --color-accent:         #2e7a6c;   /* teal green — CTAs */
    --color-accent-dark:    #246058;

    /* Typography */
    --font-base:    'Open Sans', sans-serif;
    --text-xs:      0.875rem;
    --text-sm:      1rem;
    --text-base:    1.0625rem;
    --text-lg:      1.125rem;
    --text-xl:      1.25rem;
    --text-2xl:     1.5rem;
    --text-3xl:     1.875rem;
    --text-4xl:     2.25rem;
    --text-5xl:     3rem;
    --fw-normal:    400;
    --fw-semibold:  600;
    --fw-bold:      700;
    --lh-tight:     1.2;
    --lh-base:      1.6;

    /* Layout */
    --radius-sm:    4px;
    --radius:       8px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
    --shadow:       0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.14);
    --transition:   0.2s ease;

    /* Header */
    --header-height: 88px;
}

/* BASE */
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family:    var(--font-base);
    font-size:      var(--text-base);
    line-height:    var(--lh-base);
    color:          var(--color-dark);
    background:     var(--color-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color:           var(--color-primary);
    text-decoration: none;
    transition:      color var(--transition);
}
a:hover, a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}
a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-weight:  var(--fw-bold);
    line-height:  var(--lh-tight);
    color:        var(--color-dark);
    margin-top:   0;
    margin-bottom: 0.5em;
}

p { margin-top: 0; }

address { font-style: normal; line-height: var(--lh-base); }

/* SKIP LINK (accessibility) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: var(--fw-semibold);
    z-index: 9999;
    text-decoration: none;
    transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* HEADER & NAV */
.site-header {
    background:  var(--color-white);
    border-bottom: 2px solid var(--color-primary-xlight);
    height:      var(--header-height);
    display:     flex;
    align-items: center;
    position:    sticky;
    top: 0;
    z-index:     100;
    box-shadow:  var(--shadow-sm);
}

.site-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    width:           100%;
}

.site-logo {
    height:    58px;
    width:     auto;
    display:   block;
}

.nav-menu {
    display:    flex;
    align-items: center;
    gap:         0.25rem;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.nav-menu a {
    display:       block;
    padding:       0.5rem 0.85rem;
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    color:         var(--color-dark-2);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition:    background var(--transition), color var(--transition);
}
.nav-menu a:hover,
.nav-menu a:focus {
    background: var(--color-primary-xlight);
    color:      var(--color-primary);
    text-decoration: none;
}
.nav-menu a[aria-current="page"] {
    background:  var(--color-primary);
    color:       var(--color-white);
    text-decoration: none;
}

/* Mobile nav toggle */
.nav-toggle {
    display:         none;
    flex-direction:  column;
    gap:             5px;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         6px;
    border-radius:   var(--radius-sm);
}
.nav-toggle-bar {
    width:  26px;
    height: 3px;
    background:    var(--color-dark);
    border-radius: 2px;
    display:       block;
    transition:    transform var(--transition), opacity var(--transition);
}

@media (max-width: 840px) {
    .nav-toggle { display: flex; }
    .nav-menu {
        display:        none;
        flex-direction: column;
        align-items:    stretch;
        position:       absolute;
        top:            var(--header-height);
        left: 0; right: 0;
        background:     var(--color-white);
        padding:        1rem;
        border-bottom:  2px solid var(--color-border);
        box-shadow:     var(--shadow);
        gap:            0.25rem;
        z-index:        99;
    }
    .nav-menu.is-open { display: flex; }
    .nav-menu a { font-size: var(--text-base); padding: 0.75rem 1rem; }
    .nav-contact { margin-top: 0.5rem; }
}

/* BUTTONS */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.6rem 1.25rem;
    font-family:     var(--font-base);
    font-size:       var(--text-sm);
    font-weight:     var(--fw-semibold);
    border-radius:   var(--radius);
    border:          2px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--transition), color var(--transition),
                     border-color var(--transition), box-shadow var(--transition);
    white-space:     nowrap;
}
.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

.btn-primary {
    background:   var(--color-primary);
    color:        var(--color-white);
    border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background:   var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color:        var(--color-white);
    text-decoration: none;
}

.btn-accent {
    background:   var(--color-accent);
    color:        var(--color-white);
    border-color: var(--color-accent);
}
.btn-accent:hover, .btn-accent:focus {
    background:   var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color:        var(--color-white);
    text-decoration: none;
}

.btn-outline {
    background:   transparent;
    color:        var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover, .btn-outline:focus {
    background:   var(--color-primary);
    color:        var(--color-white);
    text-decoration: none;
}

.btn-outline-nav {
    background:   transparent;
    color:        var(--color-primary);
    border-color: var(--color-primary);
    padding:      0.45rem 1rem;
    font-size:    var(--text-sm);
    border-radius: var(--radius);
    border-width: 2px;
    font-weight:  var(--fw-semibold);
    text-decoration: none;
    display:      inline-block;
    transition:   background var(--transition), color var(--transition);
}
.btn-outline-nav:hover, .btn-outline-nav:focus {
    background: var(--color-primary);
    color:      var(--color-white);
    text-decoration: none;
}

.btn-secondary {
    background:   var(--color-light);
    color:        var(--color-dark);
    border-color: var(--color-border);
}
.btn-secondary:hover, .btn-secondary:focus {
    background:   var(--color-primary-xlight);
    border-color: var(--color-primary);
    color:        var(--color-primary);
    text-decoration: none;
}

.btn-lg { padding: 0.85rem 2rem; font-size: var(--text-base); }
.btn-sm { padding: 0.4rem 0.9rem; font-size: var(--text-xs); }

.btn-text-link {
    background:      none;
    border:          none;
    color:           var(--color-primary);
    font-family:     var(--font-base);
    font-size:       var(--text-sm);
    font-weight:     var(--fw-semibold);
    cursor:          pointer;
    padding:         0;
    text-decoration: underline;
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
}
.btn-text-link:hover { color: var(--color-primary-dark); }

/* HERO / TAG WRAPPER (home page) */
/* ─── SWAP IMAGE: change the url() value below to your own image path ───
   Recommended image ratio: 16:9 or wider (e.g. 1600×900px minimum).
   Wider/panoramic images (21:9) also work great. Landscape only.
   The overlay will cover it so high detail isn't critical — scenic
   landscapes, open skies, fields, etc. work best. ─── */
.hero {
    background:  url('../images/header-back/gwynne-looking-at-website.webp') center center / cover no-repeat;
    color:       var(--color-white);
    padding:     5rem 1.25rem 4.5rem;
    text-align:  center;
    position:    relative;
    overflow:    hidden;
}
.hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(30,61,84,.88);
    pointer-events: none;
}
.hero__content { position: relative; z-index: 1; }
.hero h1 {
    font-size:     clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color:         var(--color-white);
    margin-bottom: 1rem;
    text-shadow:   0 2px 12px rgba(0,0,0,.35);
}
.hero p {
    font-size:     clamp(var(--text-base), 2vw, var(--text-xl));
    max-width:     640px;
    margin-inline: auto;
    margin-bottom: 2rem;
    color:         var(--color-white);
}
.hero__actions {
    display:         flex;
    gap:             1rem;
    justify-content: center;
    flex-wrap:       wrap;
}

.page-banner {
    background:  url('../images/header-back/sub-back.webp') center center / cover no-repeat;
    color:       var(--color-white);
    padding:     3rem 1.25rem;
    text-align:  center;
    position:    relative;
    overflow:    hidden;
}
.page-banner::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(30,61,84,.88);
    pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 {
    color:     var(--color-white);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    margin:    0;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.page-banner p {
    color:         var(--color-white);
    font-size:     var(--text-lg);
    max-width:     560px;
    margin:        0.75rem auto 0;
    text-shadow:   0 1px 6px rgba(0,0,0,.4);
}
.section {
    padding-block: 3.5rem;
}
.section--alt {
    background: var(--color-light);
}
.section--dark {
    background: var(--color-dark);
    color:      var(--color-white);
}
.section-header {
    text-align:    center;
    margin-bottom: 2.5rem;
}
.section-header h2 {
    font-size:     clamp(var(--text-2xl), 3vw, var(--text-3xl));
    margin-bottom: 0.5rem;
}
.section-header p {
    color:         var(--color-mid);
    font-size:     var(--text-lg);
    max-width:     560px;
    margin-inline: auto;
    margin-bottom: 0;
}
.section-footer {
    text-align:  center;
    margin-top:  2.5rem;
}

/* BUSINESS CARDS */
.biz-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           1rem;
    box-shadow:    var(--shadow-sm);
    transition:    box-shadow var(--transition), transform var(--transition);
    height:        100%;
}
.biz-card:hover {
    box-shadow: var(--shadow);
    transform:  translateY(-2px);
}
.biz-card__logo {
    text-align: center;
}
.biz-card__logo img {
    max-height: 150px;
    width:      auto;
    margin:     0 auto;
    object-fit: contain;
}
.biz-card__name {
    font-size:     var(--text-lg);
    margin-bottom: 0.25rem;
}
.biz-card__tagline {
    color:       var(--color-mid);
    font-size:   var(--text-sm);
    margin-top:  0;
}
.biz-card__addresses {
    font-size:  var(--text-sm);
    color:      var(--color-dark-2);
}
.biz-card__address {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}
.biz-card__address:last-of-type { border-bottom: none; margin-bottom: 0; }
.addr-label {
    display:     block;
    font-weight: var(--fw-semibold);
    color:       var(--color-primary);
    font-size:   var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
}
.addr-detail {
    display:     inline-flex;
    align-items: center;
    gap:         0.35rem;
    color:       var(--color-mid);
    font-size:   var(--text-sm);
}
.addr-detail a { color: var(--color-primary); }

.all-addresses {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--color-border);
}

.biz-card__contact {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   var(--text-sm);
    color:       var(--color-dark-2);
    margin:      0.15rem 0;
}
.biz-card__contact i { color: var(--color-primary); flex-shrink: 0; }

.biz-card__social {
    display:    flex;
    gap:        0.6rem;
    flex-wrap:  wrap;
    margin-top: 0.25rem;
}
.biz-card__social a {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--color-primary-xlight);
    color:           var(--color-primary);
    font-size:       var(--text-sm);
    transition:      background var(--transition), color var(--transition);
}
.biz-card__social a:hover {
    background:      var(--color-primary);
    color:           var(--color-white);
    text-decoration: none;
}

.biz-card__cats {
    font-size:  var(--text-sm);
    color:      var(--color-mid);
    margin:     0.6rem 0 0;
    flex:       1;
}
.biz-card__cats a { color: var(--color-primary); }

.biz-card__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
.biz-card__actions .btn { font-size: var(--text-sm); padding: 0.4rem 0.8rem; }

/* DEAL / COUPON CARDS */
.deal-card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-top:    4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0.85rem;
    box-shadow:    var(--shadow-sm);
    text-align:    center;
    height:        100%;
    transition:    box-shadow var(--transition);
}
.deal-card:hover { box-shadow: var(--shadow); }
.deal-card__logo img {
    max-height:    150px;
    width:         auto;
    margin:        0 auto;
    object-fit:    contain;
}
.deal-card__offer {
    font-size:   var(--text-lg);
    font-weight: var(--fw-bold);
    color:       var(--color-dark);
    line-height: var(--lh-tight);
}
.deal-card__offer strong { color: var(--color-accent); }
.deal-card__biz-name {
    font-size:   var(--text-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-dark-2);
    margin:      0;
}
.deal-card__coupon-code {
    display:       inline-block;
    background:    var(--color-primary-xlight);
    border:        1px dashed var(--color-primary);
    border-radius: var(--radius-sm);
    padding:       0.25rem 0.75rem;
    font-size:     var(--text-sm);
    font-weight:   var(--fw-bold);
    color:         var(--color-primary);
    letter-spacing: 0.08em;
}
.deal-card__address {
    font-style:  normal;
    font-size:   var(--text-sm);
    color:       var(--color-dark-2);
    line-height: 1.6;
}
.deal-card__expiry {
    font-size: var(--text-xs);
    color:     var(--color-mid);
    display:   flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0;
}
.deal-card__disclaimer {
    font-size:  var(--text-xs);
    color:      var(--color-mid);
    margin-top: auto;
    line-height: 1.5;
}
.deal-card__actions {
    display:         flex;
    gap:             0.5rem;
    justify-content: center;
    flex-wrap:       wrap;
}

/* CATEGORY CARDS (directory index grid) */
.cat-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         1.75rem 1rem;
    background:      var(--color-white);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-lg);
    text-decoration: none;
    color:           var(--color-dark);
    gap:             0.75rem;
    transition:      background var(--transition), border-color var(--transition),
                     transform var(--transition), box-shadow var(--transition);
    box-shadow:      var(--shadow-sm);
}
.cat-card:hover, .cat-card:focus {
    background:      var(--color-primary-xlight);
    border-color:    var(--color-primary);
    color:           var(--color-primary-dark);
    transform:       translateY(-3px);
    box-shadow:      var(--shadow);
    text-decoration: none;
}
.cat-card i {
    font-size: 2.5rem;
    color:     var(--color-primary);
    transition: color var(--transition);
}
.cat-card:hover i { color: var(--color-primary-dark); }
.cat-card h3 {
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    margin:        0;
    line-height:   var(--lh-tight);
}

/* BREADCRUMB */
.breadcrumb-nav {
    background:    var(--color-light);
    border-bottom: 1px solid var(--color-border);
    padding-block: 0.6rem;
}
.breadcrumb {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.3rem;
    list-style:  none;
    margin:      0;
    padding:     0;
    font-size:   var(--text-sm);
}
.breadcrumb li { display: flex; align-items: center; gap: 0.3rem; }
.breadcrumb li:not(:last-child)::after {
    content: '/';
    color:   var(--color-mid);
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-mid); }

/* AD BLOCKS */
.ad-block {
    text-align:  center;
    padding:     2rem 0;
    border-top:  1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-block: 2rem;
}
.ad-block a {
    display: block;
    margin:  0 auto;
}
.ad-label {
    font-size:      var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-mid);
    margin-bottom:  0.5rem;
}
.ad-image {
    display:       block;
    width:         100%;
    height:        auto;
    margin:        0 auto;
    border-radius: var(--radius-sm);
}
.ad-block--banner a    { max-width: 1100px; }
.ad-block--banner .ad-image { max-width: 1100px; }
.ad-block--tile a      { max-width: 300px; }
.ad-block--tile .ad-image { max-width: 300px; }

/* FOOTER */
.site-footer {
    background:  var(--color-dark);
    color:       rgba(255,255,255,.8);
    padding-block: 3rem;
    margin-top:  4rem;
}
.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap:                   2rem;
    padding-bottom:        2rem;
    border-bottom:         1px solid rgba(255,255,255,.1);
    margin-bottom:         1.5rem;
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-logo { max-height: 100px; width: auto; margin-bottom: 0.75rem; }
@media (max-width: 640px) { .footer-logo { max-height: 130px; } }
.footer-tagline { font-size: var(--text-sm); margin: 0; color: rgba(255,255,255,.88); }

.footer-nav-heading {
    color:          var(--color-white);
    font-size:      var(--text-sm);
    font-weight:    var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  0.75rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 0.4rem; }
.footer-nav a { color: rgba(255,255,255,.9); font-size: var(--text-base); text-decoration: none; }
.footer-nav a:hover { color: var(--color-white); text-decoration: underline; }

.footer-bottom { font-size: var(--text-sm); color: rgba(255,255,255,.85); text-align: center; line-height: var(--lh-base); }

/* PAGE TITLE BANNER (hero-lite for sub pages — defined here too
   so header/footer share identical chrome) */
.page-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color:      var(--color-white);
    padding:    2.5rem 1.25rem;
    text-align: center;
}
.page-banner h1 {
    color:     var(--color-white);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    margin:    0;
}

/* UTILITIES */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.text-muted  { color: var(--color-mid); }
.text-accent { color: var(--color-accent); }
.text-primary{ color: var(--color-primary); }
.fw-bold     { font-weight: var(--fw-bold); }
.no-margin   { margin: 0 !important; }

/* BUSINESS CARD — address grid (2 side by side) */
.biz-card__addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.biz-card__addr-grid .biz-card__address {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ADDRESS MODAL */
.addr-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.6);
    z-index:    600;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    1rem;
}
.addr-modal-overlay[aria-hidden="true"] { display: none; }
.addr-modal {
    background:    var(--color-white);
    border-radius: var(--radius-xl);
    width:         100%;
    max-width:     700px;
    max-height:    85vh;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    box-shadow:    var(--shadow-lg);
    outline:       none;
}
.addr-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.25rem 1.5rem;
    border-bottom:   1px solid var(--color-border);
    flex-shrink:     0;
}
.addr-modal__title {
    font-size:   var(--text-xl);
    margin:      0;
    flex:        1;
}
.addr-modal__close {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     1.25rem;
    color:         var(--color-mid);
    padding:       0.4rem;
    border-radius: var(--radius-sm);
    line-height:   1;
    flex-shrink:   0;
    transition:    color var(--transition), background var(--transition);
}
.addr-modal__close:hover  { color: var(--color-dark); background: var(--color-light); }
.addr-modal__close:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.addr-modal__body  { padding: 1.5rem; overflow-y: auto; }
.addr-modal__grid  {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}
.addr-modal__address {
    font-style:  normal;
    font-size:   var(--text-sm);
    line-height: 1.6;
    color:       var(--color-dark-2);
    background:  var(--color-light);
    border-radius: var(--radius);
    padding:     0.85rem 1rem;
}

/* WCAG — placeholder text must meet 4.5:1 contrast */
::placeholder { color: #595959; opacity: 1; }

/* DEALS — multiple address grid */
.deal-card__addresses { margin-bottom: 0.5rem; }
.deal-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}
.deal-addr-grid .deal-card__address {
    background: var(--color-light);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}