/* ==========================================================================
   XZB Robot Theme — base.css
   CSS Reset + Variables + Global Styles
   ========================================================================== */

/* CSS Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{font-family:var(--f-body);color:var(--c-text);background:var(--c-white);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

img{max-width:100%;height:auto;display:block}

a{text-decoration:none;color:inherit;transition:var(--tr)}

ul,ol{list-style:none}

button{cursor:pointer;border:none;background:none;font-family:inherit}

input,textarea,select{font-family:inherit;font-size:inherit}

table{border-collapse:collapse;width:100%}

/* CSS Variables — Brand Design System */
:root{
  /* Colors */
  --c-primary:#FF6B00;
  --c-primary-dark:#E55A00;
  --c-primary-light:#FF8533;
  --c-primary-alpha:rgba(255,107,0,0.1);
  --c-dark:#1A1A2E;
  --c-steel:#2D2D44;
  --c-light:#F5F5F7;
  --c-lighter:#FAFAFC;
  --c-white:#FFFFFF;
  --c-success:#00A854;
  --c-danger:#E63946;
  --c-text:#333333;
  --c-text-light:#666666;
  --c-text-lighter:#999999;
  --c-border:#E0E0E0;
  --c-border-light:#F0F0F0;

  /* Typography */
  --f-heading:'Montserrat',Arial,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'Roboto Mono',monospace;

  /* Spacing */
  --sp-section:80px;
  --sp-section-mobile:40px;
  --container-max:1280px;
  --container-pad:24px;
  --grid-gap:24px;
  --grid-gap-mobile:16px;

  /* Border Radius */
  --r-card:12px;
  --r-btn:8px;
  --r-img:12px;
  --r-pill:30px;
  --r-sm:4px;

  /* Shadows */
  --sh-sm:0 2px 8px rgba(0,0,0,0.06);
  --sh-md:0 4px 20px rgba(0,0,0,0.08);
  --sh-lg:0 8px 40px rgba(0,0,0,0.12);
  --sh-primary:0 4px 20px rgba(255,107,0,0.3);

  /* Transitions */
  --tr:0.3s ease;
  --tr-slow:0.5s ease;

  /* Z-index scale */
  --z-header:1000;
  --z-overlay:900;
  --z-modal:1100;
  --z-floating:999;
}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--f-heading);font-weight:700;line-height:1.2;color:var(--c-dark)}

h1{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
h4{font-size:1.1rem}
h5{font-size:1rem}
h6{font-size:0.9rem}

p{margin-bottom:1em}
p:last-child{margin-bottom:0}

a{color:var(--c-primary)}
a:hover{color:var(--c-primary-dark)}

strong,b{font-weight:600}

small{font-size:0.85em}

code,pre{font-family:var(--f-mono)}

/* Screen reader text */
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;word-wrap:normal !important}

/* Skip to content link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 24px;background:var(--c-primary);color:var(--c-white);font-weight:600}
.skip-link:focus{left:0}

/* Selection */
::selection{background:var(--c-primary);color:var(--c-white)}

/* Focus styles */
*:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--c-light)}
::-webkit-scrollbar-thumb{background:var(--c-primary);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--c-primary-dark)}

/* WordPress core alignment */
.alignleft{float:left;margin-right:1.5em;margin-bottom:1em}
.alignright{float:right;margin-left:1.5em;margin-bottom:1em}
.aligncenter{display:block;margin-left:auto;margin-right:auto;margin-bottom:1em}
.alignwide{max-width:calc(100% + 48px);margin-left:-24px;margin-right:-24px}

/* WordPress caption */
.wp-caption{max-width:100%}
.wp-caption-text{font-size:0.85rem;color:var(--c-text-light);text-align:center;margin-top:8px}

/* WordPress gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:1.5em 0}
.gallery-item{margin:0}
.gallery-caption{font-size:0.8rem;color:var(--c-text-light)}

/* Clearfix */
.clearfix::after{content:'';display:table;clear:both}