/* ==========================================================================
   Ofoq for Homzen — pages
   (blog, post, careers, agents, wishlist, about, contact, faqs, pricing,
    content shortcodes, coming soon, auth pages, errors, plugin bits)
   ========================================================================== */

/* Shared helpers ------------------------------------------------------------- */
.min-w-0 { min-width: 0; }
.text-blue-300 { color: var(--of-blue-300) !important; }
.chip-sm { min-height: 36px; padding: 0 .875rem; font-size: .8125rem; }
.empty-icon { width: 40px !important; height: 40px !important; color: var(--of-muted-strong); display: block; }
.empty-state h2, .empty-state .h3 { font-family: var(--of-font-display); }
.sep { display: inline-block; width: 1px; height: 14px; background: var(--of-line-strong); }

/* Nested containers (shortcode sections inside the default page container) */
#main > .container-of.py-5 .container-of { padding-inline: 0; max-width: none; }
#main > .container-of.py-5 > .page-content > .section:first-child,
#main > .container-of.py-5 > .page-content > section:first-child > .section:first-child { padding-top: 24px; }
#main > .container-of.py-5 > .page-content > .section:last-child { padding-bottom: 32px; }
#main > .container-of.py-5:has(> .page-content) { padding-bottom: 72px !important; }

/* Label / value list (contact details, agent facts, coming soon) */
.facts-of > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--of-line); }
.facts-of dt { font-size: .875rem; font-weight: 400; color: var(--of-muted-strong); flex: none; }
.facts-of dd { margin: 0; text-align: end; color: var(--of-navy); overflow-wrap: anywhere; }
.facts-of dd a { color: var(--of-navy); }
.facts-of dd a:hover { color: var(--of-blue); }

/* Prose pages (plain CKEditor content) */
.page-prose { max-width: 820px; }

/* Errors (404 / 500 / 503) ------------------------------------------------- */
.error-of { padding-block: 120px; }
.error-of-code { display: block; font-size: clamp(7rem, 22vw, 16rem); line-height: .9; color: var(--of-blue-100); font-weight: 500; letter-spacing: -.02em; }
.error-of-standalone { min-height: 100vh; display: flex; align-items: center; }
.error-of-standalone .error-of { width: 100%; }

/* Blog list ------------------------------------------------------------------ */
.post-card .p-card-media { aspect-ratio: 3 / 2; }
.post-card .p-card-title { font-size: 1.1875rem; }
.post-card .btn-link-of { align-self: flex-start; }
.blog-side .side-card { background: #fff; }
.widget-of-title { font-family: var(--of-font-text); font-size: .9375rem; font-weight: 600; margin: 0 0 1.125rem; padding-bottom: .875rem; border-bottom: 1px solid var(--of-navy); }
.widget-of-list li a { padding-block: .625rem; border-bottom: 1px solid var(--of-line); color: var(--of-body); transition: color .25s; }
.widget-of-list li:last-child a { border-bottom: 0; }
.widget-of-list li a:hover { color: var(--of-blue); }
.widget-of-post { display: flex; gap: .875rem; align-items: center; color: var(--of-navy); }
.widget-of-thumb { width: 72px; height: 72px; flex: none; overflow: hidden; background: var(--of-soft); }
.widget-of-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--of-ease-out); }
.widget-of-post:hover .widget-of-thumb img { transform: scale(1.06); }
.widget-of-post-title { font-family: var(--of-font-display); font-size: .9375rem; line-height: 1.6; transition: color .25s; }
.widget-of-post:hover .widget-of-post-title { color: var(--of-blue); }
.widget-of-search { display: flex; gap: .5rem; }
.widget-of-search .form-control { flex: 1; }
.widget-of-search .btn-icon { width: 52px; height: 52px; border-radius: var(--of-radius); }

