/*
Theme Name: Lynden Group Pen Testing
Description: Single-page penetration testing menu and pricing request page for MACS schools, with a Jotform request card.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Apache License 2.0
License URI: https://www.apache.org/licenses/LICENSE-2.0
Text Domain: lyndengroup-pentest
*/

/* ---------- Fonts (self-hosted Heebo, SIL OFL 1.1 - see assets/fonts/OFL.txt) ---------- */
@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/heebo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Heebo";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("assets/fonts/heebo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
    --color-bg: #ffffff;
    --color-surface: #f3f0e4;
    --color-text: #1c211d;
    --color-accent: #215a2d;
    --color-accent-2: #77a341;
    --color-divider: color-mix(in srgb, #1c211d 14%, transparent);

    /* Text and rule tints the layout repeats everywhere. */
    --color-hairline: color-mix(in srgb, var(--color-text) 8%, transparent);
    --color-muted: color-mix(in srgb, var(--color-text) 78%, transparent);
    --color-muted-2: color-mix(in srgb, var(--color-text) 70%, transparent);

    --color-neutral-100: #f5f5f8;
    --color-neutral-800: #424244;
    --color-neutral-900: #2b2b2d;

    --color-accent-100: #eef5e4;
    --color-accent-200: #d6f1af;
    --color-accent-300: #bce485;
    --color-accent-400: #93c25a;
    --color-accent-500: #77a341;
    --color-accent-600: #4e8a3c;
    --color-accent-700: #2c6b37;
    --color-accent-800: #215a2d;
    --color-accent-900: #163d22;

    --color-footer-text: #e6eee2;

    --font-heading: "Heebo", system-ui, sans-serif;
    --font-heading-weight: 700;
    --font-body: "Heebo", system-ui, sans-serif;

    --space-1: 3.4px;
    --space-2: 6.8px;
    --space-3: 10.2px;
    --space-4: 13.6px;
    --space-6: 20.4px;
    --space-8: 27.2px;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

    --container: 1200px;
    --gutter: clamp(20px, 5vw, 72px);

    /* Sticky elements sit below the WordPress admin bar when it is showing. */
    --sticky-top: var(--wp-admin--admin-bar--height, 0px);

    /* How far below the sticky nav an anchor target lands. */
    --anchor-offset: 72px;
}

/* Below 768px the nav wraps to two or three lines (up to 111px tall), so a
   jump to a step would otherwise land with its heading under the nav. */
@media (max-width: 767px) {
    :root { --anchor-offset: 124px; }
}

/* Below 600px the admin bar scrolls away with the page, so nothing needs to clear it. */
@media (max-width: 600px) {
    :root { --sticky-top: 0px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
/* A column, so the footer sits at the bottom of a short page (a 404, a privacy page). */
body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
strong { font-weight: 500; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 100;
    padding: 8px 14px;
    background: var(--color-accent); color: var(--color-bg);
    font-size: 14px; font-weight: 500; text-decoration: none;
    border-radius: var(--radius-md);
}
.skip-link:focus { top: calc(var(--sticky-top) + 12px); color: var(--color-bg); }

/* ---------- Components ---------- */
.blueprint {
    position: relative;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
}

.tag {
    display: inline-flex; align-items: center;
    font-size: 11px; letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 999px;
}
.tag-accent  { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; text-decoration: none;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 14px; line-height: 1.2; color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    padding: var(--space-2) calc(var(--space-3) * 1.2);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* Eyebrow label: "Step 01 - Identify the trigger", card kickers, profile kickers. */
.kicker {
    display: block;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-accent-700);
}

/* ---------- Site navigation ---------- */
.site-nav {
    position: sticky; top: var(--sticky-top); z-index: 10;
    display: flex; align-items: center; gap: var(--space-4);
    padding-block: var(--space-3);
    padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-divider);
}
.site-nav a { color: inherit; text-decoration: none; font-size: 14px; }
.site-nav a:hover { color: var(--color-accent); }
.site-nav__brand {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 6px 14px;
    margin-right: auto;
}
.site-nav__logo-link { display: block; }
.site-nav__logo { display: block; height: 36px; width: auto; }
.site-nav__tagline { font-size: 14px; color: var(--color-muted-2); }
.site-nav .site-nav__cta {
    font-size: 14px; font-weight: 500;
    color: var(--color-accent-700);
    white-space: nowrap;
}
.site-nav .site-nav__cta:hover { color: var(--color-accent); }

/* ---------- Hero ---------- */
.hero { background: var(--color-surface); }
.hero__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 80px var(--gutter) 48px;
}
.hero__title {
    font-size: clamp(38px, 5.4vw, 72px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 0 -0.052em;
}
.hero__title span { display: block; }
.hero__lead {
    font-size: 17px; line-height: 26px;
    max-width: 58ch;
    margin: 28px 0 0;
    color: var(--color-muted);
}
.hero__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    margin-top: 48px;
    border-top: 1px solid var(--color-text);
}
.hero__step {
    display: grid; gap: 2px;
    padding: 14px 16px 14px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-divider);
}
.hero__step:hover { color: var(--color-accent-700); }
.hero__step-num {
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    color: var(--color-accent-700);
}
.hero__step-title {
    font-family: var(--font-heading); font-weight: 600;
    font-size: 20px; line-height: 24px;
    text-transform: uppercase; letter-spacing: 0;
}

