/* ============================================
   INDUSTRY PAGE (page-templates/template-industry.php)
   Ink Black hero with the free audit offer, ruled
   market panel, plain-text example searches,
   terracotta "how SEO helps" section.
   Separate from location.css by design.
============================================ */

.tr-ind-template {
    --tr-black:        #1C1C1C;
    --tr-tan:          #C8A87A;
    --tr-terracotta:   #D68A5C;
    --tr-cream:        #FFFDF7;
    --tr-warm-white:   #F9F6F0;
    --tr-sand:         #E8DDD0;
    --tr-driftwood:    #6B5D4A;
    --tr-subtle:       #9A8A74;
    --tr-hire-orange:  #E8632A;
    --tr-hire-hover:   #F07A45;
    --tr-green-tint:   #D4EDDF;
    --tr-green-text:   #1A5C3A;
    --tr-error:        #A3341B;
    --tr-error-tint:   #FBEAE4;
    --tr-error-text:   #7A2614;

    --tr-radius-field: 8px;
    --tr-radius-card:  12px;
    --tr-gutter:       clamp(16px, 4vw, 40px);
    --tr-section:      clamp(28px, 4vw, 52px);
    --tr-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

    background-color: var(--tr-cream);
    scrollbar-color: var(--tr-driftwood) var(--tr-warm-white);
}

/* GeneratePress containers: let the template's bands run full width */
.tr-ind-template #page.grid-container,
.tr-ind-template .site.grid-container {
    max-width: none;
    padding: 0;
}

.tr-ind-template .site-content {
    display: block;
    padding: 0;
}

/* Browser surfaces */
.tr-ind ::selection {
    background-color: var(--tr-tan);
    color: var(--tr-black);
}

.tr-ind {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--tr-black);
    caret-color: var(--tr-black);
}

.tr-ind a {
    color: var(--tr-black);
    text-decoration-line: underline;
    text-decoration-color: var(--tr-terracotta);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
}

.tr-ind a:hover {
    text-decoration-color: var(--tr-black);
}

.tr-ind :focus-visible {
    outline: 3px solid var(--tr-black);
    outline-offset: 3px;
    border-radius: var(--tr-radius-field);
}

.tr-ind__wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--tr-gutter);
}

/* --- Type --- */

.tr-ind h1,
.tr-ind h2,
.tr-ind h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    color: inherit;
    text-wrap: balance;
    letter-spacing: -0.015em;
}

.tr-ind__title {
    font-size: clamp(1.875rem, 1.25rem + 2.4vw, 2.75rem);
    line-height: 1.12;
    margin: 0 0 24px;
    max-width: 22ch;
}

.tr-ind__h2 {
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 1.875rem);
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Rope Tan lettering is allowed on Ink Black (7.6:1) */
.tr-ind__accent {
    color: var(--tr-tan);
}

.tr-ind__prose {
    max-width: 66ch;
}

.tr-ind__prose p {
    margin: 0 0 1.1em;
}

.tr-ind__prose p:last-child {
    margin-bottom: 0;
}

.tr-ind__source-line {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--tr-driftwood);
}

.tr-ind__prose .tr-ind__source-line {
    margin-top: 16px;
}

/* --- Hero: Ink Black band --- */

.tr-ind__hero {
    background-color: var(--tr-black);
    color: var(--tr-cream);
    padding-block: clamp(24px, 3vw, 36px) var(--tr-section);
}

.tr-ind__hero :focus-visible {
    outline-color: var(--tr-tan);
}

/* Breadcrumb on Ink: Subtle Text (5.1:1); Driftwood would fail here */
.tr-ind__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    list-style: none;
    margin: 0 0 clamp(28px, 4vw, 48px);
    padding: 0;
    font-size: 0.875rem;
    color: var(--tr-subtle);
}

.tr-ind__crumbs li + li::before {
    content: "/";
    margin-inline: 10px;
    color: var(--tr-subtle);
}

/* Vertical padding on an inline link grows its tap area to 44px without moving the line */
.tr-ind .tr-ind__crumbs a {
    padding-block: 13px;
    color: var(--tr-subtle);
    text-decoration-color: transparent;
}

.tr-ind .tr-ind__crumbs a:hover {
    color: var(--tr-cream);
    text-decoration-color: var(--tr-tan);
}

.tr-ind__hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
    row-gap: 48px;
    align-items: start;
}

.tr-ind__lead {
    grid-column: 1 / span 7;
}

.tr-ind__panel {
    grid-column: 8 / span 5;
}

.tr-ind__intro {
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 60ch;
    margin: 0 0 32px;
    color: var(--tr-cream);
}

/* --- Information panel: a ruled file on the dark hero --- */

.tr-ind__panel {
    background-color: var(--tr-warm-white);
    color: var(--tr-black);
    border: 1px solid var(--tr-sand);
    border-radius: var(--tr-radius-card);
    padding: 24px;
}

.tr-ind__panel :focus-visible {
    outline-color: var(--tr-black);
}

.tr-ind__panel-title {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 8px;
}

.tr-ind__facts {
    margin: 0;
}