/* Post detail ---------------------------------------------------------------- */
.post-of-head { padding-block: 72px 56px; }
.post-of-title { font-size: clamp(2.125rem, 4.4vw, 3.75rem); line-height: 1.35; max-width: 980px; }
.post-of-meta .avatar { width: 40px; height: 40px; }
.post-of-cover img { width: 100%; aspect-ratio: 21 / 9; min-height: 280px; object-fit: cover; display: block; }
.post-of-body { padding-block: 72px 120px; }
.post-of-lead { font-family: var(--of-font-display); font-weight: 300; font-size: clamp(1.25rem, 2.1vw, 1.625rem); line-height: 1.9; color: var(--of-navy); margin-bottom: 2.5rem; }
.post-of-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--of-line); }
.post-of-foot .social-btn svg { width: 1.125rem; height: 1.125rem; }
.post-of-nav { margin-top: 3.5rem; }
.post-of-nav .blog-row { grid-template-columns: 96px 1fr 48px; }
.post-of-nav .title { font-size: 1.25rem; }
.related-posts-of .p-card { background: transparent; }

/* Careers -------------------------------------------------------------------- */
.career-row .title { font-size: 1.625rem; }
.career-row .meta span + span { position: relative; }
.career-row-desc { color: var(--of-muted); font-size: .9375rem; }
.career-related-of { margin-top: 96px; }
.career-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .875rem; border-bottom: 1px solid var(--of-line); }
.career-facts > div:first-child { border-top: 1px solid var(--of-navy); }
.career-facts dt { font-size: .8125rem; font-weight: 400; color: var(--of-muted-strong); }
.career-facts dd { margin: 0; font-weight: 500; text-align: end; }

/* Agents --------------------------------------------------------------------- */
.team-card { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.team-card .agent-card { flex: 1; }
.team-card h2 a, .team-card h3 a { color: var(--of-navy); }
.team-card h2 a:hover, .team-card h3 a:hover { color: var(--of-blue); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--of-ease-out); }
.team-card:hover .team-photo img { transform: scale(1.05); }
.agent-of { padding-bottom: 72px; }
.agent-of .lead-of { max-width: 640px; }
.agent-of .social-btn svg, .agent-of .social-btn img { width: 1.125rem; height: 1.125rem; }
.agent-of-listings { padding-top: 72px; border-top: 1px solid var(--of-line); }

/* Wishlist ------------------------------------------------------------------- */
.wishlist-of { padding-bottom: 48px; }
.wishlist-of .compare-table { min-width: 640px; }
.compare-table thead th { vertical-align: bottom; min-width: 180px; }
.compare-head { display: flex; flex-direction: column; gap: .625rem; color: var(--of-navy); font-family: var(--of-font-display); font-weight: 500; }
.compare-head img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.compare-head:hover { color: var(--of-blue); }
.compare-table td.price { font-size: 1.0625rem !important; }

/* About (about-us shortcode) -------------------------------------------------- */
.about-of-head { padding-block: 96px 72px; }
.about-of-title { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.3; max-width: 900px; }
.about-of-media img { display: block; width: 100%; aspect-ratio: 21 / 9; min-height: 280px; object-fit: cover; }
.about-of-media .play { z-index: 2; }
.about-of-lead { font-size: clamp(1.375rem, 2.4vw, 1.875rem); color: var(--of-navy); }

/* Contact (contact-form shortcode) -------------------------------------------- */
.contact-of { padding-block: 72px 120px; }
.page-content > .contact-of:first-child { padding-top: 72px; }
#main > .container-of.py-5 .contact-of { padding-block: 16px 64px; }
.contact-of .social-btn svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.6; }
.contact-of .facts-of dd { direction: auto; }
.contact-band-of { position: relative; overflow: hidden; padding-block: 96px; }
.contact-band-of-bg { position: absolute; inset: 0; background: var(--band-image) center / cover no-repeat; opacity: .14; }
.contact-band-of h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

