/* ================================================================
   EditNative Starter — Master CSS
   ================================================================

   ONE FILE TO STYLE EVERYTHING.

   This file exposes every design token as a CSS custom property.
   Copy this file, change the values below, and paste it as
   Additional CSS in the WordPress Site Editor to restyle your
   entire site instantly.

   HOW TO USE:
   1. Copy the :root block below
   2. Change any values you want
   3. Go to Appearance > Editor > Styles > Additional CSS
   4. Paste your modified :root block
   5. Save — done. Your entire site updates.

   Or: edit this file directly and redeploy.

   ================================================================ */


/* ================================================================
   1. COLOR TOKENS (reference — commented out)
   ================================================================
   These are your theme.json default colors for reference.
   Uncomment the :root block below to override them.
   While commented out, style variations (Dark, Warm, etc.) work.
   ================================================================ */

/*
:root {
	--wp--preset--color--base:           #ffffff;
	--wp--preset--color--contrast:       #111827;
	--wp--preset--color--primary:        #1e3a5f;
	--wp--preset--color--primary-dark:   #15294a;
	--wp--preset--color--accent:         #2563eb;
	--wp--preset--color--accent-dark:    #1d4ed8;
	--wp--preset--color--secondary:      #f0f4f8;
	--wp--preset--color--secondary-dark: #e2e8f0;
	--wp--preset--color--surface:        #f9fafb;
	--wp--preset--color--neutral:        #64748b;
	--wp--preset--color--neutral-dark:   #374151;
	--wp--preset--color--border:         #d1d5db;
	--wp--preset--color--primary-text:   #cbd5e1;
	--wp--preset--color--primary-muted:  #94a3b8;
}
*/
/* ↑ Uncomment the :root block above to override theme.json colors.
   While commented out, colors come from theme.json and style variations work.
   To restyle: uncomment, change values, or paste into Additional CSS. */


/* ================================================================
   2. TYPOGRAPHY TOKENS
   ================================================================
   Font sizes are set by theme.json and fluid by default.
   Override them here for global font size changes.
   ================================================================ */

/*
:root {
	--wp--preset--font-size--x-small:    0.8125rem;
	--wp--preset--font-size--small:      0.875rem;
	--wp--preset--font-size--medium:     1rem;
	--wp--preset--font-size--large:      1.2rem;
	--wp--preset--font-size--x-large:    1.6rem;
	--wp--preset--font-size--xx-large:   2.4rem;
	--wp--preset--font-size--xxx-large:  3.2rem;
}
*/


/* ================================================================
   3. SPACING TOKENS
   ================================================================
   The spacing scale controls padding, margins, and gaps.
   Override to change the rhythm of the entire layout.
   ================================================================ */

/*
:root {
	--wp--preset--spacing--10: 0.25rem;
	--wp--preset--spacing--20: 0.5rem;
	--wp--preset--spacing--30: 0.75rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: clamp(2rem, 1.5rem + 1.25vw, 2.5rem);
	--wp--preset--spacing--70: clamp(3rem, 2rem + 2.5vw, 4rem);
	--wp--preset--spacing--80: clamp(3.5rem, 2rem + 3.75vw, 6rem);
	--wp--preset--spacing--90: clamp(4rem, 2rem + 5vw, 8rem);
}
*/


/* ================================================================
   4. SHADOW TOKENS
   ================================================================ */

/*
:root {
	--wp--preset--shadow--sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--wp--preset--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--wp--preset--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}
*/


/* ================================================================
   5. LAYOUT TOKENS
   ================================================================ */

/*
:root {
	--wp--style--global--content-size: 720px;
	--wp--style--global--wide-size:    1180px;
}
*/


/* ================================================================
   6. EDITNATIVE CUSTOM TOKENS
   ================================================================
   Additional design tokens not in theme.json.
   These control patterns and components.
   ================================================================ */

:root {
	/* Border radius */
	--en--radius--button:  6px;    /* Buttons, small interactive elements */
	--en--radius--card:    8px;    /* Cards, panels, grouped content */
	--en--radius--input:   6px;    /* Form inputs, search bars */

	/* Transitions */
	--en--transition:      0.15s ease;

	/* Icon sizing */
	--en--icon-size:       2rem;   /* Emoji/icon size in feature cards */

	/* Card shadow */
	--en--card-shadow:     var(--wp--preset--shadow--sm);   /* Subtle elevation for cards */
}


/* ================================================================
   7. BASE STYLES
   ================================================================
   Things theme.json cannot handle.
   ================================================================ */

/* Smooth scroll — respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Focus ring — accessibility */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Selection highlight */
::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}


/* ================================================================
   8. BUTTON STYLES
   ================================================================ */

.wp-element-button,
.wp-block-button__link {
	border-radius: var(--en--radius--button);
	transition: background-color var(--en--transition),
	            color var(--en--transition),
	            border-color var(--en--transition),
	            box-shadow var(--en--transition);
}

/* Outline button defaults */
.is-style-outline .wp-block-button__link {
	border-width: 2px;
	border-color: currentColor;
}


/* ================================================================
   9. NAVIGATION STYLES
   ================================================================ */

.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--en--radius--button);
	box-shadow: var(--wp--preset--shadow--md);
	padding: var(--wp--preset--spacing--20) 0;
}


