/* ==========================================================================
   MRA Research Tech - Main Stylesheet
   Entry point: imports all component files, defines tokens and base styles.
   ========================================================================== */

/* 1. Component imports
   ========================================================================== */
@import 'components/header.css';
@import 'components/hero.css';
@import 'components/page-hero.css';
@import 'components/services-overview.css';
@import 'components/methods.css';
@import 'components/cta-banner.css';
@import 'components/testimonials.css';
@import 'components/accordion-split.css';
@import 'components/services-grid.css';
@import 'components/split-block.css';
@import 'components/team.css';
@import 'components/approach.css';
@import 'components/contact-form.css';
@import 'components/map.css';
@import 'components/legal-content.css';
@import 'components/newsletter.css';
@import 'components/footer.css';


/* 2. Design Tokens (CSS Custom Properties)
   ========================================================================== */
:root {
    /* --- Brand Colours --- */
    --color-navy:       #232747;   /* Primary text, button bottom border, footer bg */
    --color-dark-blue:  #011F53;   /* CTA banner bg, button hover fill */
    --color-blue:       #007CC6;   /* Button fill, links, section labels */
    --color-light-blue: #E7EEF5;   /* Background colour 1 */
    --color-grey:       #F6F6F6;   /* Background colour 2 */
    --color-white:      #FFFFFF;

    /* Semantic aliases */
    --color-text:       #232747;   /* Navy - primary text */
    --color-text-light: #555555;   /* Body copy / descriptions */
    --color-primary:    #007CC6;   /* Blue - CTAs, links, labels */

    /* White-on-dark palette (footer, header, newsletter, CTA) */
    --color-white-90:   rgba(255, 255, 255, 0.9);
    --color-white-85:   rgba(255, 255, 255, 0.85);
    --color-white-65:   rgba(255, 255, 255, 0.65);
    --color-white-60:   rgba(255, 255, 255, 0.6);
    --color-white-55:   rgba(255, 255, 255, 0.55);
    --color-white-50:   rgba(255, 255, 255, 0.5);
    --color-white-40:   rgba(255, 255, 255, 0.4);
    --color-white-25:   rgba(255, 255, 255, 0.25);
    --color-white-15:   rgba(255, 255, 255, 0.15);
    --color-white-10:   rgba(255, 255, 255, 0.1);
    --color-white-08:   rgba(255, 255, 255, 0.08);

    /* Misc */
    --color-border-light: #D5DEE8;
    --color-overlay-dark: #132F5F80;

    /* --- Typography --- */
    --font-heading: 'Grandview', 'Segoe UI', sans-serif;
    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font sizes - mobile-first, overridden at 1024px */
    --font-size-body:        0.875rem;   /* 14px - descriptions, paragraphs */
    --font-size-body-small:  0.8125rem;  /* 13px - card descriptions, meta */

    /* --- Spacing Scale --- */
    --space-xs:  0.5rem;    /*  8px */
    --space-sm:  1rem;      /* 16px */
    --space-md:  2rem;      /* 32px */
    --space-lg:  4rem;      /* 64px */
    --space-xl:  6rem;      /* 96px */
    --space-xxl: 8rem;      /* 128px */

    /* --- Section Spacing --- */
    --section-padding: var(--space-lg);   /* 64px mobile, overridden at 1024px */

    /* --- Container --- */
    --container-max:     1200px;
    --container-padding: 0.75rem;

    /* --- Borders & Radius --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    /* --- Transitions --- */
    --transition-base: 200ms ease;
    --transition-slow: 350ms ease;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 4px rgba(35, 39, 71, 0.08);
    --shadow-md: 0 4px 20px rgba(35, 39, 71, 0.12);
    --shadow-lg: 0 8px 40px rgba(35, 39, 71, 0.18);

    /*
     * Breakpoints (reference - cannot be used inside @media):
     *   --bp-sm:  576px
     *   --bp-md:  768px
     *   --bp-lg:  1024px
     *   --bp-xl:  1280px
     *   --bp-xxl: 1440px
     */
}


/* 3. CSS Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

address {
    font-style: normal;
}


/* 4. Base Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-navy);
    overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.0625rem, 2vw, 1.25rem); }
h4 { font-size: 1.0625rem; }

p {
    color: var(--color-text-light);
    line-height: 1.75;
    overflow-wrap: break-word;
}

strong {
    font-weight: 600;
    color: var(--color-navy);
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}


/* 5. Layout Utilities
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

@media ( min-width: 768px ) {
    .container {
        padding-inline: 1.5rem;
    }
}

@media ( min-width: 1024px ) {
    :root {
        --font-size-body:       1rem;       /* 16px */
        --font-size-body-small: 0.875rem;   /* 14px */
        --section-padding:      var(--space-xl);  /* 96px desktop */
    }
}

.site-main {
    min-height: 60vh;
}

/* Skip to content (accessibility) */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: top var(--transition-base);
}
.skip-to-content:focus {
    top: 1rem;
}