/* Botble contact form inside the Ofoq panel */
.contact-form-of .contact-form-row { --bs-gutter-x: 1rem; --bs-gutter-y: 0; }
.contact-form-of .contact-form-group { margin-bottom: 1rem; }
.contact-form-of .form-control, .contact-form-of .form-select { background-color: #fff; }
.contact-form-of .form-label { color: var(--of-navy); }
.contact-form-of textarea.form-control { min-height: 140px; }
.contact-form-of .form-check { display: flex; align-items: flex-start; gap: .625rem; padding: 0; margin: .25rem 0 0; font-size: .875rem; color: var(--of-body); cursor: pointer; }
.contact-form-of .form-check .form-check-input { float: none; margin: .25rem 0 0; flex: none; }
.contact-form-of label.required.form-check::after { display: none; }
.contact-form-of button[type="submit"], .contact-form-of .tf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; min-height: 56px; margin-top: .5rem;
  padding: 1rem 2rem; border: 1px solid var(--of-blue); border-radius: var(--of-radius); background: var(--of-blue); color: #fff;
  font-weight: 600; font-size: 1rem; transition: background-color .3s var(--of-ease), border-color .3s var(--of-ease);
}
.contact-form-of button[type="submit"]:hover, .contact-form-of .tf-btn:hover { background: var(--of-blue-700); border-color: var(--of-blue-700); }
.contact-form-of .contact-message { margin-top: .75rem; padding: .875rem 1rem; border-radius: var(--of-radius); font-size: .9375rem; }
.contact-form-of .contact-success-message { background: #e8f5ef; color: var(--of-success); }
.contact-form-of .contact-error-message { background: #fdf0e9; color: var(--of-danger); }
.contact-form-of .captcha, .contact-form-of [class*="captcha"] { margin-bottom: 1rem; }
.contact-band-of .contact-form-of .form-control { background: var(--of-soft); border-color: var(--of-line); }
.contact-band-of .contact-form-of .form-control:focus { background: #fff; border-color: var(--of-blue); }

/* Map (google-map shortcode) */
.map-of { position: relative; background: #eef1f7; }
.map-of > div { position: relative !important; height: 440px !important; padding: 0 !important; margin: 0 !important; overflow: hidden; }
.map-of iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0; display: block; filter: grayscale(.35) contrast(1.02); }
#main > .container-of.py-5 .map-of { margin-bottom: 0; }
.page-content > .map-of:last-child { margin-bottom: 0; }

/* FAQs accordion ---------------------------------------------------------------- */
.faq-of { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--of-navy); border-top: 1px solid var(--of-navy); }
.faq-of .accordion-item { border: 0; border-bottom: 1px solid var(--of-line); border-radius: 0 !important; background: transparent; }
.faq-of .accordion-header { margin: 0; }
.faq-of .accordion-button { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; background: transparent; box-shadow: none; color: var(--of-navy); font-family: var(--of-font-display); font-size: 1.1875rem; font-weight: 500; line-height: 1.6; text-align: start; border-radius: 0 !important; transition: color .3s; }
.faq-of .accordion-button::after { display: none; }
.faq-of .accordion-button:hover { color: var(--of-blue); }
.faq-of .accordion-button:focus-visible { outline: 2px solid var(--of-blue); outline-offset: 2px; }
.faq-of-icon { width: 40px; height: 40px; flex: none; border: 1px solid var(--of-line-strong); border-radius: 999px; display: grid; place-items: center; transition: transform .45s var(--of-ease-out), background-color .3s, border-color .3s, color .3s; }
.faq-of .accordion-button:not(.collapsed) .faq-of-icon { transform: rotate(45deg); background: var(--of-navy); border-color: var(--of-navy); color: #fff; }
.faq-of .accordion-body { padding: 0 0 1.75rem; padding-inline-end: 4rem; color: var(--of-body); line-height: 2; }
.faq-of-section .sec-head { margin-bottom: 2rem; }

/* Pricing plans ----------------------------------------------------------------- */
.pricing-of-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; border: 1px solid var(--of-line); border-top: 2px solid var(--of-navy); background: #fff; transition: box-shadow .4s var(--of-ease), transform .4s var(--of-ease-out); }
.pricing-of-card:hover { box-shadow: var(--of-shadow-sm); transform: translateY(-4px); }
.pricing-of-card.is-featured { border-top-color: var(--of-blue); background: var(--of-soft); }
.pricing-of-price .num { font-size: 2.25rem; line-height: 1.3; }
.pricing-of-price small { font-size: .875rem; color: var(--of-muted); margin-inline-start: .25rem; }
.pricing-of-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--of-line); font-size: .9375rem; }
.pricing-of-list li { display: flex; gap: .625rem; align-items: flex-start; }
.pricing-of-list .icon { color: var(--of-blue); margin-top: .25rem; }

/* Content shortcodes (quote / image / tabs) -------------------------------------- */
.quote-of { margin: 3rem 0; padding: 2rem 0; border-block: 1px solid var(--of-line); }
.quote-of .quote { color: var(--of-navy); }
.content-image-of { margin-block: 2.5rem; }
.content-image-of img { width: 100%; height: auto; display: block; }
.content-tab-of { padding-block: 24px 48px; }
.content-tab-of-nav { gap: 0; border-top: 1px solid var(--of-navy); }
.content-tab-of-nav .nav-link { display: flex; gap: 1rem; align-items: baseline; width: 100%; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--of-line); border-radius: 0; background: none; color: var(--of-muted-strong); font-weight: 500; text-align: start; transition: color .3s, padding .45s var(--of-ease-out); }
.content-tab-of-nav .nav-link .n { color: var(--of-muted); font-size: .875rem; }
.content-tab-of-nav .nav-link:hover { color: var(--of-navy); }
.content-tab-of-nav .nav-link.active { color: var(--of-navy); font-weight: 600; padding-inline-start: .75rem; box-shadow: inset -2px 0 0 var(--of-blue); }
[dir="ltr"] .content-tab-of-nav .nav-link.active { box-shadow: inset 2px 0 0 var(--of-blue); }
.content-tab-of-nav .nav-link.active .n { color: var(--of-blue); }
.content-tab-of .principle { min-height: 280px; }
.content-tab-of-list { padding-inline-start: 1.25rem; color: var(--of-body); line-height: 2; }

