/*
Theme Name: North Brisbane IT Hallmark
Template: popularfx
Version: 1.0.0
Description: Hallmark child theme for North Brisbane IT Services.
*/

/* Hallmark · macrostructure: Split Studio · genre: modern-minimal technical · tone: premium consultant, calm authority, plain-English · theme: Atelier / executive ink · anchor hue: 248 · nav: N9 edge-aligned minimal · footer: Ft5 statement · H2 Split knobs: ratio=7/5, right=proof-column, divider=negative-space · C1 knobs: shape=rectangular, density=compact, adornment=arrow · premium refresh 2026-05-21 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,650,0,0;9..144,760,0,0&family=Geist:wght@350;450;650;750&family=Geist+Mono:wght@500;700&display=swap');

:root {
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-paper: oklch(96% 0.006 92);
  --color-paper-2: oklch(91% 0.008 92);
  --color-panel: oklch(99% 0.004 92);
  --color-ink: oklch(17% 0.018 250);
  --color-muted: oklch(40% 0.018 248);
  --color-subtle: oklch(58% 0.014 242);
  --color-rule: oklch(78% 0.011 92);
  --color-accent: oklch(42% 0.09 248);
  --color-accent-soft: oklch(89% 0.025 248);
  --color-focus: oklch(50% 0.13 248);
  --color-gold: oklch(67% 0.08 78);
  --color-ink-soft: oklch(24% 0.02 250);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 220ms;
}

html,
body { overflow-x: clip; }

body {
  background:
    radial-gradient(circle at 82% 8%, color-mix(in oklch, var(--color-accent-soft) 48%, transparent) 0 18rem, transparent 32rem),
    linear-gradient(180deg, var(--color-paper), var(--color-paper-2));
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
}

body,
button,
input,
textarea,
select { font-family: var(--font-body); }

a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent); }
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

#page,
.site,
.site-content,
#content,
.content-area,
.site-main,
.entry-content { background: var(--color-paper); }

.site-header,
header.site-header,
.pfx-header,
#masthead {
  background: color-mix(in oklch, var(--color-paper) 92%, transparent) !important;
  border-bottom: 1px solid var(--color-rule);
  box-shadow: none !important;
}

.site-branding,
.site-title,
.site-title a,
.site-header .site-title,
.site-header .site-title a,
.custom-logo-link + .site-title,
.pfx-site-title,
.site-branding a {
  font-family: var(--font-display) !important;
  letter-spacing: -0.025em;
  color: var(--color-ink) !important;
}
.site-description,
.site-header .site-description {
  color: var(--color-muted) !important;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
}

.main-navigation a,
.menu a,
.nav-menu a {
  color: var(--color-muted) !important;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.main-navigation a:hover,
.menu a:hover,
.nav-menu a:hover { color: var(--color-ink) !important; }
.menu-toggle {
  border: 1px solid var(--color-rule) !important;
  background: var(--color-panel) !important;
  color: var(--color-ink) !important;
  min-width: 44px;
  min-height: 44px;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}
.menu-toggle::before {
  content: "☰";
  font-family: var(--font-outlier);
  font-size: 1.1rem;
  line-height: 1;
}
.menu-toggle .dashicons { display: none !important; }

.entry-title { display: none; }
.entry-content { margin: 0; }
.entry-content > * { max-width: none; }

.hm-site { background: var(--color-paper); color: var(--color-ink); }
.hm-wrap { width: min(1120px, calc(100% - clamp(2rem, 7vw, 7rem))); margin-inline: auto; }
.hm-narrow { width: min(760px, calc(100% - clamp(2rem, 7vw, 7rem))); margin-inline: auto; }

.hm-hero {
  padding-block: clamp(4.5rem, 12vw, 9.5rem) var(--space-3xl);
  min-height: auto;
  position: relative;
}
.hm-hero::before {
  content: "";
  position: absolute;
  inset: var(--space-xl) min(4vw, 3rem) auto auto;
  width: min(26rem, 45vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.72;
  pointer-events: none;
}
.hm-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.hm-split--flip { grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); }
.hm-kicker {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-lg);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-gold);
}
.hm-hero h1,
.hm-page-title,
.hm-section h2,
.hm-card h2,
.hm-card h3,
.hm-proof strong {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  color: var(--color-ink);
}
.hm-hero h1,
.hm-page-title {
  font-size: var(--text-display);
  line-height: 1.03;
  margin: 0;
  max-width: 11ch;
  overflow-wrap: anywhere;
}
.hm-hero__lede,
.hm-lede {
  color: var(--color-muted);
  font-size: clamp(1.1rem, 1.1vw + 0.9rem, 1.45rem);
  line-height: 1.45;
  max-width: 54ch;
  margin-block: var(--space-lg) 0;
}
.hm-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); align-items: center; }
.hm-btn,
.entry-content .hm-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.78rem 1rem;
  border: 1px solid var(--color-ink) !important;
  border-radius: 0 !important;
  background: var(--color-ink) !important;
  color: var(--color-panel) !important;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out);
}
.hm-btn:hover,
.wp-block-button__link:hover { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-panel) !important; transform: translateY(-1px); }
.hm-btn--quiet { background: transparent !important; border-color: var(--color-rule) !important; color: var(--color-muted) !important; }
.hm-btn--quiet:hover { color: var(--color-panel) !important; }

.hm-proof {
  background: linear-gradient(180deg, var(--color-panel), color-mix(in oklch, var(--color-panel) 88%, var(--color-accent-soft)));
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-gold);
  padding: clamp(1.25rem, 2vw, 2rem);
  box-shadow: 0 24px 70px color-mix(in oklch, var(--color-ink) 12%, transparent);
}
.hm-proof__line { display: flex; justify-content: space-between; gap: var(--space-lg); border-bottom: 1px solid var(--color-rule); padding-block: var(--space-md); }
.hm-proof__line:first-child { padding-top: 0; }
.hm-proof__line:last-child { border-bottom: 0; padding-bottom: 0; }
.hm-proof span { color: var(--color-muted); }
.hm-proof strong { font-size: var(--text-lg); line-height: 1.1; font-variant-numeric: tabular-nums; text-align: right; }

.hm-section { padding-block: var(--space-3xl); }
.hm-section--tight { padding-block: var(--space-2xl); }
.hm-section--panel { background: var(--color-paper-2); border-block: 1px solid var(--color-rule); }
.hm-section h2 { font-size: clamp(2rem, 3vw + 1rem, 4rem); line-height: 1.08; margin: 0; max-width: 13ch; }
.hm-section p { margin: var(--space-md) 0 0; color: var(--color-muted); }

.hm-grid { display: grid; gap: var(--space-lg); }
.hm-grid--bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hm-card {
  background: color-mix(in oklch, var(--color-panel) 94%, var(--color-accent-soft));
  border: 1px solid var(--color-rule);
  border-top: 2px solid color-mix(in oklch, var(--color-gold) 55%, var(--color-rule));
  padding: clamp(1.15rem, 2vw, 2rem);
  min-width: 0;
  box-shadow: 0 18px 55px color-mix(in oklch, var(--color-ink) 7%, transparent);
}
.hm-card--wide { grid-column: span 7; }
.hm-card--small { grid-column: span 5; }
.hm-card--full { grid-column: 1 / -1; }
.hm-card h3 { font-size: var(--text-xl); line-height: 1.1; margin: 0 0 var(--space-sm); }
.hm-card p { margin: 0; }
.hm-card ul,
.hm-list { margin: var(--space-md) 0 0; padding-left: 1.1rem; color: var(--color-muted); }
.hm-card li + li,
.hm-list li + li { margin-top: var(--space-xs); }

.hm-service-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-rule);
}
.hm-service-row:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.hm-service-row h2 { max-width: 16ch; }
.hm-service-row__note { font-family: var(--font-outlier); color: var(--color-accent); font-size: var(--text-sm); margin: 0 0 var(--space-sm); }
.hm-checks { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.hm-checks li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-muted); }
.hm-checks li::before { content: "— "; color: var(--color-accent); }

.hm-quote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 15ch;
  margin: 0;
}
.hm-meta { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-lg); }

.hm-contact-card { background: linear-gradient(135deg, var(--color-ink), var(--color-ink-soft)); color: var(--color-paper); padding: clamp(1.5rem, 4vw, 3rem); border-top: 3px solid var(--color-gold); }
.hm-contact-card a { color: var(--color-paper); text-decoration-color: var(--color-accent); }
.hm-contact-card h2,
.hm-contact-card h3,
.hm-contact-card strong { color: var(--color-paper); }
.hm-contact-card p,
.hm-contact-card .hm-meta { color: color-mix(in oklch, var(--color-paper) 86%, var(--color-accent-soft)); }
.hm-contact-card .hm-btn { color: var(--color-paper) !important; border-color: var(--color-paper) !important; }
.hm-contact-card .hm-btn:hover { background: var(--color-paper) !important; color: var(--color-ink) !important; }

.hm-footer-cta { padding-block: var(--space-4xl) var(--space-3xl); }
.hm-footer-cta h2 { font-size: clamp(2.3rem, 5vw, 5rem); max-width: 13ch; }

.site-footer,
footer.site-footer,
.pfx-footer,
#colophon { background: var(--color-ink) !important; color: var(--color-paper) !important; border-top: 0 !important; }
.site-footer a,
footer.site-footer a,
.pfx-footer a { color: var(--color-paper) !important; }
.site-info {
  width: min(1120px, calc(100% - clamp(2rem, 7vw, 7rem)));
  margin-inline: auto;
  padding-block: var(--space-xl) !important;
  color: color-mix(in oklch, var(--color-paper) 86%, var(--color-accent-soft)) !important;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  line-height: 1.8;
}
.hm-footer-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
}
.hm-footer-line strong {
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -0.025em;
}
.hm-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.hm-footer-links a { white-space: nowrap; text-decoration-color: var(--color-accent); }

@media (max-width: 60rem) {
  .hm-split,
  .hm-split--flip,
  .hm-service-row,
  .hm-service-row:nth-child(even) { grid-template-columns: 1fr; }
  .hm-grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-card--wide,
  .hm-card--small,
  .hm-card--full { grid-column: auto; }
  .hm-hero h1,
  .hm-page-title { max-width: 12ch; }
}

@media (max-width: 40rem) {
  .hm-wrap,
  .hm-narrow { width: min(100% - 2rem, 1120px); }
  .site-header .site-title,
  .site-header .site-title a { font-size: clamp(1.45rem, 7vw, 1.75rem) !important; line-height: 1.08; }
  .site-header .site-description { font-size: 0.78rem; }
  .hm-hero { padding-block: var(--space-2xl); }
  .hm-section { padding-block: var(--space-2xl); }
  .hm-grid--bento { grid-template-columns: 1fr; }
  .hm-proof__line { display: grid; }
  .hm-proof strong { text-align: left; }
  .hm-actions { align-items: stretch; }
  .hm-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}