/* =======================================================================
   Rover Veterinary Care — blog theme (Steady Hands)
   REK Marketing & Design | 2026
   Paste into: ezBLOG admin → STYLE (CSS Editor). Same file for Jupiter + Reno.
   Writes to /<location>/blog/style.css; linked from the blog header.
   ======================================================================= */
    :root{
      --teal-deep:#3D6B7D;--teal-mid:#5C8A98;--teal-dark:#2D5564;--teal-darker:#1F4250;
      --seafoam:#A4D2CD;--seafoam-light:#C5E0DC;--slate:#E8E2D7;--paper:#F7F4ED;--cream:#FBF9F4;
      --ink:#1A2B33;--text-secondary:#4E5E66;--text-muted:#5C6B72;
      --border:rgba(26,43,51,.1);--border-strong:rgba(26,43,51,.18);
      --shadow-sm:0 1px 2px rgba(26,43,51,.04);
      --shadow:0 4px 12px rgba(26,43,51,.08),0 1px 3px rgba(26,43,51,.05);
      --shadow-lg:0 18px 40px -10px rgba(26,43,51,.18),0 6px 12px rgba(26,43,51,.06);
      --maxw:1160px;
    }
    #rvc *,#rvc *::before,#rvc *::after,body.rvc *{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%}
    body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);
      background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,serif;font-weight:500;line-height:1.18;
      letter-spacing:-.02em;color:var(--ink);}
    .skip-nav{position:absolute;left:-999px;top:auto;background:var(--ink);color:#fff;
      padding:.6rem 1rem;border-radius:6px;z-index:200}
    .skip-nav:focus{left:12px;top:12px}

    /* ======= HEADER — copied verbatim from rovervetcare.com (util-bar + site-header + mobile menu) ======= */
    .util-bar { background: var(--ink); color: rgba(255,255,255,0.85); font-size: 0.85rem; }
    .util-inner { max-width: 1320px; margin: 0 auto; padding: 0.55rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .util-city { display: inline-flex; align-items: center; gap: 0.55rem; }
    .util-city-current { font-weight: 600; color: white; display: inline-flex; align-items: center; gap: 0.4rem; }
    .util-city-current i { color: var(--seafoam); }
    .util-city-sep { color: rgba(255,255,255,0.3); }
    .util-city-switch { color: var(--seafoam); border-bottom: 1px solid rgba(164,210,205,0.4); padding-bottom: 1px; }
    .util-city-switch:hover { color: white; border-bottom-color: white; }
    .util-actions { display: inline-flex; align-items: center; gap: 1rem; }
    .util-phone { display: inline-flex; align-items: center; gap: 0.45rem; color: white; font-weight: 600; }
    .util-phone:hover { color: var(--seafoam); }
    .util-book { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--seafoam); color: var(--ink); padding: 0.4rem 0.85rem; border-radius: 6px; font-weight: 600; font-size: 0.82rem; }
    .util-book:hover { background: var(--seafoam-light); }
    .util-bar a.util-city-current { color: white; cursor: pointer; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
    .util-bar a.util-city-current:hover { color: var(--seafoam); border-bottom-color: rgba(164,210,205,0.5); }
    @media (max-width: 800px) { .util-inner { padding: 0.5rem 1rem; gap: 0.75rem; } .util-actions { gap: 0.5rem; } .util-phone span, .util-book { display: none; } .util-book { padding: 0.35rem 0.7rem; font-size: 0.78rem; } }

    .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 249, 244, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
    .site-header-inner { max-width: 1320px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
    .site-logo img { height: 58px; width: auto; display: block; }
    .site-nav { display: flex; gap: 0.35rem; margin-left: auto; align-items: center; }
    .nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.85rem; border-radius: 8px; font-size: 0.95rem; font-weight: 500; line-height: 1.2; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; font-family: inherit; transition: color 0.15s, background 0.15s; }
    .nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); background: rgba(26,43,51,0.04); }
    .nav-item-dropdown { position: relative; display: inline-flex; align-items: center; }
    .nav-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 280px; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px -10px rgba(26,43,51,0.18), 0 4px 12px -4px rgba(26,43,51,0.08); padding: 0.6rem; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s, transform 0.2s; pointer-events: none; z-index: 110; }
    .nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: white; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
    .nav-item-dropdown[data-open="true"] .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
    .nav-dropdown a { display: block; padding: 0.7rem 0.85rem; border-radius: 8px; transition: background 0.15s; }
    .nav-dropdown a:hover { background: var(--paper); }
    .nav-dropdown a b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; }
    .nav-dropdown a span { display: block; font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
    .nav-dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; min-width: 480px; gap: 0.15rem; }
    .nav-dropdown-grid a { padding: 0.55rem 0.75rem; font-size: 0.9rem; color: var(--text-secondary); }
    .nav-dropdown-grid a:hover { color: var(--teal-deep); background: var(--paper); }
    .nav-dropdown-grid .nav-dropdown-main { grid-column: 1 / -1; padding: 0.7rem 0.85rem; background: var(--paper); border-radius: 8px; margin-bottom: 0.4rem; }
    .nav-dropdown-grid .nav-dropdown-main b { color: var(--ink); font-weight: 600; }
    .nav-dropdown-main { padding: 0.75rem 0.85rem; background: var(--paper); border-radius: 8px; margin-bottom: 0.4rem; }
    .nav-dropdown-main b { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
    .nav-dropdown-main b i { color: var(--teal-deep); font-size: 1rem; }
    .nav-dropdown-main span { display: block; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
    .nav-dropdown-sectionhead { grid-column: 1 / -1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 0.65rem 0.85rem 0.3rem; }
    .site-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; color: var(--ink); border-radius: 8px; border: none; cursor: pointer; }
    .site-menu-btn:hover { background: rgba(26,43,51,0.04); }
    .site-menu-btn i { font-size: 1.55rem; }
    .site-header-actions { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
    .site-book { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--teal-deep); color: white; font-weight: 600; font-size: 0.92rem; padding: 0.62rem 1.05rem; border-radius: 10px; min-height: 44px; transition: background 0.15s; white-space: nowrap; }
    .site-book:hover { background: var(--teal-darker); }
    @media (max-width: 1000px) { .site-nav { display: none; } .site-book { display: none; } .site-menu-btn { display: inline-flex; } }
    @media (min-width: 1001px) { .util-book { display: none; } }

    /* ---- Mobile menu (identical to site) ---- */
    .mobile-menu { position: fixed; inset: 0; background: var(--ink); z-index: 300; padding: 5.5rem 1.75rem 2rem; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
    .mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
    .mobile-menu-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255,255,255,0.08); border-radius: 50%; color: white; cursor: pointer; border: none; }
    .mobile-menu-close i { font-size: 1.5rem; }
    .mobile-menu-logo img { height: 56px; filter: brightness(0) invert(1); opacity: 0.95; margin-bottom: 2rem; }
    .mobile-menu-links { display: flex; flex-direction: column; margin-bottom: auto; }
    .mobile-menu-links a { font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 1.5rem; color: white; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); letter-spacing: -0.015em; }
    .mobile-menu-actions { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); }
    .mobile-menu-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; padding: 1rem 1.5rem; border-radius: 12px; text-align: center; min-height: 48px; }
    .mobile-menu-actions .primary { background: var(--seafoam); color: var(--ink); }
    .mobile-menu-actions .secondary { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.3); }
    .mobile-menu-meta { margin-top: 1.25rem; font-size: 0.92rem; color: rgba(255,255,255,0.6); text-align: center; line-height: 1.6; }
    body.menu-open { overflow: hidden; }

    /* ---- Hero ---- */
    .rvc-hero{background:linear-gradient(160deg,var(--teal-deep),var(--teal-darker));
      color:#fff;text-align:center;padding:clamp(2.6rem,5.5vw,4.2rem) 1.5rem}
    .rvc-hero .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;
      font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--seafoam);
      margin-bottom:1rem}
    .rvc-hero .eyebrow::before,.rvc-hero .eyebrow::after{content:'';width:26px;height:1.5px;
      background:var(--seafoam);opacity:.7}
    .rvc-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.025em;margin:0 auto;
      max-width:20ch;text-wrap:balance}
    .rvc-hero .sub{font-size:1.08rem;color:rgba(255,255,255,.9);max-width:60ch;margin:.9rem auto 0;
      line-height:1.6}
    .rvc-hero .reviewed{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
      font-size:.82rem;color:rgba(255,255,255,.9);background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.4rem .95rem}
    .rvc-hero .reviewed b{color:#fff;font-weight:600}

    /* ---- Content wrapper ---- */
    /* Content sits on cream with dark text. The containers below come from PHP
       (index.php / create_html_file) so they always exist and self-center —
       layout never depends on a header wrapper surviving the paste. */
    .rvc-wrap{background:var(--cream);color:var(--ink);position:relative;z-index:1}
    #blog-listing.container{max-width:var(--maxw);margin:0 auto;
      padding:clamp(2.2rem,4.5vw,3.5rem) 1.5rem 2.5rem;background:var(--cream)}
    #blog-details.container{max-width:760px;margin:0 auto;
      padding:clamp(2.2rem,4.5vw,3.5rem) 1.5rem 2.5rem;background:var(--cream)}
    #blog-listing .row,#blog-details .row,#blog-listing .col-12,#blog-details .col-12{
      display:block;margin:0;padding:0;width:auto;background:transparent}

    /* ---- LISTING: flip the table to a responsive card grid ---- */
    .blog_page_heading{position:absolute!important;width:1px;height:1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap} /* SR-only: hero already says "Blog" */
    /* auto-fit: up to 3 across on desktop, 2 on tablet, 1 on phone — no overflow,
       and a short page (2-3 posts) still fills the row instead of clumping left */
    #blog_list_front,#blog_list_front tbody{display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
      gap:1.75rem;width:100%;border-collapse:collapse}
    #blog_list_front thead{display:none}
    #blog_list_front tr,#blog_list_front td{display:block;padding:0;border:0;height:100%}
    .blog_list{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;
      height:100%;display:flex;flex-direction:column;
      transition:transform .25s,box-shadow .25s,border-color .25s}
    .blog_list:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
    .blog_list .imgthumbnail_wr{order:-1;aspect-ratio:16/9;overflow:hidden;background:var(--slate);margin:0}
    .blog_list .imgthumbnail_wr img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
    .blog_list:hover .imgthumbnail_wr img{transform:scale(1.04)}
    .blog_list .main_heading{font-size:1.32rem;line-height:1.25;margin:0;padding:1.4rem 1.5rem 0}
    .blog_list .main_heading a:hover{color:var(--teal-deep)}
    .blog_list .sub_heading{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;
      letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);
      margin:0;padding:1.3rem 1.5rem 0;order:-1}
    .blog_list .sub_heading:empty{display:none}
    .blog_list > p{font-size:.97rem;color:var(--text-secondary);line-height:1.6;
      margin:0;padding:.7rem 1.5rem 0;flex:1}
    .blog-list-button{padding:1.15rem 1.5rem 1.6rem;margin-top:auto}
    .listing-button{background:var(--seafoam);color:var(--ink);font-weight:600;font-size:.9rem;
      border:0;border-radius:999px;padding:.65rem 1.35rem;cursor:pointer;transition:background .15s}
    .listing-button:hover{background:var(--seafoam-light)}
    /* card image sits above the title even though it's second in source order */
    .blog_list{display:flex}
    .blog_list .imgthumbnail_wr{order:0}
    .blog_list .sub_heading{order:1}
    .blog_list .main_heading{order:2}
    .blog_list > p{order:3}
    .blog-list-button{order:4}

    /* ---- Pagination — one centered, vertically-aligned row ---- */
    #blog-listing .text-right{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
      gap:.55rem;max-width:var(--maxw);margin:2.5rem auto 0;text-align:center}
    #blog-listing hr{flex:0 0 100%;width:100%;border:0;border-top:1px solid var(--border);margin:0 0 1.4rem}
    #blog-listing .btn-secondary{display:inline-flex;align-items:center;height:42px;box-sizing:border-box;
      background:#fff;border:1px solid var(--border-strong);color:var(--text-secondary);font-weight:600;
      padding:0 1.15rem;border-radius:10px;margin:0;line-height:1;text-decoration:none}
    #blog-listing .btn-secondary:hover{border-color:var(--teal-deep);color:var(--teal-deep)}
    #blog-listing form.d-inline-block{display:inline-flex;align-items:center;margin:0}
    #blog-listing .input-group{display:inline-flex;align-items:center;gap:.5rem;margin:0}
    #blog-listing .form-control{width:3.4rem;height:42px;box-sizing:border-box;text-align:center;
      padding:0 .5rem;line-height:1;border:1px solid var(--border-strong);border-radius:10px;font:inherit}
    #blog-listing .input-group-text{color:var(--text-muted);font-size:.9rem}
    #blog-listing input[type=submit]{height:42px;box-sizing:border-box;background:var(--teal-deep);
      color:#fff;border:0;border-radius:10px;padding:0 1.1rem;font-weight:600;cursor:pointer;line-height:1}
    #blog-listing input[type=submit]:hover{background:var(--teal-darker)}

    /* ---- SINGLE POST ---- */
    #blog-details{max-width:760px;margin:0 auto}
    #blog-details .custom_blog_html{background:transparent}
    #blog-details .sub_heading{font-family:'Inter',sans-serif;font-size:1.05rem;color:var(--text-secondary);
      margin:0 0 1.25rem;font-weight:400}
    #blog-details .sub_heading:empty{display:none;margin:0}
    #blog-details .img-thumbnail{width:100%;height:auto;max-height:420px;object-fit:cover;
      border:0;border-radius:18px;box-shadow:var(--shadow);margin:0 0 1.75rem;background:var(--slate)}
    /* social share row */
    .social_share_option{margin:0 0 1.5rem!important;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
    /* prose */
    #blog-details .custom_blog_html p{font-size:1.08rem;line-height:1.75;color:#28383f;margin:0 0 1.35rem}
    #blog-details .custom_blog_html h2{font-size:1.7rem;margin:2.4rem 0 .9rem;letter-spacing:-.02em}
    #blog-details .custom_blog_html h3{font-size:1.3rem;margin:1.9rem 0 .7rem}
    #blog-details .custom_blog_html a{color:var(--teal-deep);text-decoration:underline;
      text-decoration-color:var(--seafoam);text-underline-offset:3px;font-weight:600}
    #blog-details .custom_blog_html a:hover{color:var(--teal-darker)}
    #blog-details .custom_blog_html ul,#blog-details .custom_blog_html ol{margin:0 0 1.5rem;padding-left:1.3rem}
    #blog-details .custom_blog_html li{margin:0 0 .55rem;line-height:1.7;color:#28383f}
    #blog-details .custom_blog_html li::marker{color:var(--teal-mid)}
    #blog-details .custom_blog_html blockquote{margin:2rem 0;padding:1.1rem 1.5rem;
      background:var(--paper);border-left:4px solid var(--seafoam);border-radius:0 12px 12px 0;
      font-family:'Source Serif 4',serif;font-size:1.2rem;font-style:italic;color:var(--teal-darker)}
    #blog-details .custom_blog_html img{max-width:100%;height:auto;max-height:480px;
      border-radius:14px;margin:1.5rem auto}
    /* reviewer box — ready if injected after the featured image */
    .blog-reviewed{display:flex;align-items:center;gap:.7rem;background:var(--paper);
      border:1px solid var(--border);border-radius:12px;padding:.85rem 1.15rem;margin:0 0 1.75rem;
      font-size:.92rem;color:var(--text-secondary)}
    .blog-reviewed b{color:var(--ink);font-weight:600}
    .blog-reviewed .dot{width:9px;height:9px;border-radius:50%;background:#3fa06b;flex:none}

    /* ---- Footer ---- */
    .rvc-footer{background:var(--ink);color:rgba(255,255,255,.72);padding:3.25rem 1.5rem 1.75rem;margin-top:3.5rem}
    .rvc-footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;
      grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;padding-bottom:2rem;
      border-bottom:1px solid rgba(255,255,255,.1)}
    .rvc-footer h5{font-family:'Inter',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.14em;
      text-transform:uppercase;color:#fff;margin:0 0 1rem}
    .rvc-footer .lead b{font-family:'Source Serif 4',serif;color:#fff;font-size:1.15rem;font-weight:600}
    .rvc-footer .lead p{font-size:.93rem;margin:.7rem 0;line-height:1.6}
    .rvc-footer .lead a.fphone{color:var(--seafoam);font-weight:600;font-size:1.05rem}
    .rvc-footer ul{list-style:none;margin:0;padding:0}
    .rvc-footer li{margin:0 0 .55rem;font-size:.93rem}
    .rvc-footer li a{color:rgba(255,255,255,.72)}
    .rvc-footer li a:hover{color:var(--seafoam)}
    .rvc-footer-bottom{max-width:var(--maxw);margin:1.5rem auto 0;font-size:.82rem;
      color:rgba(255,255,255,.5);text-align:center}
    .rvc-footer-bottom p{margin:0}
    .rvc-footer-bottom a{color:rgba(255,255,255,.7)}
    .rvc-footer-bottom a:hover{color:var(--seafoam)}
    .rvc-credit{margin:.45rem 0 0!important;font-size:.8rem;color:rgba(255,255,255,.45)}
    .rvc-credit a{color:var(--seafoam);font-weight:500}
    .rvc-credit a:hover{color:#fff}
    @media(max-width:760px){.rvc-footer-inner{grid-template-columns:1fr;gap:1.75rem}}
    .totop{position:fixed;right:1rem;bottom:1rem;background:var(--teal-deep);color:#fff;
      width:44px;height:44px;border-radius:50%;display:none;align-items:center;justify-content:center;
      box-shadow:var(--shadow-lg);z-index:90;font-size:1.1rem}
    .totop span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}