/* ---------- Two-column layout ---------- */
.layout {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px var(--gutter) 88px;
    display: flex; flex-wrap: wrap;
    gap: 56px clamp(32px, 4vw, 64px);
    align-items: flex-start;
}
.layout__main { flex: 999 1 560px; min-width: 0; }
.layout__aside {
    flex: 1 1 320px; min-width: 0;
    position: sticky;
    /* assets/js/request-card.js sets --aside-top when the card is taller than
       the window, so it sticks by its bottom edge and the submit button stays
       reachable. */
    top: var(--aside-top, calc(80px + var(--sticky-top)));
    scroll-margin-top: calc(var(--anchor-offset) + 8px);
}

/* ---------- Step sections ---------- */
.step { padding: 24px 0 56px; scroll-margin-top: var(--anchor-offset); }
.step--last { padding: 24px 0 0; }
.step__kicker { line-height: 12px; margin: 0 0 12px; }
.step__rule { height: 1px; border: 0; margin: 0 0 24px; background: var(--color-divider); }
.step__title {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 12px;
}
.step__title--spaced { margin-bottom: 28px; }
.step__intro { margin: 0 0 28px; max-width: 60ch; color: var(--color-muted); }
.step__intro--tight { margin-bottom: 8px; }
.step__outro {
    margin: 24px 0 0; max-width: 60ch;
    font-size: 15px; line-height: 23px;
    color: var(--color-muted);
}

/* Shared row list: a divider on top, hairlines between rows. */
.rows { display: grid; border-top: 1px solid var(--color-divider); }
.row { border-bottom: 1px solid var(--color-hairline); }

/* Step 01: trigger table */
.trigger-row {
    display: flex; flex-wrap: wrap;
    gap: 4px 24px;
    padding: 12px 0;
    font-size: 15px; line-height: 23px;
}
.trigger-row--head {
    padding: 10px 0;
    border-bottom-color: var(--color-divider);
    font-size: 12px; line-height: 24px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    color: var(--color-muted-2);
}
.trigger-row__if { flex: 3 1 260px; }
.trigger-row__then { flex: 2 1 180px; font-weight: 500; color: var(--color-accent-700); }
.trigger-row--head .trigger-row__then { font-weight: 600; color: inherit; }
a.trigger-row__then { color: var(--color-accent-700); }
a.trigger-row__then:hover { color: var(--color-accent-800); }

/* Step 02: consequences */
.risk-row {
    display: flex; flex-wrap: wrap;
    gap: 6px 24px;
    padding: 18px 0;
}
.risk-row__title {
    flex: 1 1 200px;
    font-size: 20px; line-height: 24px;
    text-transform: uppercase; letter-spacing: 0;
    margin: 0;
}
.risk-row__body {
    flex: 2 1 300px; margin: 0;
    font-size: 15px; line-height: 23px;
    color: var(--color-muted);
}

/* Step 03: domains and services */
.domain {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 4px 14px;
    padding: 32px 0 12px;
    border-bottom: 1px solid var(--color-text);
}
.domain__num {
    font-family: var(--font-heading); font-weight: 600;
    font-size: 30px; line-height: 30px;
    color: var(--color-accent-700);
}
.domain__title {
    font-size: 24px; line-height: 28px;
    text-transform: uppercase; letter-spacing: 0;
    margin: 0;
}
.domain__risk {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 14px; line-height: 21px;
    color: var(--color-muted-2);
}
.service {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 12px 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-divider);
}
.service__title {
    font-size: 21px; line-height: 24px;
    text-transform: uppercase; letter-spacing: 0;
    margin: 0 0 6px;
}
.service__scope {
    margin: 0 0 10px;
    font-size: 14px; line-height: 21px;
    color: var(--color-muted-2);
}
.service__depth p { margin: 8px 0 0; font-size: 14px; line-height: 21px; }

/* Step 04: depth, recommendations, profiles */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 32px;
}
.depth-card, .profile-card { padding: 24px; }
.depth-card__quote {
    font-family: var(--font-heading); font-weight: 600;
    font-size: 28px; line-height: 1.1;
    margin: 16px 0 12px;
}
.depth-card__body { margin: 0; font-size: 15px; line-height: 23px; color: var(--color-muted); }

