/*
Theme Name: SR Metals & Wires
Theme URI: https://www.srmetalsandwires.in/
Author: Dominic Pvt Ltd
Description: Elementor-ready theme for SR Metals & Wires, built to the approved "index2" concept — a full-viewport aurora hero on deep navy, sticky scrollytelling, a horizontal product rail and an accordion catalogue, in electric blue and the green taken from the logo.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: srmetals
Tags: business, custom-logo, custom-menu, featured-images, full-width-template, elementor
*/

/* ==========================================================================
   1. Design tokens — straight from the approved mockup
   ========================================================================== */

:root {
  /* Electric blue — primary */
  --sr-p-50:  #eef4ff;
  --sr-p-100: #dae6ff;
  --sr-p-200: #bcd3ff;
  --sr-p-300: #8eb6ff;
  --sr-p-400: #598eff;
  --sr-p-500: #3366ff;
  --sr-p-600: #1f47f5;
  --sr-p-700: #1a35e1;
  --sr-p-800: #1c2fb6;
  --sr-p-900: #1d2e8f;
  --sr-p-950: #101841;

  /* Green from the SR Metals & Wires logo */
  --sr-a-50:  #f4faec;
  --sr-a-100: #e6f4d5;
  --sr-a-200: #cde9af;
  --sr-a-300: #acd97f;
  --sr-a-400: #8ec957;
  --sr-a-500: #78ba42;
  --sr-a-600: #5c9530;
  --sr-a-700: #477229;
  --sr-a-800: #3b5b25;
  --sr-a-900: #334e23;
  --sr-a-950: #182a0e;

  --sr-ink: var(--sr-p-950);
  --sr-ease: cubic-bezier(.16, 1, .3, 1);

  --sr-shell: 1240px;
  --sr-gutter: 1.25rem;

  --sr-radius-sm: .75rem;
  --sr-radius:    1rem;
  --sr-radius-lg: 1.5rem;
  --sr-radius-xl: 1.75rem;
  --sr-radius-2xl: 2rem;

  --sr-shadow-card: 0 1px 2px rgba(16, 24, 65, .04), 0 8px 24px -8px rgba(16, 24, 65, .12);
  --sr-shadow-lift: 0 24px 60px -24px rgba(16, 24, 65, .35);

  --sr-nav-h: 66px;

  --sr-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sr-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Sections can run green (product ranges) or blue (company / contact). */
  --sr-accent:      var(--sr-a-500);
  --sr-accent-soft: var(--sr-a-400);
  --sr-accent-dark: var(--sr-a-600);
  --sr-accent-tint: var(--sr-a-50);
}

@media (min-width: 640px) { :root { --sr-gutter: 2rem; } }

.sr-accent-green { --sr-accent: var(--sr-a-500); --sr-accent-soft: var(--sr-a-400); --sr-accent-dark: var(--sr-a-600); --sr-accent-tint: var(--sr-a-50); }
.sr-accent-blue  { --sr-accent: var(--sr-p-500); --sr-accent-soft: var(--sr-p-400); --sr-accent-dark: var(--sr-p-700); --sr-accent-tint: var(--sr-p-50); }

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--sr-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sr-ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px)  { body { font-size: 14.5px; } }
@media (min-width: 1200px) { body { font-size: 15px; } }

/* Headings take the display face. */
h1, h2, h3, h4, h5, h6 { font-family: var(--sr-display); font-weight: 600; }

img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; display: block; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--sr-ink); }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--sr-a-400); color: var(--sr-p-950); }

:focus-visible { outline: 3px solid var(--sr-a-500); outline-offset: 2px; border-radius: 4px; }

.sr-sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 999;
  background: var(--sr-p-950);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--sr-radius-sm) var(--sr-radius-sm);
  font-weight: 700;
}
.sr-skip-link:focus { top: 0; }

/* ==========================================================================
   3. Typography
   ========================================================================== */

/* Display type: 700 is the ceiling, not the default — the previous 800 read as
   shouting. Every size scales from a small mobile floor rather than sitting at
   desktop proportions on a 375px screen. */
.sr-disp {
  font-family: var(--sr-display);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
}

.sr-h-hero { font-size: clamp(2rem, 6.5vw, 4.75rem); line-height: 1.05; }
.sr-h-lg   { font-size: clamp(1.35rem, 3.6vw, 2.5rem); }
.sr-h-md   { font-size: clamp(1.15rem, 2.4vw, 1.75rem); }

/* Second lines are set in <em> — the accent colour, never italic. */
.sr-disp em, h1 em, h2 em, h3 em { font-style: normal; color: var(--sr-accent-dark); }
.sr-hero em,
.sr-pagehead em,
.sr-section--dark .sr-disp em,
.sr-section--dark h2 em,
.sr-slide em,
.sr-band em { color: var(--sr-accent-soft); }

