/*
  Theme Name: Niche Surfaces
  Theme URI: https://{{niche-surfaces}}.codepixelz.tech/
  Author: Codepixelz
  Author URI: https://codepixelzmedia.com/
  Description: The custom startup block theme for WordPress, designed to provide a modern and visually appealing foundation for building websites. This theme is built with a focus on clean design, responsiveness, and ease of use, making it an ideal choice for businesses, startups, and individuals looking to create a professional online presence.
  This theme includes the basic CSS resets, typography styles, and a set of custom properties (CSS variables) for colors, font sizes, and spacing, allowing for easy customization and consistent styling across the website.
  Version: 1.0
  Requires at least: 6.0
  Tested up to: 6.7
  Requires PHP: 8.0
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: niche-surfaces
  Tags: custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations
  */

/* ========================================================
   DESIGN TOKENS (Global Variables)
   Used by ACF blocks + Custom Components
======================================================== */
/* ========================================================
   FONT LOADING
======================================================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
  font-family: "Urbanist";
  src:
    url("assets/fonts/Urbanist-Light.woff2") format("woff2"),
    url("assets/fonts/Urbanist-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src:
    url("assets/fonts/Urbanist-Medium.woff2") format("woff2"),
    url("assets/fonts/Urbanist-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src:
    url("assets/fonts/Urbanist-Bold.woff2") format("woff2"),
    url("assets/fonts/Urbanist-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src:
    url("assets/fonts/Urbanist-SemiBold.woff2") format("woff2"),
    url("assets/fonts/Urbanist-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src:
    url("assets/fonts/Urbanist-Regular.woff2") format("woff2"),
    url("assets/fonts/Urbanist-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src:
    url("assets/fonts/Helvetica-Light.woff2") format("woff2"),
    url("assets/fonts/Helvetica-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src:
    url("assets/fonts/Helvetica.woff2") format("woff2"),
    url("assets/fonts/Helvetica.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src:
    url("assets/fonts/Helvetica-Bold.woff2") format("woff2"),
    url("assets/fonts/Helvetica-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------
     COLORS
  -------------------------------------------------- */
  --color-primary: #0b2b36;
  --color-accent: #0080d0;
  --color-white: #ffffff;
  --color-off-white: #f8f8f8;
  --color-light-grey: #f3f3f3;
  --color-mid-grey: #b8b8b8;
  --color-grey: #666666;
  --color-dark-grey: #2b2b2b;
  --color-black: #000000;
  --border-color: rgba(0, 0, 0, 0.1);

  /* --------------------------------------------------
     FONT FAMILIES
  -------------------------------------------------- */
  --font-family-heading: "Urbanist", sans-serif;
  --font-family-body: "Helvetica", Arial, sans-serif;
  --font-family-montserrat: "Montserrat", sans-serif;

  /* --------------------------------------------------
     FONT SIZES (Fluid-ready scale)
  -------------------------------------------------- */
  --fs-xs: 0.75rem;
  /* 12px */
  --fs-sm: 0.875rem;
  /* 14px */
  --fs-md: 1rem;
  /* 16px */
  --fs-lg: 1.25rem;
  /* 20px */
  --fs-xl: 1.75rem;
  /* 28px */
  --fs-2xl: 2.25rem;
  /* 36px */
  --fs-3xl: 3rem;
  /* 48px */
  --fs-hero: 4rem;
  /* 64px */

  /* --------------------------------------------------
     SPACING SCALE
  -------------------------------------------------- */
  --space-xs: 0.5rem;
  /* 8px */
  --space-sm: 1rem;
  /* 16px */
  --space-md: 1.5rem;
  /* 24px */
  --space-lg: 2.5rem;
  /* 40px */
  --space-xl: 5rem;
  /* 80px */

  /* --------------------------------------------------
     BORDER RADIUS
  -------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --------------------------------------------------
     LAYOUT
  -------------------------------------------------- */

  --container-full-width: 1920px;
  --container-wide: 1440px;
  --conatiner-medium: 1280px;
  --container-narrow: 768px;
  --container-extra-narrow: 520px;
}

/* ========================================================
   BASE RESET (Safe for Block Themes)
======================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ========================================================
   TYPOGRAPHY
======================================================== */

:is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
}

h1 {
  font-size: var(--fs-hero);
}

h2 {
  font-size: var(--fs-3xl);
}

h3 {
  font-size: var(--fs-2xl);
}

h4 {
  font-size: var(--fs-xl);
}

h5 {
  font-size: var(--fs-lg);
}

h6 {
  font-size: var(--fs-md);
}

p {
  margin: 0 0 var(--space-sm);
}

/* ========================================================
   LINKS
======================================================== */

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* ========================================================
   MEDIA
======================================================== */

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

/* ========================================================
   ACF BLOCK HELPERS
======================================================== */
.container {
  width: 100%;
  margin: 0 auto;
}

.container-full {
  max-width: var(--container-full-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-medium {
  max-width: var(--container-medium);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-extra-narrow {
  max-width: var(--container-extra-narrow);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.visible-lg {
  display: block;
}

.visible-xs {
  display: none;
}