/*
Theme Name:  TechLeader Portfolio
Theme URI:   https://balakrishnakaranam.com
Author:      Balakrishna Karanam
Description: Professional portfolio — Lead Cloud & DevOps Architect. Elementor-compatible.
Version:     6.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techleader-portfolio
Tags: portfolio, one-page, elementor, technology, professional
*/

/* ══ SELF-HOSTED FONTS ══════════════════════════════════════════════════
   Inter and JetBrains Mono are served from this theme, not from Google.

   This is the real fix for "the font changes when I refresh". Loading from
   fonts.googleapis.com is a two-hop fetch (a CSS file, then the woff2 it
   points at) across a third-party origin, so on any given page load the
   font may or may not arrive before first paint. Whichever way it lands,
   the reader sees either Arial-then-Inter (a visible swap) or Arial for the
   whole visit — and it differs between refreshes depending on cache state.
   No font-display value fixes that, because the problem is the network, not
   the swap policy.

   Served from the same origin, the file is a ~48KB same-connection fetch
   with no DNS/TLS handshake to a third party, so it is there in time on
   essentially every load. font-display:block then guarantees the text is
   painted in Inter the first time it is painted — never Arial first.

   Both are VARIABLE fonts: one file covers the entire 100-900 weight range,
   so bold/semibold/extrabold all come from the same request. Nothing is
   synthesised, which is what made bold text look different from regular
   during the fallback period.

   These files must ship with the theme to MilesWeb — they are part of the
   design, not an optimisation. */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrainsmono-latin-var.woff2') format('woff2-variations'),
       url('assets/fonts/jetbrainsmono-latin-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: block;
}

/* Metric-matched fallback, kept as a safety net for the brief moment before
   the local file is parsed and for the rare case it fails to load. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.64%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

:root {
  --bg-hero:      #0B2545;
  --bg-white:     #ffffff;
  --bg-light:     #F8FAFC;
  --bg-light-2:   #F1F0EC;
  --bg-teal-band: linear-gradient(135deg,#0B2545 0%,#173A66 100%);
  --bg-gradient:  linear-gradient(150deg,#F8F6F1 0%,#F1EDE4 100%);
  --bg-dark:      #0B2545;
  --bg-dark-2:    #12305A;

  --surface:      rgba(255,255,255,0.05);
  --surface-2:    rgba(255,255,255,0.08);
  --border-dark:  rgba(255,255,255,0.09);
  --border-dark2: rgba(255,255,255,0.15);
  --border-light: #E2E8F0;
  --border-light2:#CBD5E1;

  --tl-teal:        #C5A059;
  --tl-teal-light:  #DBBD82;
  --tl-teal-dark:   #A8843F;
  --tl-indigo:      #5B6472;
  --tl-indigo-light:#8A93A3;
  --tl-orange:      #C5A059;
  --tl-orange-light:#DBBD82;
  --tl-amber:       #C5A059;
  --tl-green:       #2F6844;
  --tl-red:         #A13D3D;

  --text-white:   #F5F4F0;
  --text-muted-d: #A9AEB8;
  --text-dim-d:   #7B8394;
  --text-dark:    #333333;
  --text-body:    #3A3A3A;
  --text-muted-l: #6B7280;

  --font-sans:    'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --ease:         cubic-bezier(0.4,0,0.2,1);

  --tl-bg:           var(--bg-hero);
  --tl-surface:      var(--surface);
  --tl-border:       var(--border-dark);
  --tl-text:         var(--text-white);
  --tl-text-muted:   var(--text-muted-d);
  --tl-font-sans:    var(--font-sans);
  --tl-font-display: var(--font-display);
  --tl-font-mono:    var(--font-mono);
  --tl-radius-full:  9999px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;font-size:16px;-webkit-text-size-adjust:100%}
/* Note: `text-rendering:optimizeLegibility` is deliberately NOT set. It forces
   the engine to load and apply the full kerning/ligature tables before it can
   lay text out, which delays first paint and can re-flow headings once the
   table arrives. `font-feature-settings` below gets the ligatures we actually
   want without that cost. */
body{font-family:var(--font-sans);font-weight:400;background:#fff;color:var(--text-body);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga" 1,"calt" 1;font-synthesis:none}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
/* Honour reduced-motion globally */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
button{cursor:pointer;border:none;background:none;font:inherit}
input,textarea,select{font:inherit;outline:none}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#fff}
::-webkit-scrollbar-thumb{background:var(--tl-teal-dark);border-radius:2px}
/* Branded text selection */
::selection{background:rgba(197,160,89,0.2);color:var(--text-dark)}

/* Skip link — visible only when focused via keyboard */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--tl-teal-dark);color:#fff;padding:0.6rem 1.1rem;border-radius:0 0 8px 0;font-size:0.85rem;font-weight:600}
.skip-link:focus{left:0}

.tl-container{width:100%;max-width:1160px;margin-inline:auto;padding-inline:2rem}