.tr-ind__fact {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 12px;
    padding-block: 14px;
    border-top: 1px solid var(--tr-sand);
}

.tr-ind__fact dt {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tr-driftwood);
    padding-top: 2px;
}

.tr-ind__fact dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}

/* A status, not a CTA: outlined and neutral */
.tr-ind__tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    padding: 6px 10px;
    border: 1px solid var(--tr-black);
    border-radius: 99px;
}

.tr-ind__tag-note {
    display: block;
    margin-top: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--tr-driftwood);
}

.tr-ind__sources {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--tr-sand);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--tr-driftwood);
}

/* --- Buttons --- */

.tr-ind .tr-btn,
.tr-ind .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    border: 0;
    border-radius: var(--tr-radius-field);
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms var(--tr-ease-out);
}

/* Submit buttons are <button>s (see inc/location.php) so long labels wrap */
.tr-ind .wpcf7-submit {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
}

/* Hire orange with an Ink Black label (5.1:1); white would fail.
   :focus is listed so GeneratePress's grey/white button:focus rule never wins. */
.tr-ind .tr-btn--hire,
.tr-ind .wpcf7-submit,
.tr-ind .tr-btn--hire:focus,
.tr-ind .wpcf7-submit:focus {
    background-color: var(--tr-hire-orange);
    color: var(--tr-black);
}

.tr-ind .tr-btn--hire:hover,
.tr-ind .wpcf7-submit:hover {
    background-color: var(--tr-hire-hover);
    color: var(--tr-black);
}

.tr-ind .tr-btn:active,
.tr-ind .wpcf7-submit:active {
    transform: translateY(1px);
}

.tr-ind .wpcf7-submit:disabled {
    cursor: progress;
    opacity: 0.7;
}

/* --- Sections --- */

.tr-ind__section {
    padding-block: var(--tr-section);
}

.tr-ind__section--warm {
    background-color: var(--tr-warm-white);
}

.tr-ind__split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
    row-gap: 8px;
}

.tr-ind__split > :first-child {
    grid-column: 1 / span 4;
}

.tr-ind__split > :last-child {
    grid-column: 6 / span 7;
}

/* Challenges and opportunities: two equal columns */
.tr-ind__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 6vw, 88px);
    row-gap: 48px;
}

/* --- Example searches: plain text, real data only --- */

.tr-ind__searches {
    width: 100%;
    max-width: 66ch;
    margin: 32px 0 0;
    border: 0;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.5;
}

.tr-ind__searches caption {
    margin-bottom: 8px;
    text-align: left;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.tr-ind__searches th,
.tr-ind__searches td {
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--tr-sand);
    text-align: left;
    vertical-align: top;
}

.tr-ind__searches thead th {
    padding-block: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--tr-driftwood);
    border-top: 0;
}

.tr-ind__searches tbody th {
    font-weight: 500;
    padding-right: 16px;
}

.tr-ind__searches th:last-child,
.tr-ind__searches td:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tr-ind__searches tbody tr:last-child > * {
    border-bottom: 1px solid var(--tr-sand);
}

/* --- How SEO helps: the one terracotta section --- */

.tr-ind__section--terracotta {
    background-color: var(--tr-terracotta);
    color: var(--tr-black);
}

.tr-ind__section--terracotta :focus-visible {
    outline-color: var(--tr-black);
}

/* Links on terracotta: a terracotta underline would vanish */
.tr-ind__section--terracotta a {
    text-decoration-color: var(--tr-black);
}

.tr-ind__section--terracotta a:hover {
    text-decoration-thickness: 3px;
}

.tr-ind__prose .tr-ind__service-link {
    margin-top: 1em;
    font-weight: 500;
}

/* --- Related industries: chips, as on the Areas page --- */

.tr-ind__related {
    border-top: 1px solid var(--tr-sand);
}

.tr-ind__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.tr-ind__chips li {
    margin: 0;
}

.tr-ind__chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.9375rem;
    text-decoration: none;
    background-color: var(--tr-cream);
    border: 1px solid var(--tr-sand);
    border-radius: var(--tr-radius-field);
    transition: border-color 160ms ease;
}

.tr-ind__chips a:hover {
    border-color: var(--tr-black);
}

.tr-ind__all-link {
    margin: 0;
}

/* --- CTA band: Ink Black, as on location pages --- */

.tr-ind__cta {
    background-color: var(--tr-black);
    color: var(--tr-cream);
    padding-block: clamp(24px, 3vw, 40px);
}

.tr-ind__cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px 48px;
}

.tr-ind__cta .tr-ind__h2 {
    color: var(--tr-cream);
    max-width: 24ch;
}

.tr-ind__cta p {
    margin: 0;
    max-width: 58ch;
    color: var(--tr-cream);
}

.tr-ind__cta :focus-visible {
    outline-color: var(--tr-tan);
}

/* What the audit checks: a short ruled list under the offer */
.tr-ind__checks {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 253, 247, 0.18);
    max-width: 58ch;
}

.tr-ind__checks-title {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--tr-cream);
}