/* Coming soon (no-layout page) ----------------------------------------------------- */
.coming-of { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 100vh; background: #fff; }
.coming-of-content { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: 40px clamp(16px, 6vw, 96px); }
.coming-of-logo img { max-height: 48px; width: auto; }
.coming-of-main h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: 640px; }
.coming-of-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; margin: 2.5rem 0; border-top: 1px solid var(--of-navy); }
.coming-of-countdown > div { padding-top: 1.25rem; display: flex; flex-direction: column-reverse; }
.coming-of-countdown dd { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.2; color: var(--of-navy); }
.coming-of-countdown dt { font-size: .8125rem; font-weight: 400; color: var(--of-muted-strong); }
.coming-of-form { max-width: 560px; }
.coming-of-form form { display: flex; gap: .5rem; flex-wrap: wrap; }
.coming-of-form form > * { margin: 0 !important; }
.coming-of-form .form-control { flex: 1; min-width: 220px; }
.coming-of-form .mb-3, .coming-of-form .form-group { flex: 1 1 260px; margin: 0 !important; }
.coming-of-form button[type="submit"] { min-height: 52px; padding: 0 1.75rem; border: 0; border-radius: var(--of-radius); background: var(--of-navy); color: #fff; font-weight: 600; }
.coming-of-form button[type="submit"]:hover { background: var(--of-navy-800); }
.coming-of-foot { max-width: 560px; }
.coming-of-foot .social-btn svg { width: 1.125rem; height: 1.125rem; }
.coming-of-media { position: relative; overflow: hidden; background: var(--of-soft); }
.coming-of-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Auth pages (login / register / password) + auth modal ------------------------------ */
.auth-of { padding-block: 24px 72px; }
.auth-of-intro { position: sticky; top: 120px; }
.auth-of-panel { border: 1px solid var(--of-line); border-top: 2px solid var(--of-navy); padding: clamp(1.5rem, 4vw, 3rem); background: #fff; }
.auth-of-panel .auth-card, .modal-of .auth-card { background: transparent !important; border: 0; box-shadow: none; border-radius: 0; }
.auth-of-panel .auth-card > .card-body, .modal-of .auth-card > .card-body { padding: 0 !important; }
.modal-of .auth-card > .card-header { padding: 0 0 1rem !important; background: transparent !important; }
.modal-of .auth-card > .card-header .bg-white { display: none; }
.modal-of .auth-card > .card-header h3 { font-family: var(--of-font-text); font-size: .9375rem !important; font-weight: 400; color: var(--of-muted-strong); margin: 0 !important; }
.modal-of .auth-card > .card-header p { display: none; }
.auth-card .form-label { color: var(--of-navy); }
.auth-card .auth-input-icon { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 4; display: grid; place-items: center; width: 48px; padding: 0; border: 0; background: transparent; color: var(--of-muted); pointer-events: none; }
.auth-card .auth-input-icon .icon { width: 1.125rem; height: 1.125rem; stroke-width: 1.6; }
.auth-card .form-control.ps-5 { padding-inline-start: 3rem !important; padding-inline-end: .75rem; }
.auth-card .input-group > .form-control { border-radius: var(--of-radius) !important; }
.auth-card .input-group > .form-control.ps-5 { padding-inline-end: 3rem; }
.auth-card .input-password-toggle { display: grid; place-items: center; height: 100%; padding: 0 1rem !important; color: var(--of-muted); }
.auth-card .input-password-toggle .icon { width: 1.125rem; height: 1.125rem; }
.auth-card .form-check { display: inline-flex; gap: .5rem; align-items: center; padding: 0; margin: 0; font-size: .875rem; }
.auth-card .form-check .form-check-input { float: none; margin: 0; }
.auth-card a { color: var(--of-blue); text-decoration: none !important; font-weight: 500; }
.auth-card a:hover { color: var(--of-blue-700); }
.auth-card .row.g-0.mb-3 { align-items: center; font-size: .875rem; }
.auth-card .btn-auth-submit, .auth-card button[type="submit"] { min-height: 52px; width: 100%; --bs-btn-bg: var(--of-blue); --bs-btn-color: #fff; --bs-btn-border-color: var(--of-blue); --bs-btn-hover-bg: var(--of-blue-700); --bs-btn-hover-border-color: var(--of-blue-700); --bs-btn-hover-color: #fff; }
.auth-card .btn-auth-submit .icon { width: 1.125rem; height: 1.125rem; }
[dir="rtl"] .auth-card .btn-auth-submit .icon { transform: scaleX(-1); }
.auth-card .mt-3.text-center { font-size: .875rem; color: var(--of-muted-strong); }
.auth-card .text-danger, .auth-card .invalid-feedback { font-size: .8125rem; }
.auth-card .form-text, .auth-card .help-block { font-size: .8125rem; color: var(--of-muted); }

/* Social login buttons (social-login plugin) */
.social-login-basic, .social-login { margin-top: 1.25rem; }
.social-login-basic .social-login-title, .login-options-title, .social-login p { position: relative; text-align: center; font-size: .8125rem; color: var(--of-muted); margin-bottom: .875rem; }
.social-login-basic ul, .social-icons { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; padding: 0; margin: 0; list-style: none; }
.social-login-basic li, .social-icons li { margin: 0 !important; }
.social-login-basic a, .social-icons a, .social-login-button {
  display: flex !important; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 48px; padding: .5rem 1rem !important;
  border: 1px solid var(--of-line-strong) !important; border-radius: var(--of-radius) !important; background: #fff !important; color: var(--of-navy) !important;
  font-size: .875rem; font-weight: 600; box-shadow: none !important; transition: border-color .25s;
}
.social-login-basic a:hover, .social-icons a:hover, .social-login-button:hover { border-color: var(--of-navy) !important; }
.social-login-basic img, .social-icons img, .social-login-button img, .social-login-button svg { width: 1.125rem; height: 1.125rem; }

/* Captcha (captcha plugin) */
.contact-form-of .grecaptcha-badge, form .math-captcha { margin-bottom: 1rem; }
form .math-captcha .form-control, form [name="math-captcha"] { max-width: 220px; }

/* Newsletter popup (newsletter plugin) */
#newsletter-popup .modal-content, .newsletter-popup .modal-content { border: 0; border-radius: var(--of-radius-lg); overflow: hidden; box-shadow: var(--of-shadow); }
#newsletter-popup .modal-title, .newsletter-popup .modal-title, .newsletter-popup h2, .newsletter-popup h3 { font-family: var(--of-font-display); font-weight: 500; color: var(--of-navy); }
#newsletter-popup .btn-close, .newsletter-popup .btn-close { position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 3; background-color: #fff; border-radius: 999px; padding: .75rem; opacity: 1; }
#newsletter-popup button[type="submit"], .newsletter-popup button[type="submit"] { min-height: 52px; border: 0; border-radius: var(--of-radius); background: var(--of-navy); color: #fff; font-weight: 600; padding-inline: 1.5rem; }
#newsletter-popup .newsletter-popup-bg, .newsletter-popup [class*="-bg"] { background-size: cover; background-position: center; }

/* Announcement bar (announcement plugin, outside the top bar) */
.ae-anno-announcement-wrapper { font-family: var(--of-font-text); font-size: .875rem; }
.ae-anno-announcement-wrapper a { text-decoration: underline; text-underline-offset: 3px; }

/* Responsive ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .auth-of-intro { position: static; }
  .coming-of { grid-template-columns: 1fr; }
  .coming-of-media { min-height: 320px; order: -1; }
  .about-of-head { padding-block: 64px 48px; }
  .post-of-head { padding-block: 48px 40px; }
  .post-of-body { padding-block: 48px 88px; }
  .contact-of { padding-block: 48px 88px; }
  .error-of { padding-block: 72px; }
  .career-related-of { margin-top: 72px; }
  .content-tab-of .principle { min-height: 0; }
}
@media (max-width: 767.98px) {
  .facts-of > div { flex-direction: column; gap: .25rem; }
  .facts-of dd { text-align: start; }
  .career-row .title { font-size: 1.25rem; }
  .post-of-nav .blog-row { grid-template-columns: 1fr 48px; }
  .post-of-nav .title { font-size: 1.0625rem; }
  .faq-of .accordion-button { font-size: 1.0625rem; padding-block: 1.25rem; }
  .faq-of .accordion-body { padding-inline-end: 0; }
  .contact-band-of { padding-block: 64px; }
  .coming-of-countdown { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coming-of-content { padding-block: 24px; gap: 2rem; }
  .map-of > div { height: 320px !important; }
  .agent-of-listings { padding-top: 56px; }
  .team-card .agent-card .btn-sm { --bs-btn-padding-x: .75rem; }
  .pricing-of-card { padding: 1.5rem; }
}

/* Map frame fallback: Ofoq grid placeholder behind the embed (shows when the frame is blocked) */
.map-of { background-color: #eef1f7; background-image: linear-gradient(#e0e5ee 1px, transparent 1px), linear-gradient(90deg, #e0e5ee 1px, transparent 1px); background-size: 48px 48px; }
.map-of-link { position: absolute; z-index: 3; top: 1rem; inset-inline-start: 1rem; display: inline-flex; align-items: center; gap: .375rem; background: #fff; color: var(--of-navy); font-size: .8125rem; font-weight: 500; padding: .5rem .75rem; border-radius: 2px; box-shadow: var(--of-shadow-sm); }
.map-of-link:hover { color: var(--of-blue); }
.map-of-link .icon { color: var(--of-blue); }

/* Blog row list (blog page, category, tag, search, related posts) */
.blog-list-of .blog-row { align-items: start; }
.blog-list-of .meta { padding-top: .5rem; }
.blog-list-of .row-arrow { margin-top: .125rem; }
.blog-row-main { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.blog-row-main .title { flex: none; }
.blog-row-desc { color: var(--of-muted); font-size: .9375rem; line-height: 1.9; }
.related-posts-of .blog-list-of { background: transparent; }
@media (max-width: 767.98px) {
  .blog-list-of .meta { padding-top: 0; }
  .blog-row-main .title { font-size: 1.25rem; }
}