/*
  Theme Name: Startup Theme
  Theme URI: https://codepixelzmedia.com/
  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: startup-theme
  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
======================================================== */

  @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-light-grey: #f3f3f3;
    --color-grey: #666666;

    /* --------------------------------------------------
     FONT FAMILIES
  -------------------------------------------------- */
    --font-family-heading: "Urbanist", sans-serif;
    --font-family-body: "Helvetica", Arial, 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;
  }

  a:hover {
    opacity: 0.8;
  }


  /* ========================================================
   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);
  }