/*
 Theme Name:   Yaskawa Custom Css
 Description:  Yaskawa Stylesheet
 Author:       Yaskawa
 Version:      1.0
*/

/* ============================================================
   CSS VARIABLES — TYPOGRAPHY
   Figma source: Text Sizes (1rem = 10px, px / 10 = rem)
   ============================================================ */
:root {
    --font-heading: "Roboto", sans-serif;
    --font-body: "Roboto", sans-serif;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-heading-sm: 1.2;
    --lh-heading-md: 1.3;
    --lh-heading-lg: 1.4;
    --lh-body: 1.5;

    --ls-heading: -0.1rem;
    --ls-body: 0;

    /* ── Desktop font sizes ──────────────────────────────────── */
   /* H1 — 40px → 56px */
    --fs-h1: clamp(4rem, 3.467rem + 1.481vw, 5.6rem);
    
    /* H2 — 36px → 48px */
    --fs-h2: clamp(3.6rem, 3.2rem + 1.111vw, 4.8rem);
    
    /* H3 — 32px → 40px */
    --fs-h3: clamp(3.2rem, 2.933rem + 0.741vw, 4rem);
    
    /* H4 — 24px → 32px */
    --fs-h4: clamp(2.4rem, 2.133rem + 0.741vw, 3.2rem);
    
    /* H5 — 20px → 24px */
    --fs-h5: clamp(2rem, 1.867rem + 0.370vw, 2.4rem);
    
    /* H6 — 18px → 20px */
    --fs-h6: clamp(1.8rem, 1.733rem + 0.185vw, 2rem);
    --fs-tagline: 1.6rem;

    /* Body text (no mobile variant in design) */
    --fs-text-lg: 2.0rem;
    --fs-text-md: 1.8rem;
    --fs-text-rg: 1.6rem;
    --fs-text-sm: 1.4rem;
    --fs-text-xs: 1.2rem;

    /* ============================================================
     PRIMITIVE COLORS
     ============================================================ */

    /* — White — */
    --color-white: #ffffff;
    --color-text: #111112;

    /* — Neutral — */
    --color-neutral-lightest: #f2f2f2;
    --color-neutral-lighter: #d9d9d9;
    --color-neutral-light: #b3b4b4;
    --color-neutral: #808283;
    --color-neutral-dark: #4d5052;
    --color-neutral-darker: #1b1e20;
    --color-neutral-darkest: #020508;

    /* — Cerulean Blue — */
    --color-cerulean-blue-lightest: #e9eef6;
    --color-cerulean-blue-lighter: #d3deed;
    --color-cerulean-blue-light: #658bc2;
    --color-cerulean-blue: #245aa9;
    --color-cerulean-blue-dark: #1c4887;
    --color-cerulean-blue-darker: #0e2443;
    --color-cerulean-blue-darkest: #0a1b32;

    /* — Cerulean — */
    --color-cerulean-lightest: #e5f7fb;
    --color-cerulean-lighter: #ccf0f8;
    --color-cerulean-light: #4ccbe7;
    --color-cerulean: #00b5dd;
    --color-cerulean-dark: #0090b0;
    --color-cerulean-darker: #004858;
    --color-cerulean-darkest: #003642;

    /* — Opacity token — */
    --color-neutral-darkest-15: rgba(2, 5, 8, 0.15);
    
    /* ============================================================
     RADIUS
     Large  → 1–2 col elements   | Medium → 2–3 col | Small → <4 col
     ============================================================ */
    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.6rem;
    --radius-full: 9999px;

    /* ============================================================
     SHADOWS
     ============================================================ */
    --shadow-xxs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    --shadow-xs: 0px 1px 3px 0px rgba(0, 0, 0, 0.10),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0px 4px 8px -2px rgba(0, 0, 0, 0.10),
    0px 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0px 12px 16px -4px rgba(0, 0, 0, 0.08),
    0px 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0px 20px 24px -4px rgba(0, 0, 0, 0.08),
    0px 8px 8px -4px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
    --shadow-xxl: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);
  /* ============================================================
     SPACING
     ============================================================ */
    --section-py: 8rem;
    --section-px: 2rem;
    /* ============================================================
     COLOR SCHEMES  (semantic layer — reference primitives above)
     Usage: apply a [data-scheme="1|2|3"] on any section wrapper
     ============================================================ */

    /* Scheme 1 — Light / White */
    --scheme-1-text: var(--color-neutral-darkest);
    --scheme-1-bg: var(--color-white);
    --scheme-1-foreground: var(--color-neutral-lightest);
    --scheme-1-border: var(--color-neutral-darkest-15);
    --scheme-1-accent: var(--color-cerulean-blue);

    /* Scheme 2 — Cerulean Blue tinted */
    --scheme-2-text: var(--color-neutral-darkest);
    --scheme-2-bg: var(--color-cerulean-blue-lightest);
    --scheme-2-foreground: var(--color-cerulean-blue-lighter);
    --scheme-2-border: var(--color-neutral-darkest-15);
    --scheme-2-accent: var(--color-cerulean-blue);

    /* Scheme 3 — Neutral / Light grey */
    --scheme-3-text: var(--color-neutral-darkest);
    --scheme-3-bg: var(--color-neutral-lightest);
    --scheme-3-foreground: var(--color-white);
    --scheme-3-border: var(--color-neutral-darkest-15);
    --scheme-3-accent: var(--color-cerulean-blue);
}

