/*
Theme Name:  Next Percent Media 2026
Theme URI:
Author:      Next Percent Media
Author URI:
Description: High-performance landing page theme for Next Percent Media. Built for ACF Flexible Content blocks, zero blog functionality, full visual quality.
Version:     1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: next-percent-media-2026
Tags:        landing-page, custom-logo, full-width-template
*/


/* ==========================================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Variables)
   2.  Modern CSS Reset
   3.  Base / Typography
   4.  Layout & Structure
   5.  Header
   6.  Navigation
   7.  Main Content
   8.  Footer
   9.  Accessibility
   10. Utility Classes
   11. Responsive — Mobile-first breakpoints
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
	/* --- Colours --- */
	--color-black:       #000000;
	--color-white:       #ffffff;
	--color-text:        #111111;
	--color-text-muted:  #666666;
	--color-bg:          #ffffff;
	--color-border:      #e5e5e5;

	/* --- Typography --- */
	--font-sans:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--font-mono:   'Courier New', Courier, monospace;
	--font-size-base: 1rem;       /* 16px */
	--line-height-base: 1.6;

	/* --- Spacing scale (4px base) --- */
	--space-1:  0.25rem;  /*  4px */
	--space-2:  0.5rem;   /*  8px */
	--space-3:  0.75rem;  /* 12px */
	--space-4:  1rem;     /* 16px */
	--space-5:  1.25rem;  /* 20px */
	--space-6:  1.5rem;   /* 24px */
	--space-8:  2rem;     /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	--space-20: 5rem;     /* 80px */
	--space-24: 6rem;     /* 96px */

	/* --- Layout --- */
	--container-max:   1440px;
	--container-inner: 1200px;
	--container-text:  760px;
	--gutter:          var(--space-6);

	/* --- Transitions --- */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms ease;

	/* --- z-index scale --- */
	--z-below:   -1;
	--z-base:     0;
	--z-above:    10;
	--z-overlay:  100;
	--z-header:   200;
	--z-modal:    300;
}


/* ==========================================================================
   2. MODERN CSS RESET
   Based on Andy Bell's modern reset + custom additions.
   https://piccalil.li/blog/a-more-modern-css-reset/
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	/* Prevent font size inflation on mobile */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	/* Smooth scrolling — respect reduced-motion preference */
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	min-height: 100vh;
	line-height: var(--line-height-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* Prevent images from ever upscaling beyond natural dimensions */
img {
	height: auto;
	max-width: 100%;
	/* Do NOT set width: 100% — let images size naturally */
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Remove list styles on ul/ol with a list role (menus, etc.) */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Remove default button styles */
button {
	background: none;
	border: none;
	cursor: pointer;
}

/* Anchor reset */
a {
	color: inherit;
	text-decoration: none;
}

/* Remove default fieldset styles */
fieldset {
	border: 0;
}

/* Table improvements */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* ==========================================================================
   3. BASE / TYPOGRAPHY
   ========================================================================== */

html {
	font-size: 100%; /* = 16px — do not change this, use rem for scaling */
}

body {
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.2;
	font-weight: 700;
}

p {
	line-height: var(--line-height-base);
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* ==========================================================================
   4. LAYOUT & STRUCTURE
   ========================================================================== */

/* Full-width wrapper */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Main content area grows to fill available space */
.site__main {
	flex: 1 0 auto;
}

/* Centred container */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Narrower inner container for text-heavy content */
.container--inner {
	max-width: var(--container-inner);
}

/* Tight container for long-form text */
.container--text {
	max-width: var(--container-text);
}

/* Full-bleed utility (breaks out of container) */
.full-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header {
	position: relative;
	z-index: var(--z-header);
}


/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */

.site-nav {
	/* Navigation styles go here */
}

.site-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.site-nav__item {
	/* Individual nav item */
}

.site-nav__link {
	display: inline-block;
}


/* ==========================================================================
   7. MAIN CONTENT
   ========================================================================== */

.site__main {
	/* Main content wrapper */
}


/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.site-footer {
	margin-top: auto;
}


/* ==========================================================================
   9. ACCESSIBILITY
   ========================================================================== */

/* Skip-to-content link — hidden until focused */
.skip-to-content {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	z-index: 9999;
	padding: var(--space-3) var(--space-6);
	background-color: var(--color-black);
	color: var(--color-white);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	transition: top var(--transition-fast);
}

.skip-to-content:focus {
	top: 0;
}

/* Screen-reader only — visually hidden but accessible */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}


/* ==========================================================================
   10. UTILITY CLASSES
   ========================================================================== */

/* Display */
.u-hidden      { display: none !important; }
.u-block       { display: block !important; }
.u-flex        { display: flex !important; }
.u-grid        { display: grid !important; }
.u-inline      { display: inline !important; }
.u-inline-flex { display: inline-flex !important; }

/* Text alignment */
.u-text-left   { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right !important; }

/* Visibility */
.u-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* ==========================================================================
   11. RESPONSIVE — MOBILE-FIRST BREAKPOINTS
   ========================================================================== */

/*
 * Breakpoints:
 *   xs:  < 480px    (default — no wrapper needed)
 *   sm:  >= 480px
 *   md:  >= 768px
 *   lg:  >= 1024px
 *   xl:  >= 1280px
 *   2xl: >= 1536px
 */

/* Small devices */
@media (min-width: 480px) {
	:root {
		--gutter: var(--space-8);
	}
}

/* Medium devices (tablets) */
@media (min-width: 768px) {
	:root {
		--gutter: var(--space-10);
	}
}

/* Large devices (desktops) */
@media (min-width: 1024px) {
	:root {
		--gutter: var(--space-12);
	}
}

/* Extra-large devices */
@media (min-width: 1280px) {
	:root {
		--gutter: var(--space-16);
	}
}