/*
Theme Name: Raines Over The Rockies Blog
Theme URI: https://rordental.com/wp-blog/
Author: Raines Over The Rockies Family Dentistry
Description: Blog theme matching the rordental.com Gatsby design - header, footer, hero, cards and pager.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: rordental
*/

/* Values below are copied from the Gatsby build's Emotion styles (source class in each heading). */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
html.ror-no-scroll { overflow: hidden; }

@keyframes ror-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ror-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Header: plain <img> logo in place of gatsby-image -------------------- */
.ror-logo img { width: 225px; height: auto; }
@media (max-width: 1319px) { .ror-logo img { width: 169px; } }

/* ---- Desktop dropdowns (.css-1e3nzj1, .css-rixci9, .css-5qtyfj) ------------ */
.ror-dd { position: relative; }
.ror-dd-panel { position: absolute; top: calc(1.125rem * 1.5 + 4px); left: 0; z-index: 100; width: max-content; animation: ror-enter .3s ease; }
.ror-dd-panel > ul,
.ror-dd-flyout > ul { list-style: none; margin: 24px 0 0; padding: 0; border-radius: 16px; background-color: #fff; box-shadow: 0 16px 32px 0 rgba(0, 0, 0, .15); overflow-y: auto; max-height: calc(100vh - 175px); }
.ror-dd-panel li { position: static; line-height: 150%; }
.ror-dd-flyout { position: absolute; left: 100%; z-index: 101; width: max-content; margin-top: calc(-16px - 1.62rem); animation: ror-enter .3s ease; }
.ror-dd-flyout > ul { margin: 0; }
.ror-dd-link { display: flex; align-items: center; width: 100%; padding: 8px 16px; border: 0; background: transparent; font: inherit; font-size: 1rem; font-weight: 400; line-height: 162%; color: #5B6A71; text-align: left; text-transform: capitalize; white-space: nowrap; cursor: pointer; transition: color .3s ease-in-out, background-color .3s ease-in-out; }
.ror-dd-link svg path { fill: #5B6A71; transition: fill .3s ease-in-out; }
.ror-dd-link:hover,
.ror-dd-link:focus-visible,
.ror-dd-subtrigger[aria-expanded="true"] { color: #332400; background-color: #FFF0CC; }
.ror-dd-link:hover svg path,
.ror-dd-link:focus-visible svg path,
.ror-dd-subtrigger[aria-expanded="true"] svg path { fill: #986D01; }
.ror-dd-link[aria-current="page"] { color: #3E83F3; }
.ror-dd-subtrigger > svg { margin-left: 10px; transform: rotate(-90deg); transition: transform .3s ease-in-out; }
.ror-dd-subtrigger[aria-expanded="true"] > svg { transform: rotate(-270deg); }

/* ---- Mobile menu (.css-xg8z3w, .css-1jn3rdx, .css-d8b86) ----------------- */
.ror-mnav { position: fixed; inset: 0; z-index: 101; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 8px 16px; background-color: #010A18; animation: ror-fade .3s ease-in; }
.ror-mnav[hidden] { display: none; }
@media (min-width: 768px) { .ror-mnav { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) { .ror-mnav { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 1320px) { .ror-mnav { display: none !important; } }
.ror-mnav-top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-bottom: 32px; }
@media (min-height: 575px) { .ror-mnav-top { margin-bottom: 64px; } }
@media (min-height: 675px) { .ror-mnav-top { margin-bottom: 96px; } }
@media (min-height: 775px) { .ror-mnav-top { margin-bottom: 128px; } }
.ror-mnav-top button { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.ror-mnav-close { margin-left: auto; }
.ror-mnav-back { font-size: 1rem; font-weight: 600; color: #F1F3F4; text-transform: capitalize; }
.ror-mnav-back > svg { margin-right: 16px; flex-shrink: 0; transform: rotate(90deg); }
.ror-mnav-back svg path { fill: #F1F3F4; }
.ror-mnav-panel { display: flex; flex-direction: column; align-items: flex-start; max-width: max-content; margin: 0 auto; padding-right: 10px; overflow-y: auto; }
.ror-mnav-panel[hidden] { display: none; }
.ror-mnav-item { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 6px 4px; border: 0; background: transparent; font: inherit; font-size: 1rem; font-weight: 600; line-height: 162%; color: #F1F3F4; text-transform: capitalize; cursor: pointer; transition: color .3s ease-in-out; }
.ror-mnav-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: transparent; transition: background-color .3s ease-in-out; }
.ror-mnav-item.current-nav-category { color: #9FC1F9; }
.ror-mnav-item > svg { transform: rotate(-90deg); }
.ror-mnav-item svg path { fill: currentColor; }
@media (pointer: fine) {
	.ror-mnav-item:hover, .ror-mnav-item:focus-visible { color: #FEE29A; }
	.ror-mnav-item:hover::after, .ror-mnav-item:focus-visible::after { background-color: #FEC73A; }
}
.ror-mnav-cta { margin: auto 0 32px; }

/* ---- Hero (.css-ecgcnf, .css-upsbux, .css-tx8oav) ------------------------- */
.ror-hero { padding: 96px 16px 32px; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; background-color: #031430; color: #F1F3F4; }
@media (min-width: 768px) { .ror-hero { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) {
	.ror-hero { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 96px 48px 48px; }
	.ror-hero > * { width: 50%; }
}
@media (min-width: 1280px) { .ror-hero { padding: 152px 64px 64px; border-bottom-left-radius: 64px; border-bottom-right-radius: 64px; } }
.ror-hero-text { max-width: 770px; margin-bottom: 32px; }
@media (min-width: 1024px) { .ror-hero-text { margin-bottom: 0; } }
.ror-hero h1 { position: relative; margin: 40px 0; padding-bottom: 20px; font-size: 1.5rem; font-weight: 600; line-height: 122%; text-transform: capitalize; }
@media (min-width: 1280px) { .ror-hero h1 { font-size: 2.25rem; } }
.ror-hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 128px; height: 4px; background-color: #3E83F3; }
.ror-hero-media { max-width: 800px; overflow: hidden; border-radius: 32px; }
@media (min-width: 1280px) { .ror-hero-media { border-radius: 64px; } }
.ror-hero-media img { width: 100%; height: auto; aspect-ratio: 800 / 580; object-fit: cover; }

.ror-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.ror-breadcrumb > a,
.ror-breadcrumb > span { font-size: 1rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.ror-breadcrumb > a { color: #F1F3F4; transition: color .3s ease-in-out; }
.ror-breadcrumb > a:hover,
.ror-breadcrumb > a:focus-visible { color: #FED367; }
.ror-breadcrumb svg { margin-right: 12px; }
.ror-breadcrumb > span:last-of-type { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---- White content card (.css-1tthmvf, .css-1sm3x8j) ---------------------- */
.ror-section { position: relative; padding: 32px 16px; background-color: #F1F3F4; }
@media (min-width: 768px) { .ror-section { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) { .ror-section { padding: 48px; } }
@media (min-width: 1280px) { .ror-section { padding: 64px; } }
.ror-section::before,
.ror-section::after { content: ""; position: absolute; top: -50px; left: 0; z-index: -1; width: 50px; height: 50px; background-color: #F1F3F4; }
.ror-section::after { left: unset; right: 0; }
.ror-section > * { max-width: 1600px; margin: 0 auto; padding: 32px 16px; border-radius: 32px; background-color: #fff; box-shadow: 0 32px 64px -16px rgba(3, 20, 48, .4); }
@media (min-width: 768px) { .ror-section > * { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) { .ror-section > * { padding: 48px; } }
@media (min-width: 1280px) { .ror-section > * { padding: 64px; } }
.ror-section > * > h3 { position: relative; margin: 0 0 32px; padding-bottom: 20px; }
.ror-section > * > h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 256px; max-width: 100%; height: 4px; background-color: #3E83F3; }
.ror-section > * > p { margin: 0 0 16px; }
.ror-section > * > p:last-of-type { margin-bottom: 0; }
.ror-section > * > p + h3 { margin-top: 32px; }
.ror-section > * > p a,
.ror-section > * > ul > li a { text-decoration: underline; transition: color .3s ease-in-out; }
.ror-section > * > p a:hover,
.ror-section > * > p a:focus,
.ror-section > * > ul > li a:hover,
.ror-section > * > ul > li a:focus { color: #3E83F3; }
.ror-single h2 { font-size: 1.5rem; font-weight: 600; line-height: 122%; }
.ror-single h3 { font-size: 1.125rem; line-height: 134.6%; }
@media (min-width: 1280px) {
	.ror-single h2 { font-size: 2.25rem; }
	.ror-single h3 { font-size: 1.5rem; }
}
.ror-single img { height: auto; border-radius: 16px; }
.ror-post-date { margin-bottom: 0; font-size: .875rem; color: #5B6A71; }
@media (min-width: 1280px) { .ror-post-date { font-size: 1rem; } }

/* ---- Post grid: flexbox, 1 column mobile / 2 tablet / 3 desktop ----------- */
.ror-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
.ror-card { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) { .ror-card { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); } }
@media (min-width: 1024px) { .ror-card { flex-basis: calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); } }
@media (min-width: 1280px) {
	.ror-grid { gap: 48px; }
	.ror-card { flex-basis: calc((100% - 96px) / 3); max-width: calc((100% - 96px) / 3); }
}

/* ---- Card (.css-ur2w3q, .css-v10gew) --------------------------------------- */
.ror-card { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border-radius: 16px; background-color: #F1F3F4; box-shadow: 0 16px 32px 0 rgba(1, 10, 24, .15); }
.ror-card-media { display: block; width: 100%; overflow: hidden; border-radius: 16px; }
.ror-card-media img { width: 100%; height: auto; aspect-ratio: 418 / 300; object-fit: cover; transition: transform .3s ease-in-out; }
.ror-card-media:hover img,
.ror-card-media:focus img { transform: scale(1.1); }
.ror-card-title { margin-top: 20px; }
.ror-card-title h4 { margin: 0; transition: color .3s ease-in-out; }
.ror-card-title:hover,
.ror-card-title:focus { color: #3F84F3; }
.ror-card-date { margin: 8px 0; font-size: .875rem; font-weight: 500; color: #093D90; }
@media (min-width: 1280px) { .ror-card-date { font-size: 1rem; } }
.ror-card-desc { margin: 0 0 20px; }
.ror-card-more { display: inline-flex; align-items: center; margin-top: auto; margin-left: auto; padding: 4px 4px 3px; border-bottom: 1px solid transparent; font-size: 1rem; font-weight: 600; line-height: 162%; color: #0C51C0; text-transform: uppercase; transition: color .3s ease-in-out, border-color .3s ease-in-out; }
.ror-card-more:hover,
.ror-card-more:focus-visible { border-color: #093D90; color: #093D90; }
.ror-card-more:active { border-color: #062860; color: #062860; }

/* ---- Pager (.css-w3nnz2) ---------------------------------------------------- */
.ror-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 8px; margin-top: 48px; }
.ror-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; margin: 0 8px; padding: 1.5px 9px; border-radius: 4px; font-weight: 600; transition: background-color .3s ease-in-out, color .3s ease-in-out; }
.ror-pager a.page-numbers:hover,
.ror-pager a.page-numbers:focus-visible { background-color: #9FC1F9; }
.ror-pager .current { background-color: #CFE0FC; color: #031430; }
.ror-pager .dots { margin: 0; }
.ror-pager .prev svg { transform: rotate(90deg); }
.ror-pager .next svg { transform: rotate(-90deg); }
.ror-pager svg path { fill: currentColor; }