/* ================================================================
   10. FORM INPUT STYLES
   ================================================================ */

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--en--radius--input);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	transition: border-color var(--en--transition);
}

.wp-block-search__input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}


/* ================================================================
   11. ACCORDION / DETAILS STYLES
   ================================================================ */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	padding: var(--wp--preset--spacing--30) 0;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--accent);
}


/* ================================================================
   12. TABLE STYLES
   ================================================================ */

.wp-block-table {
	overflow-x: auto;           /* Prevent horizontal overflow on mobile */
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 400px;           /* Ensure tables scroll rather than crush columns */
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-table th {
	background-color: var(--wp--preset--color--surface);
	font-weight: 600;
	text-align: left;
}


/* ================================================================
   13. IMAGE & MEDIA STYLES
   ================================================================ */

.wp-block-image figcaption {
	margin-top: var(--wp--preset--spacing--20);
}


/* ================================================================
   14. CARD STYLES
   ================================================================
   Applied to pattern card groups via border-radius.
   Patterns use inline styles, but these provide fallback control.
   ================================================================ */

/* Feature grid, testimonial, pricing, contact card panels */
.wp-block-group[style*="border-radius:8px"],
.wp-block-group[style*="border-radius: 8px"] {
	box-shadow: var(--en--card-shadow);
	transition: box-shadow var(--en--transition);
}


/* ================================================================
   15. SKIP TO CONTENT — ACCESSIBILITY
   ================================================================ */

.skip-to-content {
	position: absolute;
	top: -100%;
	left: var(--wp--preset--spacing--50);
	z-index: 999;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--en--radius--button);
}

.skip-to-content:focus {
	top: var(--wp--preset--spacing--30);
}

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


/* ================================================================
   16. POST META SEPARATOR
   ================================================================
   Adds a dot separator between post date and author
   without polluting the DOM or screen readers.
   ================================================================ */

.wp-block-post-date + .wp-block-post-author-name::before {
	content: "\00b7";
	margin-inline-end: var(--wp--preset--spacing--30);
	margin-inline-start: var(--wp--preset--spacing--10);
}


/* ================================================================
   17. BROWSER MOCKUP STYLES
   ================================================================
   Used in hero section to show a visual preview of the theme.
   ================================================================ */

.en-browser-mockup {
	box-shadow: var(--wp--preset--shadow--lg);
	overflow: hidden;
}


/* ================================================================
   18. CARD HOVER EFFECTS
   ================================================================
   Subtle lift on hover for interactive-feeling cards.
   ================================================================ */

.wp-block-group[style*="border-radius:8px"]:hover,
.wp-block-group[style*="border-radius: 8px"]:hover {
	box-shadow: var(--wp--preset--shadow--md);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-group[style*="border-radius:8px"],
	.wp-block-group[style*="border-radius: 8px"] {
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}
}


/* ================================================================
   19. HEADER CTA BUTTON
   ================================================================
   Smaller button styling for the header CTA.
   ================================================================ */

.en-header-cta .wp-block-button__link {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-weight: 600;
}


/* ================================================================
   20. CODE BLOCK IN SPLIT SECTIONS
   ================================================================
   Better styling for code blocks used as visual elements.
   ================================================================ */

.wp-block-code {
	tab-size: 2;
	line-height: 1.6;
}

.wp-block-code code {
	white-space: pre-wrap;
	word-break: break-word;
}


/* ================================================================
   21. RESPONSIVE REFINEMENTS
   ================================================================
   Mobile polish beyond what WordPress core handles.
   ================================================================ */

@media (max-width: 781px) {
	/* Reduce large vertical spacing on mobile — CLAUDE.md rule #10 */
	:root {
		--wp--preset--spacing--80: 2.5rem;
		--wp--preset--spacing--90: 3rem;
	}

	/* Ensure hero columns stack nicely */
	.has-primary-background-color .wp-block-columns {
		gap: var(--wp--preset--spacing--60);
	}

	/* Browser mockup gets slight margin on mobile */
	.en-browser-mockup {
		margin-top: var(--wp--preset--spacing--40);
	}
}


/* ================================================================
   22. COMPARISON TABLE STYLING
   ================================================================
   Checkmark / X visual treatment for comparison tables.
   ================================================================ */

.wp-block-table td:nth-child(2) {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.wp-block-table thead th:nth-child(2) {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}


/* ================================================================
   23. TRUST BADGE
   ================================================================ */

.en-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 100px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}


/* ================================================================
   QUICK RESTYLE EXAMPLE
   ================================================================

   Want a completely different look? Copy this block into
   Additional CSS and change the values:

   :root {
       --wp--preset--color--base:         #faf9f6;
       --wp--preset--color--contrast:     #1a1a1a;
       --wp--preset--color--primary:      #2d3436;
       --wp--preset--color--primary-dark: #1e2022;
       --wp--preset--color--accent:       #e17055;
       --wp--preset--color--accent-dark:  #d35400;
       --wp--preset--color--secondary:    #f5f0eb;
       --wp--preset--color--secondary-dark: #ebe3db;
       --wp--preset--color--surface:      #fdfcfa;
       --wp--preset--color--neutral:      #808080;
       --wp--preset--color--neutral-dark: #555555;
       --wp--preset--color--border:       #ddd;
       --en--radius--button: 20px;
       --en--radius--card:   12px;
   }

   That's it. Entire site restyled.

   ================================================================ */