.tr-ind__checks ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-ind__checks li {
    position: relative;
    padding-left: 22px;
    margin: 0 0 6px;
    font-size: 1rem;
    line-height: 1.55;
}

/* Rope Tan marker: allowed on Ink Black */
.tr-ind__checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 10px;
    height: 2px;
    background-color: var(--tr-tan);
}

/* --- Contact form --- */

.tr-ind__request-intro {
    margin: 0;
    color: var(--tr-driftwood);
    max-width: 34ch;
}

/* A wider heading column so the heading sets in two lines, not four */
@media (min-width: 1024px) {
    #request .tr-ind__split > :first-child {
        grid-column: 1 / span 5;
    }

    #request .tr-ind__split > :last-child {
        grid-column: 7 / span 6;
    }
}

/* --- Forms (Contact Form 7) --- */

.tr-ind .wpcf7 form {
    margin: 0;
}

.tr-ind .tr-form {
    display: grid;
    gap: 16px;
}

.tr-ind .tr-form--request {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    max-width: 640px;
}

.tr-ind .tr-form--request .tr-form__field--wide {
    grid-column: 1 / -1;
}

.tr-ind .tr-form__field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.tr-ind .tr-form__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tr-black);
}

.tr-ind .wpcf7-form-control-wrap {
    display: block;
}

.tr-ind .tr-form input[type="text"],
.tr-ind .tr-form input[type="email"],
.tr-ind .tr-form input[type="url"] {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: var(--tr-black);
    background-color: var(--tr-warm-white);
    border: 1px solid var(--tr-driftwood);
    border-radius: var(--tr-radius-field);
    box-shadow: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.tr-ind .tr-form input::placeholder {
    color: var(--tr-driftwood);
    opacity: 1;
}

.tr-ind .tr-form input:not([type="submit"]):hover {
    border-color: var(--tr-black);
}

.tr-ind .tr-form input:not([type="submit"]):focus {
    background-color: var(--tr-cream);
    border-color: var(--tr-black);
}

/* Listed with :hover and :focus so the field focus moves to keeps its error border */
.tr-ind .tr-form input[aria-invalid="true"],
.tr-ind .tr-form input[aria-invalid="true"]:hover,
.tr-ind .tr-form input[aria-invalid="true"]:focus {
    border-color: var(--tr-error);
    border-width: 2px;
}

.tr-ind .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tr-error);
}

.tr-ind .tr-form__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.tr-ind .wpcf7-spinner {
    margin: 0;
    background-color: var(--tr-driftwood);
}

/* The hidden spinner would still hold a flex slot */
.tr-ind .wpcf7 form:not(.submitting) .wpcf7-spinner {
    display: none;
}

.tr-ind .wpcf7 form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 14px 16px;
    font-size: 0.9375rem;
    line-height: 1.55;
    border: 1px solid var(--tr-driftwood);
    border-radius: var(--tr-radius-field);
    background-color: var(--tr-warm-white);
    max-width: 640px;
}

.tr-ind .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--tr-green-text);
    background-color: var(--tr-green-tint);
    color: var(--tr-green-text);
}

.tr-ind .wpcf7 form.invalid .wpcf7-response-output,
.tr-ind .wpcf7 form.unaccepted .wpcf7-response-output,
.tr-ind .wpcf7 form.failed .wpcf7-response-output,
.tr-ind .wpcf7 form.aborted .wpcf7-response-output,
.tr-ind .wpcf7 form.spam .wpcf7-response-output {
    border-color: var(--tr-error);
    background-color: var(--tr-error-tint);
    color: var(--tr-error-text);
}

/* --- Reduced motion: colour changes stay, movement goes --- */

@media (prefers-reduced-motion: reduce) {
    .tr-ind .tr-btn,
    .tr-ind .wpcf7-submit {
        transition-property: background-color;
    }

    .tr-ind .tr-btn:active,
    .tr-ind .wpcf7-submit:active {
        transform: none;
    }
}

/* --- Responsive --- */

@media (max-width: 1023px) {
    .tr-ind__lead,
    .tr-ind__panel {
        grid-column: 1 / -1;
    }

    .tr-ind__panel {
        max-width: 640px;
    }

    .tr-ind__split > :first-child,
    .tr-ind__split > :last-child {
        grid-column: 1 / -1;
    }

    .tr-ind__pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .tr-ind__cta-inner {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

@media (max-width: 719px) {
    .tr-ind__hero {
        padding-top: 6px;
    }

    .tr-ind__crumbs ol {
        margin-bottom: 12px;
        font-size: 0.8125rem;
    }

    .tr-ind__title {
        max-width: none;
        font-size: 1.75rem;
        margin-bottom: 14px;
    }

    .tr-ind__intro {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .tr-ind .tr-ind__hero .tr-btn,
    .tr-ind .tr-ind__cta .tr-btn,
    .tr-ind .tr-form .wpcf7-submit {
        width: 100%;
    }

    .tr-ind .tr-form--request {
        grid-template-columns: minmax(0, 1fr);
    }

    .tr-ind__fact {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .tr-ind__panel {
        padding: 20px;
    }
}