/* ── Color scheme scoping helpers ────────────────────────── */
[data-scheme="1"] {
    --scheme-text: var(--scheme-1-text);
    --scheme-bg: var(--scheme-1-bg);
    --scheme-foreground: var(--scheme-1-foreground);
    --scheme-border: var(--scheme-1-border);
    --scheme-accent: var(--scheme-1-accent);
    background-color: var(--scheme-bg);
    color: var(--scheme-text);
}

[data-scheme="2"] {
    --scheme-text: var(--scheme-2-text);
    --scheme-bg: var(--scheme-2-bg);
    --scheme-foreground: var(--scheme-2-foreground);
    --scheme-border: var(--scheme-2-border);
    --scheme-accent: var(--scheme-2-accent);
    background-color: var(--scheme-bg);
    color: var(--scheme-text);
}

[data-scheme="3"] {
    --scheme-text: var(--scheme-3-text);
    --scheme-bg: var(--scheme-3-bg);
    --scheme-foreground: var(--scheme-3-foreground);
    --scheme-border: var(--scheme-3-border);
    --scheme-accent: var(--scheme-3-accent);
    background-color: var(--scheme-bg);
    color: var(--scheme-text);
}


/* ============================================================
   BASE RESET & BODY
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* 1rem = 10px */
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-text-rg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
	scroll-behavior: smooth;
}

blockquote {
	font-family: var(--font-body);
}

/* ============================================================
   HEADING STYLES
   ============================================================ */
h1,
.h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading-sm);
    letter-spacing: var(--ls-heading);
    font-weight: var(--fw-regular);
    margin: 0;
}

h2,
.h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading-sm);
    letter-spacing: var(--ls-heading);
    font-weight: var(--fw-regular);
    margin: 0;
}

h3,
.h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading-sm);
    letter-spacing: var(--ls-heading);
    font-weight: var(--fw-regular);
    margin: 0;
}

h4,
.h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-heading-md);
    letter-spacing: var(--ls-heading);
    font-weight: var(--fw-regular);
    margin: 0;
}

h5,
.h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-heading-lg);
    /*letter-spacing: var(--ls-heading);*/
    font-weight: var(--fw-regular);
    margin: 0;
}

h6,
.h6 {
    font-size: var(--fs-h6);
    line-height: var(--lh-heading-lg);
    /*letter-spacing: var(--ls-heading);*/
    font-weight: var(--fw-regular);
    margin: 0;
}

.tagline {
    font-family: var(--font-heading);
    font-size: var(--fs-tagline);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}


/* ============================================================
   BODY TEXT UTILITIES
   Usage: combine a size class (.text-lg) + weight modifier (.bold)
   ============================================================ */

/* — Size classes — */
.text-lg {
    font-size: var(--fs-text-lg);
    line-height: var(--lh-body);
}

.text-md {
    font-size: var(--fs-text-md);
    line-height: var(--lh-body);
}

.text-rg {
    font-size: var(--fs-text-rg);
    line-height: var(--lh-body);
}

.text-sm {
    font-size: var(--fs-text-sm);
    line-height: var(--lh-body);
}

.text-xs {
    font-size: var(--fs-text-xs);
    line-height: var(--lh-body);
}

/* — Weight modifiers — */
.light {
    font-weight: var(--fw-light);
}

.regular {
    font-weight: var(--fw-regular);
}

.medium {
    font-weight: var(--fw-medium);
}

.semi-bold {
    font-weight: var(--fw-semibold);
}

.bold {
    font-weight: var(--fw-bold);
}

.extra-bold {
    font-weight: var(--fw-extrabold);
}
/* — Radius modifiers — */
.radius-sm{
    border-radius: var(--radius-sm);
}
.radius-md{
    border-radius: var(--radius-md);
}
.radius-lg{
    border-radius: var(--radius-lg);
}
.radius-full{
    border-radius: var(--radius-full);
}
/* — Shadow modifiers — */
.shadow-xxs{
    box-shadow: var(--shadow-xxs);
}
.shadow-xs {
    box-shadow: var(--shadow-xs);
}
.shadow-sm {
    box-shadow: var(--shadow-sm);
}
.shadow-md {
    box-shadow: var(--shadow-md);
}
.shadow-lg {
    box-shadow: var(--shadow-lg);
}
.shadow-xl {
    box-shadow: var(--shadow-xl);
}
.shadow-xxl {
    box-shadow: var(--shadow-xxl);
}
/*Line clamp*/
.line-clamp-1,
.line-clamp-2,
.line-clamp-3{
    display: -webkit-box !important;
    -webkit-box-orient: block-axis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.line-clamp-1{
     -webkit-line-clamp: 1;
}
.line-clamp-2{
     -webkit-line-clamp: 2;
}
.line-clamp-3{
     -webkit-line-clamp: 3;
}

/* ============================================================
  COMPONENTS UTILITIES
   ============================================================ */
.yaskawavn-breadcrumb{
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
align-items: center;
column-gap: 1.6rem;
row-gap: 0.8rem;
flex-wrap: wrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.yaskawavn-breadcrumb::-webkit-scrollbar {
display: none; 
}
   
.yaskawavn-breadcrumb > li:not(.yaskawavn-sep-item){
       color: var(--color-cerulean-blue);
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 32px;
transition: 0.2s all ease-in-out;
white-space: no-wrap;
   }
.yaskawavn-breadcrumb > li:not(.yaskawavn-sep-item):not(.yaskawavn-current):hover{
    text-decoration: underline;
}
   
.yaskawavn-breadcrumb > li.yaskawavn-sep-item{
color: #BCBDBC;
width: 24px;
height: 24px;
}
.yaskawavn-breadcrumb > li.yaskawavn-current{
    color: #616365;
font-weight: 500;
}