/*
Theme Name: SMICS
Theme URI: https://smicsph.com/
Author: Standard Measuring Instrument Calibration Services
Description: Custom theme for smicsph.com, built from the SMICS brochure. Pages: Home, Services, Instruments, About, Contact.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: smics
*/

/* Base reset */
body { margin: 0; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: #fff; color: #021340; padding: 10px 14px; border-radius: 4px; }
.admin-bar header.site { top: 32px; }
@media (max-width: 782px) { .admin-bar header.site { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.site { top: 0; } }

/* Layout: one long brand page. White content sections alternate with pale blue bands,
   red is reserved for headings and the single call to action. Committed to one light look
   (the brochure's palette), so colors are set explicitly and do not flip with the viewer's theme. */
:root {
  color-scheme: light;
  --navy: #021340;
  --navy-2: #0b2163;
  --red: #c8181e;
  --red-dark: #9e1015;
  --paper: #ffffff;
  --ink: #141a2b;
  --muted: #545d75;
  --line: #d6dbe7;
  --band: #e9eff9;
  --band-line: #c9d4e8;
  --mist: #f5f6fa;
  --on-navy: #021340;
  --on-navy-muted: #4f5b78;
  --foot: #0b2163;
  --foot-text: #ffffff;
  --foot-muted: #b9c2db;
  --display: "Libre Caslon Text", "Georgia", "Times New Roman", serif;
  --body: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.12; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 500; }



/* Header */
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand img { width: 46px; height: 46px; flex: none; }
.brand b { display: block; font-family: var(--body); font-weight: 700; font-size: 22px; letter-spacing: .02em; color: var(--red); line-height: 1; }
.brand span { display: block; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
nav.main { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
nav.main a { text-decoration: none; color: var(--ink); }
nav.main a:hover { color: var(--red); }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; font-family: var(--body); transition: background .15s, color .15s; }
.btn-red { background: var(--red); color: #fff !important; }
.btn-red:hover { background: var(--red-dark); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: rgba(2,19,64,.06); }
.menu-links { display: flex; gap: 28px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--navy); cursor: pointer; place-items: center; padding: 0; }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .i-close { display: none; }
header.site.open .menu-toggle .i-open { display: none; }
header.site.open .menu-toggle .i-close { display: block; }
@media (max-width: 860px) {
  .brand span { display: none; }
  nav.main { gap: 10px; }
  nav.main .btn { padding: 10px 14px; font-size: 14px; }
  .menu-toggle { display: grid; }
  .menu-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px rgba(2,19,64,.08); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 8px; }
  header.site.open .menu-links { display: flex; }
  .menu-links a { padding-block: 14px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .menu-links a:last-child { border-bottom: 0; }
}
@media (max-width: 360px) { nav.main .btn { padding: 9px 10px; font-size: 13px; } }

/* Hero */
.hero { background: var(--band); color: var(--on-navy); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.hero-copy { padding-block: 72px 64px; padding-right: 48px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); }
.hero h1 em { color: var(--red); font-style: italic; }
.hero .lede { font-size: 18px; color: var(--on-navy-muted); max-width: 34em; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-photo { position: relative; min-height: 420px; margin-right: calc(-1 * max(32px, env(safe-area-inset-right, 0px))); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--band) 0%, rgba(233,239,249,0) 22%); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-right: 0; padding-block: 48px 32px; }
  .hero-photo { min-height: 240px; margin-right: 0; margin-bottom: 0; border-radius: 4px; overflow: hidden; margin-block-end: 40px; }
  .hero-photo::after { display: none; }
}

/* Calibration-certificate style facts strip */
.facts { border-top: 1px solid var(--band-line); }
.facts dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.facts div { padding-block: 22px; padding-right: 16px; border-right: 1px solid var(--band-line); padding-left: 20px; min-width: 0; }
.facts div:first-child { padding-left: 0; }
.facts div:last-child { border-right: 0; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-muted); }
.facts dd { margin: 4px 0 0; font-family: var(--mono); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .facts dl { grid-template-columns: 1fr 1fr; }
  .facts div { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--band-line); }
  .facts div:nth-child(n+3) { border-bottom: 0; }
}