.sr-eyebrow {
  font-family: var(--sr-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sr-accent-dark);
}
@media (min-width: 640px) { .sr-eyebrow { font-size: .72rem; } }
.sr-section--dark .sr-eyebrow,
.sr-hero .sr-eyebrow,
.sr-band .sr-eyebrow { color: var(--sr-accent-soft); }

.sr-lead { font-size: 1rem; font-weight: 400; line-height: 1.75; color: rgba(16, 24, 65, .58); }
@media (min-width: 768px) { .sr-lead { font-size: 1.0625rem; } }
.sr-section--dark .sr-lead { color: rgba(255, 255, 255, .58); }

.sr-tnum { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. Layout
   ========================================================================== */

.sr-shell {
  width: 100%;
  max-width: var(--sr-shell);
  margin-inline: auto;
  padding-inline: var(--sr-gutter);
}
.sr-shell--narrow { max-width: 1080px; }

.sr-section { padding-block: clamp(2rem, 5vw, 4.5rem); }
.sr-section--tight { padding-block: clamp(1.25rem, 3vw, 2.5rem); }

.sr-section--soft { background: rgba(238, 244, 255, .6); }
.sr-section--dark {
  background: var(--sr-p-950);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sr-section--dark h1, .sr-section--dark h2,
.sr-section--dark h3, .sr-section--dark h4 { color: #fff; }

/* Section heading block */
.sr-head { max-width: 42rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .sr-head { margin-bottom: 2rem; } }
.sr-head .sr-eyebrow { display: block; margin-bottom: .6rem; }
.sr-head p { margin-top: .75rem; }
.sr-head--center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   5. Grain + aurora — the atmosphere of the approved concept
   ========================================================================== */

.sr-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

/* Over a photograph the grain is dialled back so the image still reads. */
.sr-has-photo.sr-grain::after { opacity: .12; mix-blend-mode: soft-light; }

@keyframes sr-aurora {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(6%, -8%) scale(1.14); }
  50%      { transform: translate(-7%, 5%) scale(.92); }
  75%      { transform: translate(4%, 7%) scale(1.07); }
}

.sr-aur {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.sr-aur--1 { animation: sr-aurora 20s ease-in-out infinite; }
.sr-aur--2 { animation: sr-aurora 26s ease-in-out infinite reverse; }
.sr-aur--3 { animation: sr-aurora 32s ease-in-out infinite; }

/* Hero blobs, in the mockup's positions. */
.sr-aur--h1 { width: min(72vw, 720px); aspect-ratio: 1; background: rgba(31, 71, 245, .5);  top: -14rem; left: -10rem; }
.sr-aur--h2 { width: min(60vw, 600px); aspect-ratio: 1; background: rgba(120, 186, 66, .32); top: 33%;    right: -10rem; }
.sr-aur--h3 { width: min(52vw, 520px); aspect-ratio: 1; background: rgba(51, 102, 255, .35); bottom: -13rem; left: 33%; }

/* Panel blobs, sized against the section so a short band gets a wash. */
.sr-aur--p1 { width: min(48vw, 620px); aspect-ratio: 1; background: rgba(31, 71, 245, .3);  top: -35%; right: -5%; }
.sr-aur--p2 { width: min(36vw, 480px); aspect-ratio: 1; background: rgba(120, 186, 66, .18); bottom: -45%; left: -7%; filter: blur(110px); }

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.sr-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sr-display);
  font-weight: 600;
  font-size: .84rem;
  padding: .65rem 1.15rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: background-color .35s var(--sr-ease), color .35s var(--sr-ease),
              transform .35s var(--sr-ease), border-color .35s var(--sr-ease),
              box-shadow .35s var(--sr-ease);
  white-space: nowrap;
  line-height: 1.2;
}
.sr-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 24px -10px rgba(16, 24, 65, 0.35);
}
.sr-btn svg { width: 1.05em; height: 1.05em; flex: none; }

