/* Pet Age Calculator Blog — design system and responsive layout */ :root{--pac-white:#fff;--pac-danger:#9f4b4b;--shadow-sm:0 8px 30px rgba(28,62,55,.07);--shadow-md:0 18px 54px rgba(28,62,55,.12);--radius-sm:10px;--radius-md:18px;--radius-lg:28px;--container:1180px;--article:760px;--space-1:.5rem;--space-2:.75rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--space-6:3rem;--space-7:4.5rem;--space-8:6rem;} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--pac-paper);color:var(--pac-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--pac-ink);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--pac-blush-dark)} button,input,textarea,select{font:inherit} .container{width:min(calc(100% - 40px),var(--container));margin-inline:auto} .narrow-wide{width:min(100%,980px)} .section-pad{padding:var(--space-8) 0} .section-pad-sm{padding:var(--space-7) 0} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .screen-reader-text:focus{clip:auto!important;width:auto;height:auto;background:#fff;color:#111;padding:12px;z-index:99999} .skip-link:focus{left:16px;top:16px} .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--pac-blush-dark);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.75rem 1.2rem;border:1px solid transparent;border-radius:999px;font-size:.92rem;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease} .btn svg{width:18px;height:18px} .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--pac-ink);color:#fff;box-shadow:0 10px 22px rgba(24,60,55,.15)} .btn-primary:hover{background:#0f2f2b;color:#fff} .btn-light{background:#fff;color:var(--pac-ink)} .btn-ghost{background:transparent;border-color:var(--pac-line);color:var(--pac-ink)} .btn-ghost:disabled{opacity:.4;cursor:not-allowed} .btn-small{min-height:40px;padding:.55rem .95rem;font-size:.84rem} .btn-block{width:100%} .text-link{font-size:.92rem;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px} .site-header{position:sticky;top:0;z-index:100;background:rgba(255,253,250,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(219,227,222,.85)} .header-inner{height:78px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem} .brand-mark{display:flex;align-items:center;gap:.75rem;font-family:Georgia,"Times New Roman",serif;font-size:1.18rem;font-weight:700;text-decoration:none;color:var(--pac-ink)} .brand-symbol{display:inline-flex;position:relative;width:34px;height:30px} .brand-symbol i{position:absolute;top:2px;width:21px;height:27px;border:1.7px solid currentColor;border-radius:50% 50% 44% 44%} .brand-symbol i:first-child{left:0;transform:rotate(-13deg)} .brand-symbol i:last-child{right:0;transform:rotate(13deg)} .custom-logo{max-height:54px;width:auto} .primary-nav{justify-self:center} .primary-menu,.mobile-menu,.site-footer ul{list-style:none;padding:0;margin:0} .primary-menu{display:flex;align-items:center;gap:1.65rem} .primary-menu>li{position:relative} .primary-menu a{text-decoration:none;font-size:.9rem;font-weight:700;color:var(--pac-ink-2)} .primary-menu a:hover,.primary-menu .current-menu-item>a{color:var(--pac-blush-dark)} .primary-menu .sub-menu{display:none;position:absolute;top:calc(100% + 14px);left:-18px;min-width:230px;background:#fff;border:1px solid var(--pac-line);border-radius:14px;box-shadow:var(--shadow-md);padding:.65rem;list-style:none} .primary-menu .sub-menu a{padding:.65rem .75rem;border-radius:8px;} .primary-menu li:hover>.sub-menu,.primary-menu li:focus-within>.sub-menu{display:block} .header-actions{display:flex;align-items:center;gap:.6rem} .icon-button{width:42px;height:42px;display:inline-grid;place-items:center;border:1px solid var(--pac-line);border-radius:50%;background:transparent;color:var(--pac-ink);cursor:pointer} .icon-button svg{width:20px;height:20px} .menu-toggle{display:none} .menu-close-icon{display:none} .menu-toggle[aria-expanded=true] .menu-open-icon{display:none} .menu-toggle[aria-expanded=true] .menu-close-icon{display:inline-flex} .header-search{border-top:1px solid var(--pac-line);padding:14px 0;background:var(--pac-paper)} .header-search .search-form{max-width:700px;margin:auto} .mobile-panel{padding:1rem 0 1.5rem;border-top:1px solid var(--pac-line);background:var(--pac-paper)} .mobile-menu li{border-bottom:1px solid var(--pac-line)} .mobile-menu a{display:block;padding:.8rem 0;text-decoration:none;font-weight:800} .mobile-menu .sub-menu{list-style:none;padding:0 0 .5rem 1rem} .pac-breadcrumbs{background:var(--pac-sage-2);color:var(--pac-muted);} .pac-breadcrumbs .container{display:flex;align-items:center;gap:.55rem;white-space:nowrap;overflow:hidden;padding-top:.6rem;padding-bottom:.6rem} .pac-breadcrumbs a{text-decoration:none;color:var(--pac-ink-2)} .pac-breadcrumbs span[aria-current=page]{overflow:hidden;text-overflow:ellipsis} .archive-hero h1,.article-header h1,.page-header h1,.error-card h1{font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-weight:500;letter-spacing:-.035em;line-height:1.06} .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem} .section-heading h2{font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-size:clamp(2.2rem,4vw,3.5rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:.35rem 0 0} .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .post-card{background:#fff;border:1px solid var(--pac-line);border-radius:16px;overflow:hidden;transition:.2s ease} .post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)} .post-card-media{display:block;aspect-ratio:16/10;background:var(--pac-sage-2);overflow:hidden} .post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .post-card:hover .post-card-media img{transform:scale(1.025)} .post-card-placeholder{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pac-sage),var(--pac-cream))} .post-card-placeholder i{width:50px;height:75px;border:1.5px solid var(--pac-ink-2);border-radius:50%;margin:-6px;transform:rotate(-10deg);opacity:.55} .post-card-placeholder i:last-child{transform:rotate(10deg)} .post-card-body{padding:1.25rem} .post-category{display:inline-block;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:var(--pac-blush-dark);margin-bottom:.55rem;} .post-card-title{font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;line-height:1.22;margin:0 0 .7rem;font-weight:500} .post-card-title a{text-decoration:none;color:var(--pac-ink)} .post-card-body>p{color:var(--pac-muted);font-size:.88rem;line-height:1.58;margin:.6rem 0 1rem} .post-card-meta{display:flex;justify-content:space-between;color:var(--pac-muted);font-size:.72rem;font-weight:700;border-top:1px solid var(--pac-line);padding-top:.8rem} .archive-hero,.page-header{background:var(--pac-cream);border-bottom:1px solid var(--pac-line);padding:4.5rem 0 3.5rem} .archive-hero h1,.page-header h1{font-size:clamp(3rem,6vw,5rem);margin:.4rem 0 .8rem;max-width:900px} .archive-hero p,.archive-description,.page-header p{color:var(--pac-muted);max-width:740px} .content-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start} .post-grid-archive{grid-template-columns:repeat(2,1fr)} .sidebar{position:sticky;top:110px} .pac-widget{background:var(--pac-cream);border:1px solid var(--pac-line);border-radius:16px;padding:1.25rem;margin-bottom:1rem} .pac-widget .widget-title,.pac-widget h2{font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-size:1.2rem;font-weight:500;margin:0 0 1rem} .pac-widget ul{list-style:none;padding:0;margin:0} .pac-widget li+li{border-top:1px solid var(--pac-line)} .pac-widget li a{display:block;padding:.7rem 0;text-decoration:none;font-size:.84rem;font-weight:750} .sidebar-calculator{background:var(--pac-ink);color:#fff} .sidebar-calculator h2{color:#fff;margin-top:.35rem} .sidebar-calculator p{font-size:.84rem;color:#d9e5e1} .search-form{display:flex;position:relative} .search-form label{width:100%} .search-field{width:100%;height:48px;border:1px solid var(--pac-line);border-radius:999px;padding:0 52px 0 17px;background:#fff;color:var(--pac-text);outline:none} .search-field:focus{border-color:var(--pac-ink);box-shadow:0 0 0 3px rgba(24,60,55,.08)} .search-submit{position:absolute;border:0;border-radius:50%;background:var(--pac-ink);color:#fff;display:grid;place-items:center;cursor:pointer;} .search-submit svg{width:17px;height:17px} .navigation.pagination{margin-top:2.5rem} .nav-links{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .page-numbers{display:inline-grid;place-items:center;border:1px solid var(--pac-line);border-radius:50%;text-decoration:none;font-size:.82rem;font-weight:800;} .page-numbers.current{background:var(--pac-ink);color:#fff;border-color:var(--pac-ink)} .page-main{padding-bottom:var(--space-7)} .page-content-grid{padding-top:3.5rem;padding-bottom:3.5rem} .prose-page{padding-top:3.5rem;padding-bottom:4rem} .article-header{padding:4.7rem 0 2.4rem;max-width:970px} .article-header h1{font-size:clamp(3rem,6vw,5.3rem);margin:.45rem 0 1.25rem} .article-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--pac-muted);font-weight:700;} .article-meta span+span:before{content:"•";margin-right:1rem;color:#b7c2bd} .article-featured{max-width:1100px;margin-bottom:3rem} .article-featured img{border-radius:var(--radius-md);} .article-layout{display:grid;grid-template-columns:210px minmax(0,var(--article));gap:4rem;justify-content:center;align-items:start} .article-layout-no-sidebar{display:block;max-width:var(--article)} .article-rail-sticky{position:sticky;top:115px;border-top:1px solid var(--pac-line);padding-top:1rem} .rail-label{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--pac-muted)} .toc{display:grid;gap:.25rem;margin-top:.65rem} .toc a{font-size:.76rem;line-height:1.35;text-decoration:none;padding:.35rem 0;color:var(--pac-muted)} .toc a:hover{color:var(--pac-ink)} .prose{font-size:1.02rem;line-height:1.82;color:#253d39} .prose>*:first-child{margin-top:0} .prose h1,.prose h2,.prose h3,.prose h4{font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-weight:500;letter-spacing:-.02em;line-height:1.18} .prose h2{font-size:clamp(2rem,4vw,2.8rem);margin:2.8rem 0 1rem} .prose h3{font-size:1.55rem;margin:2.1rem 0 .8rem} .prose h4{font-size:1.2rem;margin:1.7rem 0 .6rem} .prose p{margin:0 0 1.25rem} .prose a{text-decoration-color:#c3b0a7} .prose ul,.prose ol{margin:0 0 1.5rem;padding-left:1.35rem} .prose li{padding-left:.3rem;margin:.35rem 0} .prose blockquote{margin:2rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--pac-blush);background:var(--pac-cream);font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;color:var(--pac-ink)} .prose table{border-collapse:separate;border-spacing:0;width:100%;margin:1.8rem 0;border:1px solid var(--pac-line);border-radius:12px;overflow:hidden;font-size:.88rem;line-height:1.5} .prose th{background:var(--pac-ink);color:#fff;text-align:left;font-size:.78rem;letter-spacing:.02em} .prose th,.prose td{padding:.85rem .9rem;border-bottom:1px solid var(--pac-line);vertical-align:top} .prose tr:last-child td{border-bottom:0} .prose tbody tr:nth-child(even){background:var(--pac-sage-2)} .prose img{border-radius:12px} .prose .wp-block-separator{border:0;border-top:1px solid var(--pac-line);margin:2.2rem 0} .prose .alignwide{width:min(1000px,calc(100vw - 40px));max-width:none;margin-left:50%;transform:translateX(-50%)} .prose .alignfull{width:min(var(--container),calc(100vw - 40px));max-width:none;margin-left:50%;transform:translateX(-50%)} .article-end-note{margin:3rem 0;padding:1.3rem 1.4rem;border-radius:14px;background:var(--pac-sage-2);border:1px solid var(--pac-line)} .article-end-note strong{font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-size:1.1rem} .article-end-note p{font-size:.86rem;color:var(--pac-muted);margin:.4rem 0 0} .comments-area{padding-top:4rem;padding-bottom:4rem} .comments-title,.comment-reply-title{font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-weight:500} .comment-list{list-style:none;padding:0} .comment-body{border-top:1px solid var(--pac-line);padding:1.2rem 0} .comment-meta{font-size:.78rem} .comment-content{font-size:.9rem} .comment-form label{display:block;font-size:.75rem;font-weight:800;margin-bottom:.3rem} .comment-form input:not([type=checkbox]),.comment-form textarea{width:100%;border:1px solid var(--pac-line);border-radius:10px;padding:.75rem;background:#fff} .comment-form .submit{border:0;background:var(--pac-ink);color:#fff;border-radius:999px;padding:.75rem 1.2rem;font-weight:800;cursor:pointer} .error-page{padding:6rem 0} .error-card{max-width:760px;text-align:center} .error-number{display:block;font-family:Georgia,"Times New Roman",serif;font-size:8rem;line-height:1;color:var(--pac-sage);font-weight:700} .error-card h1{font-size:clamp(2.5rem,5vw,4rem)} .error-card .search-form{max-width:520px;margin:2rem auto} .error-actions{display:flex;align-items:center;justify-content:center;gap:1.2rem} .site-footer{background:#102d29;color:#d8e5e1;margin-top:4rem} .footer-main{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:3rem;padding-top:4rem;padding-bottom:3rem} .brand-mark-light{color:#fff} .footer-brand p{max-width:380px;color:#aabdb7;font-size:.9rem} .footer-socials{display:flex;gap:1rem} .footer-socials a{color:#fff;font-size:.8rem;font-weight:800} .footer-nav-group h2,.footer-widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:#91aaa3;margin:0 0 1rem;font-family:inherit} .footer-nav-group a{color:#e4eeeb;text-decoration:none;font-size:.84rem} .footer-nav-group li+li{margin-top:.55rem} .footer-bottom{display:flex;justify-content:space-between;gap:2rem;padding-top:1.2rem;padding-bottom:1.4rem;border-top:1px solid rgba(255,255,255,.11);font-size:.72rem;color:#91aaa3} .back-to-top{color:#d8e5e1;text-decoration:none;font-weight:800} .home-prose{margin:auto} .home-editorial{border-top:1px solid var(--pac-line)} .empty-state{max-width:600px;padding:2rem 0} .empty-state h2{font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-weight:500} .empty-state .search-form{margin-top:1.5rem} @media (max-width:1100px){.primary-nav{display:none} .header-cta{display:none} .post-grid{grid-template-columns:repeat(2,1fr)} .article-layout{grid-template-columns:minmax(0,var(--article));} .article-rail{display:none} .footer-main{grid-template-columns:1.5fr 1fr 1fr} } @media (max-width:820px){body{font-size:16px} .header-inner{gap:1rem;} .post-grid,.post-grid-archive{grid-template-columns:1fr} .section-heading{align-items:flex-start;flex-direction:column} .content-with-sidebar{grid-template-columns:1fr} .sidebar{position:static} .page-content-grid{padding-top:2rem} .prose table{overflow-x:auto;} .footer-bottom{flex-direction:column} } @media (max-width:520px){.brand-symbol{transform:scale(.9);transform-origin:left center} .error-actions{flex-direction:column} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* v1.3.0 — mobile and editorial table refinements */ .table-scroll,.prose .wp-block-table{-webkit-overflow-scrolling:touch;border:1px solid var(--pac-line);border-radius:12px;background:#fff;box-shadow:0 4px 18px rgba(28,62,55,.035);scrollbar-width:thin;scrollbar-color:#afbeb8 transparent;} .table-scroll table,.prose .wp-block-table table{margin:0;border:0;border-radius:0;overflow:visible;} .table-scroll:focus-visible,.prose .wp-block-table:focus-visible{outline:3px solid rgba(24,60,55,.18);outline-offset:3px} .prose table{table-layout:auto;word-break:normal;overflow-wrap:normal} .prose th,.prose td{min-width:110px;word-break:normal;overflow-wrap:break-word;hyphens:auto} .prose th:first-child,.prose td:first-child{min-width:150px} .prose th p,.prose td p{margin:0} .prose th p+p,.prose td p+p{margin-top:.6rem} .prose .wp-block-table figcaption{padding:.65rem .8rem;margin:0;color:var(--pac-muted);font-size:.75rem;line-height:1.45;background:var(--pac-cream);border-top:1px solid var(--pac-line)} @media (max-width:820px){ html,body{max-width:100%;overflow-x:hidden} .container{width:min(calc(100% - 32px),var(--container))} .header-actions{gap:.4rem} .icon-button{width:40px;height:40px} .mobile-panel{max-height:calc(100vh - 64px);overflow-y:auto;padding:.75rem 0 1.25rem} .mobile-menu a{padding:.9rem 0} .mobile-menu .sub-menu{padding-left:.85rem} .mobile-panel .btn{margin-top:1rem} .article-header h1{margin:.4rem 0 1rem;} .article-meta{font-size:.76rem;} .article-meta span+span:before{margin-right:.8rem} .article-layout{display:block;padding:0;} .article-content-wrap{min-width:0;width:100%} .prose h3{line-height:1.25;margin:1.85rem 0 .7rem;} .prose h4{font-size:1.12rem} .prose p{margin-bottom:1.1rem} .prose ul,.prose ol{padding-left:1.2rem} .prose blockquote{margin:1.6rem 0;padding:1rem 1.05rem;font-size:1.08rem} .prose table{display:table;overflow:visible;white-space:normal;margin:0;font-size:.84rem;line-height:1.42} .table-scroll::after,.prose .wp-block-table::after{content:"Swipe to view more →";display:block;position:sticky;left:0;width:max-content;padding:.38rem .65rem;color:var(--pac-muted);font-size:.68rem;font-weight:700;letter-spacing:.02em;background:var(--pac-cream);border-top:1px solid var(--pac-line)} .prose .alignwide,.prose .alignfull{width:100%;max-width:100%;margin-left:0;transform:none} .article-end-note{margin:2.2rem 0;padding:1.1rem} .section-heading h2{line-height:1.08} .post-card{border-radius:14px} .post-card-body{padding:1.1rem} .post-card-title{line-height:1.2} .pac-home-seo .pac-section{padding-left:16px;padding-right:16px} .pac-home-seo .pac-section h2{font-size:clamp(1.65rem,7vw,2.1rem);line-height:1.2} .pac-home-seo .pac-factor-grid{gap:10px} .pac-home-seo .pac-factor-card{padding:14px} .pac-home-seo .pac-stat-grid{grid-template-columns:1fr 1fr;gap:10px} .pac-home-seo .pac-stat-card{padding:14px 10px} .site-footer{margin-top:3rem} } @media (max-width:520px){.brand-mark>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .eyebrow{font-size:.68rem;letter-spacing:.1em} .table-scroll,.prose .wp-block-table{margin-left:0;} .pac-home-seo .pac-steps li{padding:14px 14px 14px 48px} .pac-home-seo .pac-steps li::before{left:13px;top:14px} .pac-home-seo .pac-factor-grid{grid-template-columns:1fr} .pac-home-seo .pac-stat-grid{grid-template-columns:1fr 1fr} .pac-home-seo .pac-stat-number{font-size:1.4rem} } @media (max-width:380px){ .pac-home-seo .pac-stat-grid{grid-template-columns:1fr} .table-scroll table,.prose .wp-block-table table{min-width:520px} } /* v1.4.0 — comprehensive responsive/UI/UX refinement */ :root{--pac-header-height:78px} html{scroll-padding-top:calc(var(--pac-header-height) + 22px)} .prose h2,.prose h3,.prose h4{scroll-margin-top:calc(var(--pac-header-height) + 22px)} .archive-hero h1,.article-header h1,.page-header h1,.section-heading h2,.pac-home-seo .pac-section h2{text-wrap:balance;overflow-wrap:anywhere} /* Strong, consistent keyboard feedback without changing mouse/touch presentation. */ a:focus-visible,.btn:focus-visible,.icon-button:focus-visible,.search-submit:focus-visible,.comment-form .submit:focus-visible,.back-to-top:focus-visible,.page-numbers:focus-visible,.submenu-toggle:focus-visible{outline:3px solid rgba(183,111,89,.45);outline-offset:3px} /* Desktop navigation clarity. */ .primary-menu>.menu-item-has-children>a{display:inline-flex;align-items:center;gap:.35rem} .primary-menu>.menu-item-has-children>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7} .primary-menu .sub-menu{margin-top:-4px} .primary-menu .sub-menu a{min-height:40px;display:flex;align-items:center} /* Header transient surfaces. */ .header-search{box-shadow:0 14px 30px rgba(28,62,55,.06)} body.menu-open{overflow:hidden} .mobile-backdrop{background:rgba(16,45,41,.28);backdrop-filter:blur(2px)} .mobile-panel-intro,.mobile-search,.mobile-panel-cta,.mobile-nav{display:none} .menu-toggle-label{display:none;font-size:.82rem;font-weight:800;line-height:1} /* Archive/sidebar controls. */ .sidebar-calculator .btn{background:#fff;color:var(--pac-ink);box-shadow:none} .sidebar-calculator .btn:hover{background:var(--pac-sage-2);color:var(--pac-ink)} .page-numbers.prev,.page-numbers.next{width:auto;min-width:44px;padding:0 .9rem;border-radius:999px;white-space:nowrap} /* Cards scan better when excerpts vary wildly in length. */ .post-card-body>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Article overflow resilience. */ .prose pre{max-width:100%;overflow:auto;padding:1rem;border-radius:12px;background:#f2f4f2;font-size:.86rem;line-height:1.55} .prose code{overflow-wrap:anywhere} .prose a{overflow-wrap:anywhere} .mobile-toc{display:none} /* Tables: preserve readable column geometry and scroll only when needed. */ .table-scroll,.prose .wp-block-table{position:relative;isolation:isolate} .table-scroll.is-scrollable::after,.prose .wp-block-table.is-scrollable::after{content:"Swipe to view more →";display:block;position:sticky;left:0;width:max-content;padding:.42rem .7rem;color:var(--pac-muted);font-size:.7rem;font-weight:800;letter-spacing:.01em;background:var(--pac-cream);border-top:1px solid var(--pac-line)} .table-scroll:not(.is-scrollable)::after,.prose .wp-block-table:not(.is-scrollable)::after{display:none!important} .prose th,.prose td{max-width:360px} .prose td a{word-break:break-word} /* FAQ controls should keep the disclosure icon clear of long questions. */ .pac-home-seo .pac-faq-item summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center} .pac-home-seo .pac-faq-item summary::after{float:none;min-width:22px;text-align:center;font-size:1.2rem} .pac-home-seo .pac-sources a{overflow-wrap:anywhere} /* Touch devices should not jump cards/buttons on tap because of hover transforms. */ @media (hover:none){ .btn:hover,.post-card:hover{transform:none} .post-card:hover .post-card-media img{transform:none} } @media (max-width:1100px){ :root{--pac-header-height:72px} .site-header{backdrop-filter:blur(10px)} .header-inner{height:var(--pac-header-height);} .site-branding{min-width:0} .custom-logo-link{display:flex;align-items:center;min-width:0} .custom-logo{max-width:min(210px,38vw);height:auto} .brand-mark{min-width:0} .header-actions{margin-left:auto} .menu-toggle{display:inline-flex;width:auto;min-width:78px;height:42px;padding:0 .8rem;border-radius:999px;gap:.45rem} .menu-toggle-label{display:inline} .menu-open-icon,.menu-close-icon{display:inline-flex} .menu-toggle[aria-expanded=true] .menu-open-icon{display:none} .menu-toggle[aria-expanded=true] .menu-close-icon{display:inline-flex} .mobile-backdrop{top:var(--pac-header-height);right:0;bottom:0;left:0;} .mobile-panel{overflow-y:auto;} .mobile-panel-inner{min-height:100%;padding:1.35rem 1.35rem max(1.5rem,env(safe-area-inset-bottom));display:flex;flex-direction:column} .mobile-panel-intro{padding:.1rem 0 1rem;} .mobile-menu-kicker{display:block;color:var(--pac-blush-dark);font-size:.67rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.22rem} .mobile-panel-intro strong{display:block;font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-size:1.65rem;font-weight:500;letter-spacing:-.02em} .mobile-search{margin-bottom:1rem;} .mobile-nav{border-top:1px solid var(--pac-line);} .mobile-menu>li{position:relative;border-bottom:1px solid var(--pac-line)} .mobile-menu a{display:flex;align-items:center;min-height:52px;padding:.78rem 3.25rem .78rem 0;color:var(--pac-ink);font-size:.98rem;line-height:1.3;font-weight:800;text-decoration:none} .mobile-menu>li>a:hover,.mobile-menu>li.current-menu-item>a,.mobile-menu>li.current-menu-ancestor>a{color:var(--pac-blush-dark)} .mobile-menu .sub-menu .sub-menu{margin-left:.5rem;background:#fff} .submenu-toggle{top:4px;right:0;} .submenu-toggle:hover{background:var(--pac-sage-2)} .mobile-menu .sub-menu .submenu-toggle{top:1px;right:.1rem;} .mobile-panel-cta{display:block;margin-top:1.2rem;padding:1rem;background:var(--pac-cream);border:1px solid var(--pac-line);border-radius:16px} .mobile-panel-cta .btn{min-height:50px} .mobile-panel-cta p{margin:.65rem .25rem 0;text-align:center;color:var(--pac-muted);font-size:.72rem;line-height:1.45} /* Do not hide legitimate footer navigation just because the viewport is tablet-sized. */ .footer-main>.footer-nav-group:last-child{display:block} } @media (min-width:1101px){ .mobile-panel,.mobile-backdrop{display:none!important} } @media (max-width:820px){ :root{--pac-header-height:64px} body{line-height:1.66} .section-pad{padding:3.3rem 0} .section-pad-sm{padding:2.7rem 0} .header-inner{height:var(--pac-header-height)} .custom-logo{max-height:42px;max-width:min(190px,43vw)} .pac-breadcrumbs{font-size:.72rem} .pac-breadcrumbs .container{padding-top:.5rem;padding-bottom:.5rem} .section-heading{margin-bottom:1.45rem} .section-heading h2{font-size:clamp(2rem,8vw,2.8rem)} .post-grid,.post-grid-archive{gap:1rem} .archive-hero,.page-header{padding:2.8rem 0 2.25rem} .archive-hero h1,.page-header h1{font-size:clamp(2.4rem,9vw,3.5rem);line-height:1.06} .content-with-sidebar{gap:2.4rem} .sidebar{margin-top:.25rem} .article-header{padding-top:2.45rem;padding-bottom:1.45rem} .article-header h1{font-size:clamp(2.2rem,8.8vw,3.45rem);line-height:1.07} .article-meta{gap:.45rem .8rem} .article-meta span+span:before{display:none} .article-featured{width:min(calc(100% - 24px),1100px);margin-inline:auto;margin-bottom:1.8rem} .article-featured img{border-radius:14px;aspect-ratio:16/10} .mobile-toc{margin:0 0 1.7rem;border:1px solid var(--pac-line);border-radius:14px;background:var(--pac-cream);overflow:hidden;} .mobile-toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:50px;padding:.8rem 1rem;color:var(--pac-ink);font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em} .mobile-toc summary::-webkit-details-marker{display:none} .mobile-toc-icon{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease} .mobile-toc[open] .mobile-toc-icon{transform:rotate(225deg) translateY(-1px)} .mobile-toc-list{display:grid;padding:.1rem 1rem .9rem;border-top:1px solid var(--pac-line)} .mobile-toc-list a{padding:.55rem 0;border-bottom:1px solid rgba(219,227,222,.8);color:var(--pac-ink-2);font-size:.84rem;line-height:1.35;text-decoration:none} .mobile-toc-list a:last-child{border-bottom:0} .prose{font-size:1rem;line-height:1.74} .prose h2{font-size:clamp(1.72rem,7vw,2.25rem);margin:2.25rem 0 .8rem} .prose h3{font-size:1.32rem} .prose img{border-radius:10px} /* Override older full-bleed table math: the table now stays aligned to the reading column. */ .table-scroll,.prose .wp-block-table{width:100%;max-width:100%;margin:1.4rem 0;border-radius:11px;overflow-x:auto} .table-scroll table,.prose .wp-block-table table{min-width:600px} .prose th,.prose td{min-width:105px;max-width:300px;padding:.72rem .76rem;font-size:.84rem;line-height:1.45} .prose th:first-child,.prose td:first-child{min-width:145px} .comments-area{width:min(calc(100% - 28px),var(--container));padding-top:2.6rem;padding-bottom:3rem} .pac-home-seo .pac-section{padding-top:3rem;padding-bottom:3rem} .pac-home-seo #sources{padding-bottom:3.8rem} .footer-main{grid-template-columns:1fr 1fr;gap:1.8rem;padding-top:2.8rem;padding-bottom:2.2rem} .footer-nav-group a{display:inline-flex;align-items:center;min-height:38px} .footer-bottom{padding-top:1rem;padding-bottom:1.1rem} } @media (max-width:600px){ /* Decorative hero art was pushing the calculator too far below the fold on phones. */ } @media (max-width:520px){ .container{width:min(calc(100% - 24px),var(--container))} .site-header{background:rgba(255,253,250,.98)} .brand-mark{max-width:calc(100vw - 126px);font-size:1rem} .brand-symbol{flex:0 0 31px} .custom-logo{max-width:calc(100vw - 126px);max-height:40px} .search-toggle{display:none} .menu-toggle{min-width:76px;height:40px;padding:0 .7rem} .mobile-panel{width:100%;border-left:0;box-shadow:none} .mobile-panel-inner{padding:1.1rem 1rem max(1.25rem,env(safe-area-inset-bottom))} .mobile-panel-intro strong{font-size:1.5rem} .section-pad{padding:2.8rem 0} .section-pad-sm{padding:2.35rem 0} .section-heading{gap:.6rem;margin-bottom:1.25rem} .section-heading h2{font-size:clamp(1.9rem,9vw,2.45rem)} .post-card{border-radius:13px} .post-card-body{padding:1rem} .post-card-title{font-size:1.25rem} .post-card-meta{gap:.75rem} .archive-hero,.page-header{padding:2.35rem 0 1.9rem} .archive-hero h1,.page-header h1{font-size:clamp(2.15rem,10vw,3rem)} .archive-hero p,.archive-description,.page-header p{font-size:.94rem;line-height:1.6} .sidebar{margin-top:.5rem} .pac-widget{padding:1.05rem;border-radius:14px} .article-header{padding-top:2rem;padding-bottom:1.2rem} .article-header h1{font-size:clamp(1.95rem,9.8vw,2.8rem);margin:.35rem 0 .8rem} .article-featured{width:min(calc(100% - 16px),1100px);margin-bottom:1.5rem} .article-featured img{border-radius:12px;aspect-ratio:16/10} .mobile-toc{margin-bottom:1.45rem} .prose{font-size:.98rem;line-height:1.7} .prose h2{font-size:clamp(1.55rem,7.7vw,1.95rem);margin-top:2rem} .prose h3{font-size:1.22rem;margin-top:1.65rem} .prose blockquote{margin:1.35rem 0;padding:.9rem 1rem;font-size:1rem} .prose ul,.prose ol{padding-left:1.15rem} .table-scroll,.prose .wp-block-table{margin:1.25rem 0;width:100%;max-width:100%;border-radius:10px} .prose th,.prose td{padding:.64rem .66rem;font-size:.79rem;line-height:1.42} .prose th:first-child,.prose td:first-child{min-width:130px} .table-scroll.is-scrollable::after,.prose .wp-block-table.is-scrollable::after{font-size:.66rem;padding:.36rem .6rem} .article-end-note{margin:2rem 0;padding:1rem} .comments-area{width:min(calc(100% - 24px),var(--container))} .navigation.pagination{margin-top:2rem} .nav-links{gap:.4rem} .page-numbers{min-width:40px;height:40px} .page-numbers.prev,.page-numbers.next{padding:0 .7rem;font-size:.76rem} .pac-home-seo .pac-section{padding:2.6rem 12px} .pac-home-seo .pac-section h2{font-size:clamp(1.65rem,8vw,2rem)} .pac-home-seo .pac-section p,.pac-home-seo .pac-section li{font-size:.96rem;line-height:1.7} .pac-home-seo .pac-faq-item{padding:3px 13px} .pac-home-seo .pac-faq-item summary{font-size:.94rem;line-height:1.4;gap:.7rem} .footer-main{grid-template-columns:1fr;gap:1.35rem;padding-top:2.5rem} .footer-brand p{font-size:.86rem;line-height:1.6} .footer-nav-group h2,.footer-widget-title{margin-bottom:.55rem} .footer-nav-group a{min-height:36px} .footer-bottom{gap:.55rem;line-height:1.5;} } @media (max-width:360px){ .menu-toggle-label{display:none} .menu-toggle{min-width:40px;width:40px;padding:0;border-radius:50%} .brand-mark,.custom-logo{max-width:calc(100vw - 92px)} .pac-home-seo .pac-stat-grid{grid-template-columns:1fr} .table-scroll table,.prose .wp-block-table table{min-width:520px} .page-numbers.prev,.page-numbers.next{padding:0 .55rem} } .mobile-panel[hidden],.mobile-backdrop[hidden]{display:none!important} @media (max-width:1100px){ .mobile-panel-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem} .mobile-panel-close:focus-visible{outline:3px solid rgba(183,111,89,.45);outline-offset:3px} } @media (max-width:820px){ .post-card-meta{gap:.35rem .8rem;} .error-page{padding:3.5rem 0} .error-number{font-size:6rem} .back-to-top,.footer-socials a{display:inline-flex;align-items:center;min-height:44px} } @media (max-width:520px){ .error-page{padding:2.8rem 0} .error-number{font-size:5rem} } /* WordPress admin-bar compatibility and JS-ready mobile TOC. */ @media (max-width:820px){.mobile-toc{display:none} .mobile-toc.is-ready{display:block} } body.admin-bar .site-header{top:32px} @media (max-width:1100px){body.admin-bar .mobile-panel,body.admin-bar .mobile-backdrop{top:calc(var(--pac-header-height) + 32px)} } @media (max-width:782px){body.admin-bar .site-header{top:46px} body.admin-bar .mobile-panel,body.admin-bar .mobile-backdrop{top:calc(var(--pac-header-height) + 46px)} } /* ================================================================ * v1.5.0 — Mobile navigation rebuild * Full-height menu, simplified hierarchy, stronger touch targets, * cleaner submenu accordions, and less header clutter on phones. * ================================================================ */ html.menu-open,body.menu-open{overflow:hidden} .mobile-panel:focus{outline:none} .mobile-panel-header,.mobile-panel-scroll,.mobile-panel-footer,.mobile-nav-label{display:none} @media (max-width:1100px){ .header-inner{grid-template-columns:minmax(0,1fr) auto;gap:.85rem} .header-actions{grid-column:2;justify-self:end} .mobile-backdrop{display:block;position:fixed;z-index:999;inset:0;background:rgba(10,34,31,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .mobile-panel{display:block;position:fixed;z-index:1000;top:0;right:0;bottom:auto;width:min(430px,100%);height:100dvh;padding:0;border:0;border-left:1px solid var(--pac-line);background:var(--pac-paper);box-shadow:-24px 0 60px rgba(10,34,31,.2);overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;} .mobile-panel:not([hidden]){animation:pacMobileMenuIn .2s ease-out both} .mobile-backdrop:not([hidden]){animation:pacMobileBackdropIn .18s ease-out both} .mobile-panel-shell{height:100%;min-height:0;display:flex;flex-direction:column} .mobile-panel-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:0 0 auto;min-height:72px;padding:.75rem 1rem .75rem 1.2rem;border-bottom:1px solid var(--pac-line);background:rgba(255,253,250,.98)} .mobile-panel-brand{min-width:0;display:flex;align-items:center} .mobile-panel-brand .custom-logo-link{display:flex;align-items:center;min-width:0} .mobile-panel-brand .custom-logo{max-height:42px;max-width:220px;width:auto} .mobile-panel-brand .brand-mark{font-size:1.03rem;max-width:270px} .mobile-panel-brand .brand-symbol{width:31px;height:28px;flex:0 0 31px} .mobile-panel-brand .brand-symbol i{width:19px;height:25px} .mobile-panel-close{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--pac-line);border-radius:12px;background:#fff;color:var(--pac-ink);display:grid;place-items:center;cursor:pointer;transition:background .16s ease,border-color .16s ease} .mobile-panel-close svg{width:19px;height:19px} .mobile-panel-close:hover{background:var(--pac-sage-2);border-color:#cbd8d1} .mobile-panel-scroll{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1.1rem 1.15rem 1.5rem;scrollbar-width:thin;scrollbar-color:#cbd8d1 transparent} .mobile-search{display:block;margin:0 0 1.35rem} .mobile-search .search-form{width:100%} .mobile-search .search-field{height:48px;padding-left:16px;background:#fff;border-radius:12px;border-color:#d7e0db;box-shadow:0 4px 16px rgba(24,60,55,.035)} .mobile-nav{display:block;border:0;flex:none} .mobile-nav-label{display:block;margin:0 0 .55rem;padding:0 .2rem;color:var(--pac-muted);font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase} .mobile-menu{display:block;width:100%;margin:0;padding:0;list-style:none} .mobile-menu li{position:relative;border:0} .mobile-menu>li{margin:.18rem 0;border:0} .mobile-menu>li>a,.mobile-menu-row{border-radius:12px;transition:background .16s ease,color .16s ease} .mobile-menu>li>a{display:flex;align-items:center;width:100%;min-height:54px;padding:.8rem .85rem;color:var(--pac-ink);font-size:1rem;line-height:1.3;font-weight:800;text-decoration:none} .mobile-menu-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:center;min-height:54px} .mobile-menu-row>a{display:flex;align-items:center;min-width:0;min-height:54px;padding:.8rem .3rem .8rem .85rem;color:var(--pac-ink);font-size:1rem;line-height:1.3;font-weight:800;text-decoration:none} .mobile-menu>li>a:hover,.mobile-menu>li>a:focus-visible,.mobile-menu>li>.mobile-menu-row:hover{background:var(--pac-sage-2);color:var(--pac-ink)} .mobile-menu>li.current-menu-item>a,.mobile-menu>li.current-menu-ancestor>.mobile-menu-row,.mobile-menu>li.current-menu-parent>.mobile-menu-row{background:#f2ece7;color:var(--pac-ink)} .mobile-menu>li.current-menu-item>a{box-shadow:inset 3px 0 0 var(--pac-blush-dark)} .submenu-toggle{position:static;z-index:auto;width:42px;height:42px;margin-right:2px;border:0;border-radius:10px;background:transparent;color:var(--pac-ink);cursor:pointer;display:grid;place-items:center;justify-self:end} .submenu-toggle:hover,.submenu-toggle:focus-visible{background:rgba(24,60,55,.07)} .submenu-toggle span{width:9px;height:9px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease} .submenu-toggle[aria-expanded=true] span{transform:rotate(225deg) translate(-1px,-1px)} .mobile-menu .sub-menu{display:block;margin:.15rem .45rem .6rem 1rem;padding:.18rem 0 .18rem .85rem;background:transparent;border:0;border-left:1px solid #cad7d0;border-radius:0;list-style:none} .mobile-menu .sub-menu[hidden]{display:none!important} .mobile-menu .sub-menu li{margin:.05rem 0;border:0} .mobile-menu .sub-menu a{display:flex;align-items:center;min-height:44px;padding:.58rem .7rem;color:var(--pac-ink-2);font-size:.9rem;line-height:1.35;font-weight:700;text-decoration:none;border-radius:9px} .mobile-menu .sub-menu a:hover,.mobile-menu .sub-menu a:focus-visible,.mobile-menu .sub-menu .current-menu-item>a{background:var(--pac-sage-2);color:var(--pac-ink)} .mobile-menu .sub-menu .mobile-menu-row{grid-template-columns:minmax(0,1fr) 42px;min-height:44px;border-radius:9px} .mobile-menu .sub-menu .mobile-menu-row>a{min-height:44px;padding:.58rem .3rem .58rem .7rem;font-size:.9rem;font-weight:700;color:var(--pac-ink-2)} .mobile-menu .sub-menu .submenu-toggle{width:38px;height:38px;margin-right:1px} .mobile-menu .sub-menu .sub-menu{margin:.08rem .2rem .45rem .65rem;padding-left:.7rem} .mobile-panel-footer{display:block;flex:0 0 auto;padding:.9rem 1.15rem max(.95rem,env(safe-area-inset-bottom));border-top:1px solid var(--pac-line);background:rgba(255,253,250,.98);box-shadow:0 -10px 28px rgba(24,60,55,.045)} .mobile-menu-cta{min-height:50px;border-radius:12px} .mobile-panel-footer p{margin:.5rem .35rem 0;color:var(--pac-muted);font-size:.7rem;line-height:1.4;text-align:center} } @media (max-width:820px){ .search-toggle{display:none} .menu-toggle{display:inline-grid;min-width:44px;width:44px;height:44px;padding:0;border-radius:12px;gap:0} .menu-toggle-label{display:none} .menu-toggle .menu-open-icon,.menu-toggle .menu-close-icon{display:inline-flex} .menu-toggle[aria-expanded=true] .menu-open-icon{display:none} .menu-toggle[aria-expanded=true] .menu-close-icon{display:inline-flex} .mobile-panel{width:100%;border-left:0;box-shadow:none} .mobile-backdrop{display:none!important} .mobile-panel-header{min-height:64px;padding:.55rem .75rem .55rem 1rem} .mobile-panel-brand .custom-logo{max-height:39px;max-width:min(210px,58vw)} .mobile-panel-brand .brand-mark{max-width:calc(100vw - 84px);font-size:1rem} .mobile-panel-scroll{padding:1rem .9rem 1.35rem} .mobile-panel-footer{padding:.8rem .9rem max(.85rem,env(safe-area-inset-bottom))} .mobile-menu>li>a,.mobile-menu-row{min-height:56px} .mobile-menu>li>a,.mobile-menu-row>a{font-size:1.02rem} } @media (max-width:420px){ .mobile-panel-header{padding-left:.85rem;padding-right:.65rem} .mobile-panel-scroll{padding-left:.75rem;padding-right:.75rem} .mobile-panel-footer{padding-left:.75rem;padding-right:.75rem} .mobile-menu>li>a{padding-left:.72rem;padding-right:.72rem} .mobile-menu-row>a{padding-left:.72rem} .mobile-menu .sub-menu{margin-left:.85rem;margin-right:.25rem;padding-left:.7rem} } @keyframes pacMobileMenuIn{from{opacity:.6;transform:translateX(22px)} to{opacity:1;transform:translateX(0)} } @keyframes pacMobileBackdropIn{from{opacity:0} to{opacity:1} } @media (prefers-reduced-motion:reduce){ .mobile-panel:not([hidden]),.mobile-backdrop:not([hidden]){animation:none} .submenu-toggle span{transition:none} } /* The rebuilt panel starts at the top of the viewport; only the WP admin bar offsets it. */ @media (max-width:1100px){ body.admin-bar .mobile-panel{top:32px;height:calc(100dvh - 32px);} body.admin-bar .mobile-backdrop{top:32px} } @media (max-width:782px){ body.admin-bar .mobile-panel{top:46px;height:calc(100dvh - 46px);} body.admin-bar .mobile-backdrop{top:46px} } /* v1.5.1 — Desktop dropdown hover reliability * Keep a continuous hover target between a top-level menu item and its submenu. * Previously the visual offset created a dead zone that closed the dropdown while * the pointer travelled from the parent link into the menu. */ @media (min-width:1101px){ .primary-menu>.menu-item-has-children>.sub-menu{ display:block; top:calc(100% + 10px); margin-top:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s; } /* Transparent bridge fills the physical gap without changing the visual spacing. */ .primary-menu>.menu-item-has-children>.sub-menu::before{ content:""; position:absolute; left:-1px; right:-1px; top:-12px; height:12px; background:transparent; } .primary-menu>.menu-item-has-children:hover>.sub-menu, .primary-menu>.menu-item-has-children:focus-within>.sub-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; } } /* v1.5.2 — Mobile header toggle: the compact header always shows only the hamburger. The open mobile panel has its own dedicated close button, avoiding duplicate hamburger/X states. */ @media (max-width:1100px){ .site-header .menu-toggle .menu-close-icon{display:none!important} .site-header .menu-toggle .menu-open-icon{display:inline-flex!important} } /* ======================================================================== * Pet Age Calculator Blog v1.0.1 — content-first publication layer * ======================================================================== */ :root{ --pac-ink:#173c38; --pac-ink-2:#31524d; --pac-text:#263d39; --pac-muted:#596c67; --pac-cream:#f7f3eb; --pac-paper:#fffdfa; --pac-sage:#dfeae4; --pac-sage-2:#eef4f0; --pac-blush:#df8c62; --pac-blush-dark:#9f5236; --pac-line:#dbe4df; } .brand-paw{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;color:var(--pac-blush-dark)} .brand-paw svg{width:32px;height:32px;display:block} .brand-mark-light .brand-paw{color:#e7a37f} /* Blog homepage */ /* Archives and post index */ .archive-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end} .archive-hero-grid>.btn{margin-bottom:.25rem} .archive-hero .archive-description{max-width:760px;color:var(--pac-muted)} .archive-list-heading{margin-bottom:1.4rem} .archive-list-heading h2{margin:.25rem 0 0;font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-size:clamp(2rem,3vw,2.8rem);font-weight:500;letter-spacing:-.025em} /* Article credibility and continuation */ .pet-care-note{border-left:4px solid var(--pac-blush);background:var(--pac-cream)} .related-posts{border-top:1px solid var(--pac-line)} .page-content-single{width:min(calc(100% - 40px),900px);} .page-content-single .prose{margin-inline:auto} /* Existing editorial/affiliate blocks should remain usable inside migrated articles. */ .prose .affiliate-disclosure,.prose .amazon-disclosure,.prose [class*="affiliate"]{font-size:.82rem;line-height:1.55;color:var(--pac-muted)} .prose .wp-block-buttons{margin:1.5rem 0} .prose .wp-block-button__link{border-radius:999px;background:var(--pac-ink);color:#fff;font-weight:800;text-decoration:none} .prose iframe,.prose video{max-width:100%} @media (max-width:820px){ .archive-hero-grid{grid-template-columns:1fr;align-items:start} .archive-hero-grid>.btn{justify-self:start} } @media (max-width:520px){ .brand-paw{width:29px;height:29px;flex-basis:29px} .brand-paw svg{width:28px;height:28px} .page-content-single{width:min(calc(100% - 24px),900px)} } /* v1.0.1 — homepage is now a direct blog index. */ .homepage-blog-index{background:var(--pac-paper)} .homepage-posts{padding-top:clamp(2.4rem,5vw,4.2rem)} .homepage-posts-heading{align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.75rem;padding-bottom:1.2rem;border-bottom:1px solid var(--pac-line);} .homepage-posts-heading h1{margin:.2rem 0 0;font-family:Georgia,"Times New Roman",serif;color:var(--pac-ink);font-size:clamp(2.35rem,4.2vw,3.8rem);font-weight:500;line-height:1.08;letter-spacing:-.035em} .homepage-post-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .homepage-posts .page-numbers,.homepage-posts .page-numbers li{list-style:none} .homepage-posts ul.page-numbers{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:2.6rem 0 0;padding:0} .homepage-posts ul.page-numbers li{margin:0;padding:0} @media (max-width:1100px){ .homepage-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .homepage-posts-heading{margin-bottom:1.25rem;} .homepage-posts-heading h1{font-size:clamp(2.1rem,10vw,3rem)} .homepage-post-grid{grid-template-columns:1fr} } /* ======================================================================== * v1.0.2 — QA hardening * Final-cascade fixes for card consistency, responsive navigation, desktop * dropdown edge cases, pagination touch targets, and long-content resilience. * ======================================================================== */ .homepage-posts-heading{display:block} .homepage-posts-heading>div{min-width:0} .homepage-posts-heading h1{overflow-wrap:anywhere;text-wrap:balance} .homepage-post-grid{align-items:stretch} .post-card{display:flex;flex-direction:column;min-width:0;height:100%} .post-card-media{flex:0 0 auto} .post-card-body{display:flex;flex:1 1 auto;flex-direction:column;min-width:0} .post-card-title,.post-card-title a{overflow-wrap:anywhere} .post-card-body>p{min-width:0} .post-card-meta{margin-top:auto;gap:.75rem} .post-card-meta span{min-width:0} .post-card a:focus-visible{outline:3px solid rgba(183,111,89,.45);outline-offset:3px} .page-numbers{min-width:44px;height:44px} .prose figure,.prose iframe,.prose video,.prose embed,.prose object{max-width:100%} .prose input,.prose textarea,.prose select{max-width:100%} @media (min-width:1101px){ .primary-menu .sub-menu li{position:relative} .primary-menu .sub-menu .sub-menu{top:-.65rem;} .primary-menu>li:nth-last-child(-n/**/+2)>.sub-menu{left:auto;right:-18px} } @media (max-width:820px){ .homepage-posts{padding-top:2.35rem} .homepage-posts-heading{margin-bottom:1.35rem} .post-card-meta{justify-content:flex-start;flex-wrap:wrap} } @media (max-width:620px){ .homepage-posts{padding-top:1.65rem} .homepage-posts-heading{padding-bottom:.9rem} .homepage-posts-heading h1{line-height:1.05} .post-card-media{aspect-ratio:16/9} .post-card-body>p{-webkit-line-clamp:2} .post-card-meta{font-size:.7rem} .navigation.pagination .nav-links,.homepage-posts ul.page-numbers{gap:.45rem} } @media (max-width:380px){ .homepage-posts-heading h1{font-size:2rem} .page-numbers{min-width:42px;height:42px} .page-numbers.prev,.page-numbers.next{padding-inline:.6rem} } /* v1.0.2 — additional QA polish */ .archive-hero .search-form{max-width:640px;margin-top:1.35rem} .page-header>.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto} .footer-main.no-footer-widget{grid-template-columns:1.5fr 1fr 1fr} .footer-main.has-footer-widget{grid-template-columns:1.45fr repeat(3,1fr)} .footer-nav-group:empty{display:none} @media (max-width:820px){ .page-header>.container{width:min(calc(100% - 28px),var(--container))} .footer-main.no-footer-widget,.footer-main.has-footer-widget{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} } @media (max-width:520px){ .page-header>.container{width:min(calc(100% - 24px),var(--container))} .footer-main.no-footer-widget,.footer-main.has-footer-widget{grid-template-columns:1fr} .footer-brand{grid-column:auto} .archive-hero .search-form{max-width:none} } /* ======================================================================== * v1.0.3 — consolidated UI/UX stability layer * Authoritative rules for viewport stability, article geometry, navigation, * pagination, touch targets and migrated WordPress content. * ======================================================================== */ html,body{width:100%;max-width:100%;overflow-x:hidden} @supports(overflow:clip){html,body{overflow-x:clip} } .site-main,.container,.article-content-wrap,.entry-content,.post-card,.post-card-body,.content-with-sidebar>*{min-width:0} .prose>*{max-width:100%} .prose div,.prose section,.prose aside,.prose figure,.prose form{max-width:100%} .prose iframe,.prose embed,.prose object{max-width:100%}.prose video,.prose canvas,.prose svg,.prose img{max-width:100%;height:auto} .prose [class*="wp-block-"]{box-sizing:border-box} /* Keep article text centered in the viewport while the desktop TOC occupies a side rail. */ @media (min-width:1181px){ .article-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--article)) minmax(0,1fr);gap:0;width:min(calc(100% - 40px),var(--container));max-width:var(--container);padding:0;justify-content:stretch;align-items:start} .article-rail{display:block;grid-column:1;width:min(180px,100%);justify-self:end;padding-right:2rem} .article-content-wrap{grid-column:2;width:100%} .prose .alignwide{width:min(1000px,calc(100vw - 40px));max-width:none;margin-left:50%;transform:translateX(-50%)} .prose .alignfull{width:min(var(--container),calc(100vw - 40px));max-width:none;margin-left:50%;transform:translateX(-50%)} .mobile-toc{display:none!important} } @media (max-width:1180px){ .article-layout{display:block;width:min(calc(100% - 40px),var(--article));max-width:var(--article);padding:0} .article-rail{display:none!important} .prose .alignwide,.prose .alignfull{width:100%;max-width:100%;margin-left:0;margin-right:0;transform:none} .mobile-toc{display:none} .mobile-toc.is-ready{display:block;margin:0 0 1.7rem;border:1px solid var(--pac-line);border-radius:14px;background:var(--pac-cream);overflow:hidden} } @media (max-width:820px){.article-layout{width:min(calc(100% - 28px),var(--article))} } @media (max-width:520px){.article-layout{width:min(calc(100% - 24px),var(--article))} } /* Tables and third-party blocks scroll inside the article instead of widening the page. */ .table-scroll,.prose .wp-block-table{width:100%;max-width:100%;margin:1.45rem 0;overflow-x:auto;overflow-y:hidden} @media (max-width:520px){} /* Pagination: style the links, never the WordPress