/* 6. Button Utilities
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0;
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base);
}

/* Filled blue with navy bottom border */
.btn--primary {
    background-color: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-bottom: 4px solid var(--color-navy);
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--color-navy);
    border-bottom-color: var(--color-navy);
}

/* Secondary - transparent, navy border + text (light backgrounds) */
.btn--secondary {
    background-color: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background-color: var(--color-navy);
    color: var(--color-white);
}

/* Primary reverse - filled white, navy text, blue bottom border (dark backgrounds) */
.btn--primary-reverse {
    background-color: var(--color-white);
    color: var(--color-navy);
    border: none;
    border-bottom: 4px solid var(--color-blue);
}
.btn--primary-reverse:hover,
.btn--primary-reverse:focus-visible {
    background-color: var(--color-blue);
    border-bottom-color: var(--color-blue);
    color: var(--color-white);
}
.btn--primary-reverse img {
    filter: brightness(0);
    transition: filter var(--transition-base);
}
.btn--primary-reverse:hover img,
.btn--primary-reverse:focus-visible img {
    filter: brightness(0) invert(1);
}


/* 7. Section Label
   ========================================================================== */
.section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: var(--space-sm);
}


/* 8. WordPress Core Utilities
   ========================================================================== */
.alignleft  { float: left;  margin-right: var(--space-sm); }
.alignright { float: right; margin-left: var(--space-sm);  }
.aligncenter { margin-inline: auto; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}


/* 9. Back to Top
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--color-navy);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
                background-color var(--transition-base);
    cursor: pointer;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--color-blue);
}

.back-to-top svg {
    display: block;
}


/* 10. Scroll Reveal
   ========================================================================== */

/*
 * Hidden from first paint via .has-reveal on <html> (set by inline script).
 * JS adds .is-visible to trigger the entry transition.
 * No-JS users see everything immediately since .has-reveal won't exist.
 */

/* Fade-up targets */
.has-reveal .hero__content,
.has-reveal .hero__image-col,
.has-reveal .page-hero__inner,
.has-reveal .services-overview__header,
.has-reveal .services-overview__image-col,
.has-reveal .services-overview__btn-wrap,
.has-reveal .services-grid__header,
.has-reveal .methods__header,
.has-reveal .cta-banner__inner,
.has-reveal .testimonials__header,
.has-reveal .testimonials__slider-wrap,
.has-reveal .accordion-split__header,
.has-reveal .accordion-split__image-col,
.has-reveal .accordion-split__cta-text,
.has-reveal .split-block__content,
.has-reveal .split-block__image-col,
.has-reveal .approach__header,
.has-reveal .team__header,
.has-reveal .contact-form__header,
.has-reveal .contact-form__grid,
.has-reveal .newsletter__inner {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Direction overrides */
.has-reveal .hero__image-col,
.has-reveal .accordion-split__image-col {
    transform: translateX(14px);
}

.has-reveal .services-overview__image-col {
    transform: translateX(-14px);
}

/* Visible state - specificity must match or beat the hidden selectors */
.has-reveal .is-visible.is-visible {
    opacity: 1;
    transform: translate(0);
}

/* Staggered children */
.has-reveal .services-overview__cards > *,
.has-reveal .services-grid__cards > *,
.has-reveal .team__grid > *,
.has-reveal .approach__steps > *,
.has-reveal .approach__cards > *,
.has-reveal .split-block__trust-points > *,
.has-reveal .accordion > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.has-reveal .services-overview__cards.is-visible > *,
.has-reveal .services-grid__cards.is-visible > *,
.has-reveal .team__grid.is-visible > *,
.has-reveal .approach__steps.is-visible > *,
.has-reveal .approach__cards.is-visible > *,
.has-reveal .split-block__trust-points.is-visible > *,
.has-reveal .accordion.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Respect reduced motion preference */
@media ( prefers-reduced-motion: reduce ) {
    .has-reveal .hero__content,
    .has-reveal .hero__image-col,
    .has-reveal .page-hero__inner,
    .has-reveal .services-overview__header,
    .has-reveal .services-overview__image-col,
    .has-reveal .services-overview__btn-wrap,
    .has-reveal .services-grid__header,
    .has-reveal .methods__header,
    .has-reveal .cta-banner__inner,
    .has-reveal .testimonials__header,
    .has-reveal .testimonials__slider-wrap,
    .has-reveal .accordion-split__header,
    .has-reveal .accordion-split__image-col,
    .has-reveal .accordion-split__cta-text,
    .has-reveal .split-block__content,
    .has-reveal .split-block__image-col,
    .has-reveal .approach__header,
    .has-reveal .team__header,
    .has-reveal .contact-form__header,
    .has-reveal .contact-form__grid,
    .has-reveal .newsletter__inner,
    .has-reveal .services-overview__cards > *,
    .has-reveal .services-grid__cards > *,
    .has-reveal .team__grid > *,
    .has-reveal .approach__steps > *,
    .has-reveal .approach__cards > *,
    .has-reveal .split-block__trust-points > *,
    .has-reveal .accordion > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}