section { padding-block: 88px; }
@media (max-width: 720px) { section { padding-block: 56px; } }
.sec-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: 44px; }
.sec-head h1, .sec-head h2 { font-size: clamp(32px, 4.4vw, 48px); color: var(--red); }
.on-navy .sec-head h1, .on-navy .sec-head h2 { color: var(--red); }
.sec-head p { color: var(--muted); font-size: 17px; }
.on-navy { background: var(--band); color: var(--ink); }
.on-navy .sec-head p { color: var(--on-navy-muted); }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--navy); }
.service { padding: 28px 28px 8px 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.service + .service { padding-left: 28px; border-left: 1px solid var(--line); }
.service h3 { font-size: 24px; color: var(--navy); }
.service p { color: var(--muted); }
.service .tag { font-family: var(--mono); font-size: 12px; color: var(--red); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; }
  .service, .service + .service { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* Instruments */
.finder { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; }
.finder label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-muted); }
.finder input { flex: 1 1 260px; max-width: 420px; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--band-line); background: var(--paper); color: var(--ink); }
.finder input::placeholder { color: var(--on-navy-muted); }
.finder output { font-family: var(--mono); font-size: 13px; color: var(--on-navy-muted); }
.cats { columns: 4 230px; column-gap: 40px; }
.cat { break-inside: avoid; margin-bottom: 32px; }
.cat h3 { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--red); display: flex; justify-content: space-between; border-bottom: 1px solid var(--band-line); padding-bottom: 8px; margin-bottom: 10px; }
.cat h3 small { color: var(--on-navy-muted); font-size: 12px; }
.cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cat li { font-size: 15px; }
.cat li mark { background: var(--red); color: #fff; padding: 0 2px; border-radius: 2px; }
.cats-empty { color: var(--on-navy-muted); }
.inst-note { margin-top: 12px; color: var(--on-navy-muted); font-size: 15px; }
.inst-note a { color: var(--on-navy); }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.about-photo { position: relative; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; display: block; max-width: 100%; }
.about-photo .stamp { position: absolute; right: -18px; bottom: 28px; background: var(--paper); border: 2px solid var(--red); color: var(--red); padding: 14px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; transform: rotate(-3deg); }
.about-photo .stamp b { display: block; font-size: 20px; letter-spacing: .02em; }
.about-copy { display: grid; gap: 18px; min-width: 0; }
.about-copy h1, .about-copy h2 { font-size: clamp(32px, 4.4vw, 48px); color: var(--red); }
.about-copy p { color: var(--ink); font-size: 17px; max-width: 36em; }
.about-copy .pull { font-family: var(--display); font-size: 24px; font-style: italic; color: var(--navy); border-left: 3px solid var(--red); padding-left: 18px; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo .stamp { right: 12px; }
}

/* Vision & mission */
.vm { background: var(--mist); }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.vm-item { display: grid; gap: 16px; align-content: start; min-width: 0; }
.vm-item h2 { font-size: clamp(36px, 5vw, 56px); color: var(--red); }
.vm-item p { font-size: 18px; color: var(--navy); max-width: 32em; }
.vm-item strong { font-weight: 600; }
@media (max-width: 860px) { .vm-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Why calibration */
.why-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.why-top .sec-head { margin-bottom: 0; }
.why-top img { width: 100%; max-width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 4px; display: block; }
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.reason { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; min-width: 0; }
.reason:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.reason h3 { font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.reason p { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) {
  .why-top { grid-template-columns: 1fr; gap: 28px; }
  .reasons { grid-template-columns: 1fr; }
  .reason, .reason:not(:nth-child(3n+1)) { padding: 22px 0; border-left: 0; }
}

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; }
.contact h1, .contact h2 { color: var(--navy); font-size: clamp(40px, 6vw, 68px); line-height: 1.02; }
.contact .sub { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-muted); margin-top: 16px; }
.channels { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 22px; }
.channels li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.channels .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #ffffff; display: grid; place-items: center; }
.channels .ic svg { width: 20px; height: 20px; }
.channels b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-muted); font-weight: 600; }
.channels span { font-size: 18px; overflow-wrap: anywhere; }
.channels span a { text-decoration: none; }
.channels span a:hover { color: var(--red); }
form.quote { background: var(--paper); color: var(--ink); border: 1px solid var(--band-line); box-shadow: 0 12px 32px rgba(2,19,64,.08); border-radius: 4px; padding: 32px; display: grid; gap: 18px; min-width: 0; }
form.quote h3, form.quote .form-title { font-size: 28px; color: var(--navy); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.form-note { font-size: 13px; color: var(--muted); }
.form-done { background: var(--mist); color: var(--navy); padding: 12px 14px; border-radius: 4px; font-size: 14px; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .row2 { grid-template-columns: 1fr; }
  form.quote { padding: 22px; }
}

/* Pages */
.menu-links a[aria-current="page"] { color: var(--red); }
@media (min-width: 861px) { .menu-links a { padding-block: 6px; } .menu-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); } }
.more { margin-top: 32px; }
.more a { color: var(--red); font-weight: 600; text-decoration: none; }
.more a:hover { text-decoration: underline; }
.disciplines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.disc { display: grid; gap: 4px; text-decoration: none; text-align: left; padding: 20px; background: var(--paper); border: 1px solid var(--band-line); border-radius: 4px; color: var(--navy); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.disc:hover { border-color: var(--red); transform: translateY(-2px); }
.disc b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.disc span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .disciplines { grid-template-columns: 1fr 1fr; } }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-top: 2px solid var(--navy); padding-top: 32px; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 40px); color: var(--navy); }
.cta-band p { color: var(--muted); margin-top: 8px; }
.cta-band .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn-ghost { color: var(--navy); }

/* Footer */
footer.site { background: var(--foot); color: var(--foot-muted); font-size: 14px; }
.foot { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; padding-block: 40px; }
.foot img { width: 88px; height: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.foot nav a { text-decoration: none; color: var(--foot-text); }
.foot .iso { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-align: right; }
.foot-base { border-top: 1px solid rgba(255,255,255,.14); padding-block: 18px; font-size: 13px; }
@media (max-width: 720px) { .foot { grid-template-columns: 1fr; gap: 20px; } .foot .iso { text-align: left; } }

/* Form status and honeypot */
.form-error { background: #fdecec; color: #8a1014; padding: 12px 14px; border-radius: 4px; font-size: 14px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Generic page content (fallback template) */
.entry { max-width: 46rem; }
.entry h1 { font-size: clamp(32px, 4.4vw, 48px); color: var(--red); margin-bottom: 24px; }
.entry p, .entry ul, .entry ol { margin-block: 0 1em; }