.sr-btn--accent { background: var(--sr-accent); color: #fff; }
.sr-btn--accent:hover { background: var(--sr-accent-dark); color: #fff; }

.sr-btn--light { background: #fff; color: var(--sr-p-950); }
.sr-btn--light:hover { background: var(--sr-a-400); color: var(--sr-p-950); }

.sr-btn--dark { background: var(--sr-p-950); color: #fff; }
.sr-btn--dark:hover { background: var(--sr-p-800); color: #fff; }

.sr-btn--ghost { border-color: rgba(255, 255, 255, .25); color: #fff; }
.sr-btn--ghost:hover { background: rgba(255, 255, 255, .1); }

.sr-btn--outline { border-color: rgba(16, 24, 65, .18); color: var(--sr-ink); }
.sr-btn--outline:hover { border-color: var(--sr-p-950); background: var(--sr-p-50); }

/* On a dark panel the dark and outline variants would vanish. */
.sr-section--dark .sr-btn--dark,
.sr-hero:not(.sr-hero--light) .sr-btn--dark,
.sr-band .sr-btn--dark { background: #fff; color: var(--sr-p-950); }
.sr-section--dark .sr-btn--dark:hover,
.sr-hero:not(.sr-hero--light) .sr-btn--dark:hover,
.sr-band .sr-btn--dark:hover { background: var(--sr-a-400); }
.sr-section--dark .sr-btn--outline,
.sr-hero:not(.sr-hero--light) .sr-btn--outline,
.sr-band .sr-btn--outline { border-color: rgba(255, 255, 255, .25); color: #fff; }
.sr-section--dark .sr-btn--outline:hover,
.sr-hero:not(.sr-hero--light) .sr-btn--outline:hover,
.sr-band .sr-btn--outline:hover { background: rgba(255, 255, 255, .1); }

.sr-btn--lg { padding: .9rem 1.5rem; font-size: .92rem; }
@media (min-width: 768px) { .sr-btn--lg { padding: 1rem 1.75rem; font-size: 1rem; } }
.sr-btn--sm { padding: .6rem 1.05rem; font-size: .82rem; }
.sr-btn--block { display: flex; justify-content: center; width: 100%; }

.sr-arrow { transition: transform .4s var(--sr-ease); }
.sr-btn:hover .sr-arrow,
.sr-group:hover .sr-arrow { transform: translateX(5px); }

/* ==========================================================================
   7. Pills, badges, chips
   ========================================================================== */

.sr-pill {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: .375rem 1rem .375rem .5rem;
}

.sr-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .625rem;
  border-radius: 9999px;
  background: var(--sr-accent);
  color: #fff;
}
.sr-badge--blue { background: var(--sr-p-500); }
.sr-badge--deep { background: var(--sr-a-600); }
.sr-badge--solid { background: rgba(16, 24, 65, .75); backdrop-filter: blur(6px); }

.sr-chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  background: #fff;
  padding: .25rem .625rem;
  border-radius: 9999px;
}

.sr-tag {
  font-size: .7rem;
  font-weight: 700;
  background: var(--sr-p-50);
  color: var(--sr-p-700);
  padding: .18rem .55rem;
  border-radius: 6px;
}
.sr-tag--accent { background: var(--sr-a-100); color: var(--sr-a-700); }

/* ==========================================================================
   8. Motion
   ========================================================================== */

.js .sr-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--sr-ease), transform .9s var(--sr-ease);
  transition-delay: var(--sr-d, 0ms);
}
.js .sr-reveal.is-in { opacity: 1; transform: none; }

.js .sr-rise > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--sr-ease), transform .8s var(--sr-ease);
}
.js .sr-rise.is-in > * { opacity: 1; transform: none; }
.js .sr-rise.is-in > *:nth-child(2) { transition-delay: 90ms; }
.js .sr-rise.is-in > *:nth-child(3) { transition-delay: 180ms; }
.js .sr-rise.is-in > *:nth-child(4) { transition-delay: 270ms; }
.js .sr-rise.is-in > *:nth-child(5) { transition-delay: 360ms; }
.js .sr-rise.is-in > *:nth-child(6) { transition-delay: 450ms; }

.sr-lift { transition: transform .55s var(--sr-ease), box-shadow .55s var(--sr-ease), border-color .4s; }
.sr-lift:hover { transform: translateY(-8px); }

.sr-zoom img { transition: transform .9s var(--sr-ease); }
.sr-zoom:hover img { transform: scale(1.08); }

.elementor-editor-active .sr-reveal,
.elementor-editor-active .sr-rise > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .sr-reveal, .js .sr-rise > * { opacity: 1 !important; transform: none !important; }
  .sr-aur { animation: none !important; }
  .sr-zoom:hover img { transform: none; }
}

/* ==========================================================================
   9. WordPress content
   ========================================================================== */

.sr-prose { max-width: 72ch; }
.sr-prose > * + * { margin-top: 1.25rem; }
.sr-prose h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin-top: 2.5rem; }
.sr-prose h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin-top: 2rem; }
.sr-prose p, .sr-prose li { color: rgba(16, 24, 65, .68); line-height: 1.75; }
.sr-prose ul, .sr-prose ol { padding-left: 1.25rem; }
.sr-prose li + li { margin-top: .5rem; }
.sr-prose ul { list-style: disc; }
.sr-prose ol { list-style: decimal; }
.sr-prose a { color: var(--sr-p-600); text-decoration: underline; text-underline-offset: 3px; }
.sr-prose a:hover { color: var(--sr-a-600); }
.sr-prose img { border-radius: var(--sr-radius-lg); }
.sr-prose blockquote { border-left: 3px solid var(--sr-a-500); padding-left: 1.25rem; font-size: 1.125rem; color: rgba(16, 24, 65, .75); }
.sr-prose table { font-size: .95rem; }
.sr-prose th, .sr-prose td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid rgba(16, 24, 65, .08); }
.sr-prose th { font-weight: 700; }

.alignleft  { float: left;  margin: 0 1.5rem 1.25rem 0; }
.alignright { float: right; margin: 0 0 1.25rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption-text, .wp-element-caption { font-size: .82rem; color: rgba(16, 24, 65, .45); margin-top: .5rem; }