/* Section backgrounds */
.section-hero     {background:var(--bg-hero);     padding:6.5rem 0}
.section-dark     {background:var(--bg-dark);     padding:5.5rem 0}
.section-dark-2   {background:var(--bg-dark-2);   padding:5.5rem 0}
.section-white    {background:#fff;               padding:5.5rem 0}
.section-light    {background:var(--bg-light);    padding:5.5rem 0}
.section-light-2  {background:var(--bg-light-2);  padding:5.5rem 0}
.section-gradient {background:var(--bg-gradient); padding:5.5rem 0}
.section-teal-band{background:var(--bg-teal-band);padding:3rem 0}

/* Typography */
/* .h-section-dark / .h-section-light used to be declared here too, with a
   DIFFERENT font-weight (600 vs 800) and a DIFFERENT vw multiplier (2.8 vs
   3.2) than the real definition in main.css. main.css loads after this file
   and wins in the steady state, so it looked harmless — but it meant every
   section heading on the page (Professional Experience, Credentials, Core
   Competencies...) had two conflicting sizes on record, one lighter and
   smaller than the other. Any timing gap between this stylesheet applying
   and main.css finishing would show the wrong weight/size first and then
   snap — which reads exactly as "the font size changes on refresh". Removed
   entirely; main.css is the single source of truth for these two classes now. */

.label-teal  {font-family:var(--font-mono);font-size:0.68rem;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:var(--tl-teal)}
.label-indigo{font-family:var(--font-mono);font-size:0.68rem;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:var(--tl-indigo)}
.label-orange{font-family:var(--font-mono);font-size:0.68rem;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:var(--tl-orange)}

.body-dark {font-size:0.9rem;font-weight:400;color:var(--text-muted-d);line-height:1.75}
.body-light{font-size:0.9rem;font-weight:400;color:var(--text-body);   line-height:1.75}

.section-hdr      {text-align:center;margin-bottom:2.5rem}
.section-hdr .label{display:block;margin-bottom:0.5rem}
.section-hdr p    {margin-top:0.625rem;max-width:520px;margin-inline:auto;color:var(--text-muted-l);font-size:0.9rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.575rem 1.25rem;border-radius:7px;font-size:0.85rem;font-weight:500;border:1.5px solid transparent;transition:all 0.2s var(--ease);cursor:pointer;white-space:nowrap;line-height:1}
.btn-primary{background:var(--tl-teal);color:#fff;border-color:var(--tl-teal)}
.btn-primary:hover{background:var(--tl-teal-light);border-color:var(--tl-teal-light);box-shadow:0 0 18px rgba(197,160,89,0.28);transform:translateY(-1px)}
.btn-orange{background:var(--tl-orange);color:#fff;border-color:var(--tl-orange)}
.btn-orange:hover{background:var(--tl-orange-light);transform:translateY(-1px);box-shadow:0 0 18px rgba(197,160,89,0.25)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,0.3)}
.btn-outline-white:hover{border-color:rgba(255,255,255,0.65);background:rgba(255,255,255,0.08)}
.btn-outline-dark{background:transparent;color:var(--text-dark);border-color:var(--border-light2)}
.btn-outline-dark:hover{border-color:var(--tl-teal);color:var(--tl-teal-dark)}
.btn-ghost-white{background:rgba(255,255,255,0.09);color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.16)}
.btn-ghost-white:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.28)}
.btn-full{width:100%;justify-content:center}

.btn .btn-text{display:inline}
.btn .btn-spin{display:none;align-items:center;gap:0.4rem}
.btn.loading .btn-text{display:none}
.btn.loading .btn-spin{display:flex}
.spin{animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Tags */
.tag{display:inline-flex;align-items:center;padding:0.15rem 0.55rem;border-radius:99px;font-size:0.68rem;font-weight:500}
.tag-dark  {background:rgba(255,255,255,0.07);color:var(--text-muted-d);border:1px solid rgba(255,255,255,0.1)}
.tag-light {background:rgba(197,160,89,0.09); color:var(--tl-teal-dark);border:1px solid rgba(197,160,89,0.2)}
.tag-teal  {background:rgba(197,160,89,0.1);  color:var(--tl-teal-dark);border:1px solid rgba(197,160,89,0.25)}
.tag-indigo{background:rgba(91,100,114,0.1);  color:var(--tl-indigo);   border:1px solid rgba(91,100,114,0.2)}

/* Animations — short travel, decelerating curve, never a scale on text.
   main.css refines these further; kept in sync so there is no flash of a
   different starting transform before main.css applies. */
[data-anim]{opacity:0;transform:translateY(14px);transition:opacity 0.55s var(--ease),transform 0.55s var(--ease)}
[data-anim="left"] {transform:translateX(-14px)}
[data-anim="right"]{transform:translateY(14px)}
[data-anim].visible{opacity:1;transform:none}

@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(197,160,89,0.4)}50%{box-shadow:0 0 0 7px rgba(197,160,89,0)}}
@keyframes bounce-arrow{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* FAB */
.fab-whatsapp{position:fixed;bottom:4.75rem;right:1.25rem;z-index:99;width:46px;height:46px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(37,211,102,0.32);transition:transform 0.2s}
.fab-whatsapp:hover{transform:scale(1.08)}
.tl-back-to-top{position:fixed;bottom:1rem;right:1.25rem;z-index:99;width:38px;height:38px;border-radius:8px;background:var(--tl-teal);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(197,160,89,0.25);opacity:0;visibility:hidden;transform:translateY(6px);transition:all 0.25s;border:none;cursor:pointer}
.tl-back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.tl-back-to-top:hover{background:var(--tl-teal-light)}