/*
  Theme Name: North East Photograp
  Theme URI: https://{{north-east-photograp}}.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: north-east-photograp
  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: 'Acumin Pro';
    src: url('assets/fonts/AcuminPro-Bold.woff2') format('woff2'),
      url('assets/fonts/AcuminPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Acumin Pro';
    src: url('assets/fonts/AcuminPro-Semibold.woff2') format('woff2'),
      url('assets/fonts/AcuminPro-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

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

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

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


  :root {

    /* --------------------------------------------------
     COLORS
  -------------------------------------------------- */
    --color-primary: #000000;
    --color-accent: #6a6a6a;
    --color-white: #ffffff;
    --color-light-grey: #f3f3f3;
    --color-grey: #666666;

    /* --------------------------------------------------
     FONT FAMILIES
  -------------------------------------------------- */
    --font-family-heading: "Acumin Pro", sans-serif;
    --font-family-body: "Poppins", Arial, sans-serif;

    /* --------------------------------------------------
   FONT SIZES (Fluid-ready scale)
-------------------------------------------------- */
    /* 12px */
    --fs-xs: 0.75rem;
    /* 14px */
    --fs-sm: 0.875rem;
    /* 16px */
    --fs-md: 1rem;

    /* 24px -> 28px */
    --fs-lg: clamp(1.5rem, 1.412rem + 0.376vw, 1.75rem);
    /* 30px -> 36px */
    --fs-xl: clamp(1.875rem, 1.743rem + 0.563vw, 2.25rem);
    /* 34px -> 42px */
    --fs-2xl: clamp(2.125rem, 1.949rem + 0.751vw, 2.625rem);
    /* 44px -> 56px */
    --fs-3xl: clamp(2.75rem, 2.486rem + 1.127vw, 3.5rem);
    /* 60px -> 84px */
    --fs-hero: clamp(3.75rem, 3.222rem + 2.254vw, 5.25rem);


    /* --------------------------------------------------
     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;

    /* Spacings     */
    --d-space-100: 100px;
    --d-space-50: 50px;
    --d-space-60: 60px;
    --d-space-30: 30px;
    --d-gap-40: 40px;
    --d-gap-50: 50px;
    --d-gap-60: 60px;

    /* Sizes */
    --radius-xs: 2px;
    --radius-l: 0.625rem;
    --radius-xl: 0.75rem;
    --radius-xxl: 12.5rem;
    --radius-8: 0.5rem;
    --radius-16: 1rem;
    --radius-24: 1.5rem;
    --radius-20: 1.25rem;
    --radius-30: 1.875rem;
    --radius-40: 2.5rem;
    --radius-60: 3.75rem;
    --radius-100: 6.25rem;
    --radius-200: 12.5rem;

    --page-size: 1200px;
    --page-size-narrow: 700px;
    --page-size-wide: 1440px;
    --page-size-extra-narrow: 520px;
    --narrow-medium: 770px;
    --narrow-large: 820px;
    --narrow-wide: 900px;
  }

  /* ========================================================
   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.4;
    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%;
  }


  .is-layout-constrained>.alignwide {
    /* max-width: var(--wp--style--global--wide-size) !important; */
  }

  footer.site-footer.wp-block-template-part {
    margin-block-start: 0;
  }

  .wp-block-buttons>.wp-block-button {
    min-width: 290px;
  }

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

  .hidden {
    display: none;
  }