.recommendations { margin-top: 40px; }
.recommendation {
    display: flex; flex-wrap: wrap;
    gap: 8px 24px;
    padding: 16px 0;
}
.recommendation__tag { flex: 0 0 190px; }
.recommendation__body { flex: 1 1 280px; margin: 0; font-size: 15px; line-height: 23px; }
.recommendation__body span { color: var(--color-muted); }

.profiles__title {
    font-size: 22px; line-height: 24px;
    text-transform: uppercase; letter-spacing: 0;
    margin: 48px 0 24px;
    scroll-margin-top: var(--anchor-offset);
}
.profile-card__title {
    font-size: 26px; line-height: 28px;
    text-transform: uppercase; letter-spacing: 0;
    margin: 6px 0 16px;
}
.profile-card__item {
    display: flex; justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--color-hairline);
    font-size: 15px;
}
.profile-card__item:first-of-type { border-top-color: var(--color-divider); }
.profile-card__item:last-of-type { border-bottom: 1px solid var(--color-hairline); }
.profile-card__note {
    margin: 14px 0 0;
    font-size: 14px; line-height: 21px;
    color: var(--color-muted);
}

/* After you request */
.after {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 40px;
}
.after__title {
    font-size: 22px; line-height: 24px;
    text-transform: uppercase; letter-spacing: 0;
    margin: 0 0 16px;
}
.after__list {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--color-divider);
}
.after__list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-hairline);
    font-size: 15px; line-height: 22px;
}
.after__list--steps li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
}
.after__list--steps li > span { font-size: 13px; font-weight: 600; color: var(--color-accent-700); }
.after__list--checks li { display: flex; gap: 10px; align-items: flex-start; }
.after__list--checks li > span {
    flex: none;
    width: 13px; height: 13px;
    margin-top: 5px;
    border: 1.5px solid var(--color-accent-500);
    border-radius: 3px;
}

/* ---------- Request card (Jotform) ---------- */
.request-card { padding: 28px; }
.request-card__title {
    font-size: 30px; line-height: 32px;
    text-transform: uppercase; letter-spacing: 0;
    margin: 6px 0 10px;
}
.request-card__intro {
    margin: 0 0 20px;
    font-size: 15px; line-height: 23px;
    color: var(--color-muted);
}
.request-card__form { margin: 0; }
.request-card__form iframe {
    display: block;
    width: 100%; min-width: 100%; max-width: 100%;
    border: 0;
    background: transparent;
}
.request-card__pending {
    display: grid; gap: 14px;
    padding: 18px;
    border: 1px dashed var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 15px; line-height: 23px;
}
.request-card__pending p { margin: 0; }
.request-card__pending .btn { justify-self: start; }
.request-note {
    display: flex; gap: 8px;
    margin: 16px 0 0;
    font-size: 13px; line-height: 19px;
    color: var(--color-muted-2);
}

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; background: var(--color-accent-800); color: #ffffff; }
.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px var(--gutter);
    display: flex; flex-wrap: wrap;
    gap: 8px 32px;
    justify-content: space-between;
    font-size: 13px; line-height: 24px;
    color: var(--color-footer-text);
}

/* ---------- Generic pages (index.php) ---------- */
.entry {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 64px var(--gutter) 88px;
}
.entry__title {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 24px;
}
.entry article + article, .entry__title + article { margin-top: 40px; }
.entry .navigation.pagination { margin-top: 48px; }
.entry .nav-links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 15px; }
.entry .nav-links .current { font-weight: 600; color: var(--color-accent-700); }
.entry__title--list { font-size: 24px; line-height: 28px; margin-bottom: 8px; }
.entry__title--list a { color: inherit; text-decoration: none; }
.entry__title--list a:hover { color: var(--color-accent-700); }
.entry__content > * + * { margin-top: 16px; }
.entry__content p { margin: 0; color: var(--color-muted); }

/* WordPress's password form, on a protected pricing page. */
.post-password-form p + p { margin-top: 16px; }
.post-password-form label { display: grid; gap: 5px; max-width: 360px; font-size: 12px; color: var(--color-muted-2); }
.post-password-form input[type="password"] {
    width: 100%; min-height: 44px; padding: 6px 10px;
    font: inherit; font-size: 15px; color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.post-password-form input[type="password"]:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.post-password-form input[type="submit"] {
    margin-top: 12px; min-height: 44px; padding: var(--space-2) 18px;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
    color: var(--color-bg); background: var(--color-accent);
    border: 1px solid var(--color-accent); border-radius: var(--radius-md);
    cursor: pointer;
}
.post-password-form input[type="submit"]:hover { background: var(--color-accent-600); }