/*
Theme Name: CommercialBay — Param Gandam
Theme URI: https://commercialbay.ca
Author: CommercialBay
Description: Personal-brand residential and commercial real estate theme. Manual property management; IDX is NOT connected.
Version: 1.1.0
Requires at least: 6.0
Text Domain: commercialbay
*/
:root { --blue: #102B4E; --red: #B7D936; --red-dark: #9DBD24; --ink: #1a2332; --muted: #5a6577; --line: #e3e8ef; --bg-alt: #f4f6f9; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2.4rem; margin: 0 0 12px; }
h2 { font-size: 2rem; margin: 0 0 12px; }
h3 { font-size: 1.2rem; margin: 10px 0 6px; }
p { margin: 0 0 12px; }
.topbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 5vw; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.pg { width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: 1px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text small { font-size: 0.65rem; letter-spacing: 2px; color: var(--muted); }
.nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 600; }
.nav a:hover { color: var(--red); }
.btn { display: inline-block; padding: 12px 22px; border-radius: 6px; text-decoration: none; font-weight: 700; border: none; cursor: pointer; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.btn-outline { border: 2px solid var(--blue); color: var(--blue); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.section { padding: 56px 5vw; }
.section.alt { background: var(--bg-alt); }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; font-weight: 700; color: var(--red); margin-bottom: 8px; }
.section-lede { max-width: 640px; color: var(--muted); font-size: 1.1rem; }
.tagline { font-size: 1.5rem; font-weight: 800; color: var(--blue); margin: 16px 0 0; }
.tagline-en { color: var(--muted); font-style: italic; }
.lede { font-size: 1.15rem; max-width: 560px; }
.areas { color: var(--muted); font-weight: 600; }
.hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; padding: 48px 5vw; }
.hero-photo img { border-radius: 12px; width: 100%; object-fit: cover; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.stats strong { display: block; font-size: 1.05rem; color: var(--blue); }
.stats span { color: var(--muted); font-size: 0.9rem; }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: #fff; }
.card img { border-radius: 8px; margin-bottom: 12px; }
.card-num { font-weight: 800; color: var(--red); font-size: 0.85rem; letter-spacing: 1px; }
.text-link { font-weight: 700; text-decoration: none; color: var(--blue); }
.text-link:hover { color: var(--red); }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px; align-items: center; }
.about-grid img { border-radius: 12px; }
.big { font-size: 1.4rem; font-weight: 700; color: var(--blue); }
.values { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.values li::before { content: "✓ "; color: var(--red); font-weight: 800; }
.quote { font-size: 1.4rem; font-style: italic; color: var(--blue); max-width: 720px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.filter { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font-weight: 700; cursor: pointer; }
.filter.active { background: var(--blue); color: #fff; }
.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.track-card { border: 1px solid var(--line); border-radius: 10px; padding: 20px; background: #fff; }
.track-card img { border-radius: 8px; margin-bottom: 12px; }
.status { display: inline-block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.status.sold { background: #e6f4ea; color: #137333; }
.status.done { background: #e8f0fe; color: var(--blue); }
.status.leased { background: #fef7e0; color: #7a5b00; }
.status.current { background: #fce8e9; color: var(--red); }
.status.past { background: var(--bg-alt); color: var(--muted); }
.status.verify { background: #f3e8fd; color: #5b21b6; }
.meta { color: var(--muted); font-size: 0.9rem; }
.fineprint { color: var(--muted); font-size: 0.85rem; margin-top: 20px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.big-link { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--blue); }
.form { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.form label { font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.form input, .form select, .form textarea { padding: 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 1rem; font-family: inherit; }
.agent-strip { display: flex; gap: 24px; align-items: center; }
.agent-strip img { width: 160px; border-radius: 12px; }
.footer { padding: 40px 5vw; border-top: 1px solid var(--line); }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
@media (max-width: 820px) {
  .hero, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .cards-2, .cards-3, .track-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }
  .nav { margin-left: 0; }
  .agent-strip { flex-direction: column; align-items: flex-start; }
}

/* CommercialBay offline lead-generation redesign — navy/lime */
.topbar { background:#102B4E; border-bottom-color:#31506c; }
.topbar .brand,.topbar .nav a { color:#fff; }
.topbar .brand-text small { color:#d9e6ef; }
.topbar .pg { background:#B7D936; color:#102B4E; }
.topbar .nav a:hover { color:#B7D936; }
.btn-red,.btn-blue { background:#B7D936; color:#102B4E; }
.btn-red:hover,.btn-blue:hover { background:#a6cc25; color:#102B4E; }
.hero { background:linear-gradient(110deg,#102B4E 0%,#173c60 55%,#224d69 100%); color:#fff; }
.hero .tagline,.hero .eyebrow { color:#C8E344; }
.hero .tagline-en,.hero .areas { color:#d6e2ea; }
.hero .btn-outline { border-color:#C8E344; color:#C8E344; }
.hero .stats { border-top-color:#49647a; }
.hero .stats strong { color:#C8E344; }
.hero .stats span { color:#d6e2ea; }
.track-card .btn-blue { display:inline-block; }
.eyebrow,.card-num { color:#627d1c; }
.filter.active { background:#102B4E; }
.form input:focus,.form textarea:focus,.form select:focus { outline:2px solid #B7D936; outline-offset:1px; }
@media (max-width:820px) {.topbar { gap:12px; } }

/* Final 2026 brand assets and conversion tune-up */
.site-logo{width:188px;height:auto;max-height:73px;object-fit:contain;display:block}.brand,.footer-brand{max-width:230px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.topbar{min-height:86px}.hero{min-height:630px;grid-template-columns:1.05fr .95fr;gap:36px}.hero h1{font-size:clamp(2.55rem,4vw,4.8rem);letter-spacing:-.035em}.hero-photo{height:540px;background:radial-gradient(circle at 48% 35%,#306995 0%,#1a486f 58%,#102B4E 100%);border-radius:26px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}.hero-photo img{border-radius:0;height:93%;width:auto;max-width:100%;object-fit:contain;object-position:center bottom}
.hero .eyebrow{font-size:.77rem}.footer{background:#102B4E;color:#e7eff9}.footer a{color:#e7eff9}.footer .site-logo{width:210px}.footer .nav a{color:#e7eff9}.footer .fineprint{color:#c5d7e4}.brokerage{font-size:.85rem;color:#d1deeb;border-top:1px solid #49657a;padding-top:15px}
.social-links{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.social-link,.social-links a{border:1px solid #7892a8;border-radius:7px;padding:10px 15px;text-decoration:none;font-weight:700}.social-links a:hover{background:#c8e344;color:#102B4E}.draft-note{background:#fff5d8;border-left:4px solid #c89a2b;padding:12px 14px;color:#5a4520}.footer .social-links a{border-color:#526b83}.btn:focus-visible,.nav a:focus-visible{outline:3px solid #c8e344;outline-offset:3px}
@media(max-width:820px){.hero{min-height:auto}.hero-photo{height:430px}.hero-photo img{height:95%}.site-logo{width:150px}.topbar{padding:12px 4vw}.hero h1{font-size:2.45rem}}

/* Version 1.1 — compact three-destination mobile experience. Desktop unchanged. */
.mobile-tabs,.mobile-hero-photo,.mobile-showcase { display:none; }
@media (max-width:820px) {
  html { scroll-behavior:smooth; scroll-padding-top:114px; }
  body { overflow-x:hidden; }
  .topbar { display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:9px 16px 0; min-height:unset; }
  .topbar .brand { align-self:center; }
  .topbar .site-logo { width:134px; max-height:50px; }
  .topbar > .nav, .topbar > .btn { display:none; }
  .mobile-tabs { display:grid; grid-template-columns: .8fr 1.6fr .8fr; gap:4px; width:100%; border-top:1px solid #39546c; }
  .mobile-tabs a { color:#fff; padding:12px 4px; font-size:12px; font-weight:750; text-align:center; text-decoration:none; line-height:1.2; }
  .mobile-tabs a:focus-visible {outline:2px solid #c8e344; outline-offset:-2px;}
  .mobile-tabs a:nth-child(2) { color:#c8e344; }
  .hero { display:flex; flex-direction:column; min-height:unset; padding:27px 18px 24px; gap:0; }
  .hero-text { width:100%; min-width:0; }
  .hero .eyebrow { font-size:10px; letter-spacing:1.1px; line-height:1.4; }
  .hero .eyebrow:nth-child(2) { display:none; }
  .hero h1 { font-size:clamp(29px,8.8vw,42px); line-height:1.14; margin:15px 0 10px; letter-spacing:-.025em; }
  .hero .tagline { font-size:clamp(19px,5.4vw,24px); margin:12px 0 1px; line-height:1.35; }
  .hero .tagline-en { font-size:13px; margin-bottom:0; }
  .mobile-hero-photo { display:flex; align-items:flex-end; justify-content:center; height:260px; margin:17px auto 15px; width:min(100%,390px); background:radial-gradient(circle at 45% 33%,#376a93,#1a486f 70%); border-radius:20px; overflow:hidden; }
  .mobile-hero-photo img { width:auto; height:100%; max-width:95%; object-fit:contain; object-position:center bottom; }
  .hero > .hero-photo { display:none; }
  .hero .lede { font-size:15px; line-height:1.5; max-width:450px; margin-bottom:11px; }
  .hero .lede { font-size:0; }
  .hero .lede::after { content:'Helping GTA families and businesses buy, sell and lease with confidence.'; font-size:15px; }
  .hero .cta-row { margin:12px 0 2px; }
  .hero .cta-row .btn { width:100%; text-align:center; padding:14px 12px; }
  .hero .cta-row .btn-outline { display:none; }
  .hero .areas,.hero .stats { display:none; }
  .section { padding:34px 18px; }
  #services h2 { font-size:24px; }
  #services .section-lede { display:none; }
  #services .cards-2 { margin-top:12px; gap:10px; }
  #services .card { padding:17px; }
  #services .card p:not(.card-num) { font-size:14px; }
  /* Hide desktop long-form sections on mobile. All remain available on desktop. */
  #about,#approach,.section.story,#track-record,#social,#seller-valuation { display:none!important; }
  .desktop-featured-section { display:none!important; }
  .mobile-showcase { display:block; padding:35px 18px; background:#f4f6f9; }
  .mobile-showcase h2 {font-size:25px; margin-bottom:7px; }
  .mobile-showcase .section-lede { font-size:14px; margin-bottom:15px; }
  .mobile-showcase-grid { display:grid; gap:12px; }
  .mobile-showcase-card { display:grid; grid-template-columns:92px 1fr; gap:13px; background:#fff; padding:12px; border:1px solid #e0e5eb; border-radius:13px; align-items:center; }
  .mobile-showcase-card img { width:92px; height:108px; object-fit:cover; border-radius:9px; }
  .mobile-showcase-card:not(:has(img)) { display:block; padding:18px; }
  .mobile-showcase-card h3 { font-size:17px; margin:4px 0; }
  .mobile-showcase-card p { font-size:12.5px; line-height:1.4; color:#56677c; margin-bottom:6px; }
  .mobile-showcase-card a,.mobile-more-link { font-size:13px; font-weight:800; color:#10365c; }
  .mini-status { font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:800; color:#627d1c; }
  .mobile-more-link { display:inline-block; padding:14px 0 3px; }
  #contact .section-lede { font-size:14px; }
  #contact .contact-grid { gap:14px; margin-top:14px; }
  #contact .form { padding:16px; }
  .footer { padding:25px 18px; }
  .footer .social-links { gap:6px; }
  .footer .social-links a { font-size:12px; padding:8px; }
}