/*
Theme Name: HH Mortgages 1.0.5
Theme URI: https://hhmortgages.com
Author: HH Mortgages
Description: A lightweight native WordPress block theme for Hanif Hosseini and HH Mortgages.
Version: 1.0.5
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: hh-mortgages
*/

:root {
  --hh-cream: #f3efe5;
  --hh-paper: #faf8f2;
  --hh-forest: #173e35;
  --hh-forest-deep: #0e2c26;
  --hh-clay: #c86f4a;
  --hh-clay-light: #e6a98c;
  --hh-ink: #1e2b27;
  --hh-muted: #5d6864;
  --hh-line: rgba(30, 43, 39, .16);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { transition: color .2s ease, background .2s ease, transform .2s ease; }
.wp-site-blocks { overflow: hidden; }
.hh-serif { font-family: Georgia, "Times New Roman", serif; }
.hh-kicker { color: var(--hh-forest); font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hh-light { color: var(--hh-clay-light); }
.hh-accent { color: var(--hh-clay); font-style: italic; font-weight: 400; }
.hh-button .wp-block-button__link { border-radius: 0; font-size: .76rem; font-weight: 800; padding: 1rem 1.25rem; }
.hh-button .wp-block-button__link:hover { transform: translateY(-2px); }
.hh-text-link { font-size: .78rem; font-weight: 800; text-decoration: underline; text-underline-offset: .4rem; }

.hh-brokerage-bar { background: var(--hh-forest-deep); color: #c7d2cd; min-height: 62px; padding: .3rem 5vw; }
.hh-brokerage-bar .wp-block-image { margin: 0; }
.hh-brokerage-bar img { display: block; height: auto; width: 56px; }
.hh-brokerage-copy { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hh-main-header { background: rgba(243,239,229,.97); border-bottom: 1px solid var(--hh-line); min-height: 88px; padding: 0 5vw; }
.hh-wordmark { color: var(--hh-forest); font-size: 1rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hh-wordmark small { color: var(--hh-clay); display: block; font-size: .5rem; letter-spacing: .22em; margin-top: .15rem; }
.hh-main-header .wp-block-navigation { font-size: .75rem; font-weight: 700; }
.hh-main-header .wp-block-navigation-item__content:hover { color: var(--hh-clay); }

.hh-hero { background: var(--hh-cream); min-height: 700px; }
.hh-hero-copy { padding: 6.5rem 5vw 4rem 10vw; }
.hh-hero h1 { font-size: clamp(3.6rem, 6.4vw, 6.5rem); letter-spacing: -.055em; line-height: .92; margin: 1.8rem 0; }
.hh-hero-lede { color: #53605c; font-size: 1.05rem; line-height: 1.75; max-width: 570px; }
.hh-hero-actions { margin-top: 2rem; }
.hh-trust-row { border-top: 1px solid var(--hh-line); font-size: .6rem; font-weight: 800; letter-spacing: .13em; margin-top: 3.5rem; padding-top: 1.25rem; text-transform: uppercase; }
.hh-hero-visual { align-self: stretch; background: var(--hh-forest); min-height: 700px; overflow: hidden; padding: 5rem 3rem 0; position: relative; }
.hh-hero-visual::before, .hh-hero-visual::after { border: 1px solid rgba(230,169,140,.32); border-radius: 50%; content: ""; height: 450px; left: 50%; position: absolute; top: 4rem; transform: translateX(-50%); width: 450px; }
.hh-hero-visual::after { height: 590px; top: 1rem; width: 590px; }
.hh-portrait { height: 610px; margin: 0 auto; max-width: 500px; position: relative; z-index: 1; }
.hh-portrait img { height: 100%; object-fit: cover; width: 100%; }
.hh-advisor-card { background: var(--hh-paper); bottom: 2rem; box-shadow: 0 16px 30px rgba(0,0,0,.14); left: 1rem; padding: 1.25rem 1.5rem; position: absolute; width: min(290px, 78%); z-index: 2; }
.hh-advisor-card p { margin: .2rem 0; }
.hh-advisor-label { color: var(--hh-clay); font-size: .56rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hh-advisor-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; }
.hh-advisor-licence { color: #66716e; font-size: .65rem; }

.hh-section { padding: 7rem 7vw; }
.hh-section-heading { font-size: clamp(3rem, 5.2vw, 5rem); letter-spacing: -.045em; line-height: 1.02; margin: 1rem 0 2rem; }
.hh-pathways { background: var(--hh-paper); }
.hh-path-intro { margin-bottom: 3.5rem; }
.hh-path-intro > .wp-block-column:last-child { color: var(--hh-muted); line-height: 1.75; }
.hh-path-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hh-path-card { background: var(--hh-cream); border: 1px solid var(--hh-line); display: flex; flex-direction: column; margin-right: -1px; min-height: 320px; padding: 2rem 1.5rem; }
.hh-path-card:hover { background: #ece4d5; }
.hh-path-number { color: var(--hh-clay); font-size: .6rem; font-weight: 800; letter-spacing: .15em; }
.hh-path-card h3 { color: var(--hh-forest); font-size: 1.65rem; line-height: 1.15; margin: 3rem 0 1rem; }
.hh-path-card p { color: #66716d; font-size: .78rem; line-height: 1.7; }
.hh-path-card .hh-text-link { margin-top: auto; }
.hh-path-support { border-top: 1px solid var(--hh-line); margin-top: 1.5rem; padding-top: 1.5rem; }

.hh-statement { background: var(--hh-paper); padding-left: 10vw; padding-right: 10vw; }
.hh-statement-grid { margin-left: 18%; margin-top: 3.5rem; }
.hh-statement-lead { color: var(--hh-forest); font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; line-height: 1.5; }
.hh-muted-copy { color: var(--hh-muted); line-height: 1.8; }

.hh-solutions { background: var(--hh-forest); color: white; }
.hh-solutions .hh-section-heading { color: white; }
.hh-service { border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 2rem; grid-template-columns: 60px 1fr 1.2fr auto; padding: 2rem 0; }
.hh-service:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.hh-service-number { color: var(--hh-clay-light); font-size: .68rem; font-weight: 800; }
.hh-service h3 { font-size: 1.7rem; margin: 0; }
.hh-service p { color: #b8c4bf; font-size: .85rem; line-height: 1.7; margin: 0; }
.hh-service a { color: white; }
.hh-tags { margin-top: 2rem; }
.hh-tags p { border: 1px solid rgba(255,255,255,.22); color: #cad3cf; font-size: .6rem; font-weight: 800; letter-spacing: .1em; padding: .7rem .9rem; text-transform: uppercase; }

.hh-process { background: var(--hh-cream); }
.hh-step { border-top: 1px solid var(--hh-line); padding: 1.5rem 0; }
.hh-step:last-child { border-bottom: 1px solid var(--hh-line); }
.hh-step-number { color: var(--hh-clay); font-size: .65rem; font-weight: 800; letter-spacing: .14em; }
.hh-step h3 { font-size: 1.5rem; margin: 0 0 .45rem; }
.hh-step p { color: #66716d; font-size: .83rem; line-height: 1.65; margin: 0; }

.hh-story { background: var(--hh-cream); }
.hh-story-body { border-top: 1px solid var(--hh-line); margin-top: 3rem; padding-top: 3rem; }
.hh-pullquote { color: var(--hh-clay); font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; line-height: 1.45; }
.hh-facts p { border: 1px solid var(--hh-line); color: var(--hh-forest); font-size: .58rem; font-weight: 800; letter-spacing: .1em; padding: .65rem .8rem; text-transform: uppercase; }

.hh-lenders { background: var(--hh-paper); }
.hh-lender-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 3.5rem; }
.hh-lender-slot { align-items: center; background: rgba(243,239,229,.45); border: 1px solid var(--hh-line); display: flex; justify-content: center; margin: 0 -1px -1px 0; min-height: 118px; padding: 1.1rem; text-align: center; }
.hh-lender-slot img { display: block; filter: grayscale(1) saturate(.2); height: auto; margin: auto; max-height: 54px; max-width: 140px; object-fit: contain; opacity: .72; transition: filter .2s ease, opacity .2s ease, transform .2s ease; width: 92%; }
.hh-lender-slot:hover img { filter: grayscale(.2) saturate(.7); opacity: .95; transform: translateY(-2px); }
.hh-lender-note { color: #7b8580; font-size: .65rem; margin-top: 1.25rem; }

.hh-planner { background: var(--hh-clay); color: white; }
.hh-planner .hh-section-heading { color: white; }
.hh-planner .hh-accent { color: var(--hh-forest); }
.hh-planner-copy > p { color: #fff3ec; line-height: 1.75; }
.hh-app-card { background: var(--hh-forest); box-shadow: 18px 18px 0 rgba(14,44,38,.3); padding: 2rem; }
.hh-app-card .wp-block-image { margin: 0 0 2rem; }
.hh-app-card img { width: 280px; }
.hh-phone { background: var(--hh-paper); border-radius: 26px 26px 0 0; color: var(--hh-ink); margin: 0 auto; max-width: 360px; padding: 2rem; }
.hh-phone h3 { color: var(--hh-forest); font-size: 2rem; line-height: 1.08; }
.hh-phone li { border-bottom: 1px solid var(--hh-line); color: var(--hh-muted); font-size: .78rem; padding: .55rem 0; }
.hh-privacy { color: #ffe9de; font-size: .65rem; line-height: 1.65; margin-top: 1.5rem; }

.hh-insights { background: var(--hh-cream); }
.hh-query-grid .wp-block-post-template { display: grid; gap: 1px; grid-template-columns: repeat(3,1fr); }
.hh-query-grid .wp-block-post { background: var(--hh-paper); border: 1px solid var(--hh-line); min-height: 260px; padding: 2rem; }
.hh-query-grid .wp-block-post-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; line-height: 1.25; }
.hh-query-grid .wp-block-post-excerpt { color: #69736f; font-size: .8rem; line-height: 1.7; }
.hh-no-posts { border: 1px solid var(--hh-line); color: var(--hh-muted); margin-top: 2.5rem; padding: 2rem; }

.hh-faq { background: var(--hh-forest); color: white; }
.hh-faq .hh-section-heading { color: white; }
.hh-faq-item { border-top: 1px solid rgba(255,255,255,.18); padding: 1.35rem 0; }
.hh-faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.hh-faq-item summary { cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.hh-faq-item p { color: #b8c4bf; font-size: .82rem; line-height: 1.75; padding-left: 1rem; }

.hh-contact { background: var(--hh-paper); }
.hh-contact-card { background: var(--hh-cream); padding: 2rem; }
.hh-contact-card a { color: var(--hh-forest); }
.hh-contact-detail { border-bottom: 1px solid var(--hh-line); padding: 1rem 0; }
.hh-contact-detail strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; margin-top: .3rem; }

.hh-footer { background: var(--hh-forest-deep); color: white; padding: 4rem 7vw 2rem; }
.hh-footer .hh-footer-ma-logo img { width: min(150px,100%); }
.hh-footer-copy { color: #9eaea7; font-size: .68rem; line-height: 1.75; }
.hh-footer-social { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.2rem; }
.hh-footer-social a { color: #c2cec9; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.hh-footer-legal { border-top: 1px solid rgba(255,255,255,.15); color: #7f938a; font-size: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; text-transform: uppercase; }

.hh-blog-hero { background: var(--hh-cream); padding: 7rem 10vw; }
.hh-content-wrap { background: var(--hh-paper); padding: 6rem 10vw; }
.hh-content-wrap .wp-block-post-title { font-size: clamp(2.8rem,5vw,5rem); }
.hh-content-wrap .wp-block-post-content { line-height: 1.8; }

@media (max-width: 1000px) {
  .hh-main-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .hh-hero > .wp-block-columns, .hh-planner > .wp-block-columns { flex-wrap: wrap !important; }
  .hh-hero > .wp-block-columns > .wp-block-column, .hh-planner > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
  .hh-path-grid { grid-template-columns: repeat(2,1fr); }
  .hh-lender-grid { grid-template-columns: repeat(2,1fr); }
  .hh-service { grid-template-columns: 45px 1fr; }
  .hh-service p, .hh-service .hh-text-link { grid-column: 2; }
  .hh-statement-grid { margin-left: 0; }
}

@media (max-width: 650px) {
  .hh-brokerage-copy:last-child { display: none; }
  .hh-brokerage-bar img { width: 50px; }
  .hh-brokerage-copy { font-size: .48rem; text-align: right; }
  .hh-main-header { min-height: 74px; padding: 0 5vw; }
  .hh-main-header .wp-block-navigation { display: none; }
  .hh-main-header .hh-button .wp-block-button__link { padding: .75rem .9rem; }
  .hh-hero-copy { padding: 4rem 6vw 3rem; }
  .hh-hero h1 { font-size: 3.55rem; }
  .hh-hero-visual { min-height: 540px; padding: 2.5rem 1.5rem 0; }
  .hh-portrait { height: 500px; }
  .hh-section { padding: 5rem 6vw; }
  .hh-section-heading { font-size: 2.8rem; }
  .hh-path-grid { grid-template-columns: 1fr; }
  .hh-path-card { min-height: 255px; }
  .hh-lender-grid { grid-template-columns: repeat(2,1fr); }
  .hh-service { gap: .8rem; }
  .hh-service h3 { font-size: 1.4rem; }
  .hh-query-grid .wp-block-post-template { grid-template-columns: 1fr; }
  .hh-app-card { padding: 1.2rem; }
  .hh-phone { padding: 1.4rem; }
  .hh-footer { padding: 3.5rem 6vw 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}