/* ==========================================================================
   Custom theme layer — brand color, light/dark mode, navbar, polish
   Loaded after style.css so these rules win the cascade.
   ========================================================================== */

/* ---- Cross-page transitions: this is a classic multi-page Laravel app
   (full navigation between /, /blog/{post}, /work/{project}, not an SPA),
   so "animate between pages" means the native Cross-Document View
   Transitions API — one CSS opt-in, no JS/router needed. Chromium 126+
   crossfades old/new page snapshots on same-origin navigation; every
   other browser just ignores the unknown at-rule and navigates normally,
   so this is a pure progressive enhancement. Reduced-motion is handled
   below by killing the pseudo-element animations, not by conditioning
   the opt-in itself, since @view-transition inside @media has spottier
   engine support than the animation override does. ---- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: fh5co-vt-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-new(root) {
  animation: fh5co-vt-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fh5co-vt-out {
  to { opacity: 0; transform: scale(0.985); }
}
@keyframes fh5co-vt-in {
  from { opacity: 0; transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

:root {
  --color-primary: rgba(255, 144, 0, 0.9);
  --color-primary-solid: #FF9000;
  --color-primary-dark: #d97b00;
  --color-primary-soft: rgba(255, 144, 0, 0.12);

  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: #262626;
  --text-muted: #6d6d6d;
  --border: #e9e9ec;
  --shadow: 0 10px 30px rgba(20, 20, 25, 0.08);
  --navbar-bg: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] {
  --bg: #12151a;
  --bg-alt: #171b21;
  --surface: #1b2027;
  --surface-raised: #20262e;
  --text: #edeef1;
  --text-muted: #9aa1ac;
  --border: #2a303a;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --navbar-bg: rgba(18, 21, 26, 0.85);
}

html, body {
  background: var(--bg);
}

body {
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Social icon color: config/social.php's 'icon_color' sets
   --social-icon-color inline on the <ul> (see social-icons.blade.php).
   When it's not set, var()'s 2nd argument falls back to each section's
   original color, so the two contexts (header vs about badge) keep
   their own default look until someone opts into a custom color. */
#fh5co-header .display-tc .fh5co-social-icons li a,
.fh5co-cover .display-tc .fh5co-social-icons li a {
  color: var(--social-icon-color, #fff);
}
.fh5co-social-icons li a {
  color: var(--social-icon-color, #FF9000);
}
#fh5co-about .fh5co-social-icons li a {
  color: var(--social-icon-color, #fff);
}

a { color: var(--color-primary-solid); }
a:hover, a:active, a:focus { color: var(--color-primary-dark); }

::selection { background: var(--color-primary-solid); color: #fff; }
::-moz-selection { background: var(--color-primary-solid); color: #fff; }

/* style.css paints these directly in #FF9000 with no variable indirection,
   so the admin panel's theme color picker (app-layout.blade.php) had no way
   to reach them — they stayed orange no matter what color was chosen.
   Re-point them at the brand variable here, same pattern as the rest of
   this file (loaded after style.css, so these rules win the cascade). */
#fh5co-features { background: var(--color-primary-solid); }
#fh5co-features .feature-left .icon i { color: var(--color-primary-solid) !important; }

/* Feature copy sits directly on the brand-color section background, not a
   var(--surface) card, so it needs its own (shorter, 230px) cap and a fade
   that matches that background instead of the shared card fade. */
.feature-copy-body { --collapsible-cap: 230px; }
.feature-copy-body .collapsible-fade { background: linear-gradient(to bottom, transparent, var(--color-primary-solid)); }

/* style.css floats each .feature-left column independently, so a card
   whose copy hits the 230px collapsible cap ends up far taller than a
   sibling short enough to render uncollapsed in the same row — the row's
   bottom edge goes ragged instead of level. Flex + stretch makes every
   card in a row match its tallest sibling regardless of which ones
   overflow, same fix a card grid needs even without the collapsible cap. */
#fh5co-features .services-row {
  display: flex;
  flex-wrap: wrap;
}
#fh5co-features .services-row > .col-md-4 {
  display: flex;
}
#fh5co-features .feature-left {
  display: flex;
  flex-direction: column;
  width: 100%;
  float: none;
}
.fh5co-bg-dark { background: var(--color-primary-solid); }
.timeline-badge { background-color: var(--color-primary-solid); }
#fh5co-started .btn { color: var(--color-primary-solid); }
#fh5co-about .fh5co-social-icons li a:hover { background: var(--color-primary-solid); }
.skills-tag:hover { box-shadow: 0 10px 20px var(--color-primary-soft); }

h1, h2, h3, h4, h5, h6, figure { color: var(--text); }

/* style.css hardcodes #000/#828282 on these with higher selector
   specificity (.fh5co-heading h2, etc.), so the generic h1-h6 rule
   above never wins the cascade — section titles like "Bacarıqlar" and
   "Rezümem" rendered near-invisible (near-black on near-black) in dark
   mode. Match the same specificity here so load order decides instead. */
.fh5co-heading h2 { color: var(--text); }
.fh5co-heading p { color: var(--text-muted); }
.fh5co-blog .blog-text span { color: var(--text-muted); }
.fh5co-blog .blog-text .stuff li:last-child a { color: var(--color-primary-solid); }

/* "İş təcrübəsi" / "Təhsil" pills: style.css hardcodes a light-gray
   #e6e6e6 background that never adapts, so once text turns light in
   dark mode it becomes unreadable against it. Give the pill its own
   theme-aware surface + border instead of relying on a fixed gray. */
.timeline .timeline-heading > div h3 {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Right-aligned body copy (from the original .timeline-unverted rule)
   reads worse than left-aligned text at any length — ragged-left edges
   are harder to scan. Keep the alternating left/right card layout, but
   always left-align the text inside each card. */
.timeline > li.timeline-unverted,
.timeline > li.timeline-inverted {
  text-align: left;
}

/* style.css's selector here is `.timeline > li > .timeline-badge`, which
   beats a plain `.timeline-badge` override on specificity (2 classes + 1
   type vs 1 class), so the earlier brand-color pass silently lost to it.
   Match the same compound selector so this one actually wins the cascade. */
.timeline > li > .timeline-badge {
  background-color: var(--color-primary-solid);
}

/* Hero image tint on the header/cover sections — was hardcoded to the
   original orange with no variable indirection at all. */
#fh5co-header .overlay,
.fh5co-cover .overlay {
  background: var(--color-primary);
}

/* ---- Hero "scroll down" cue: bouncing arrow anchored to the bottom of
   the header, links to the next section. Motion signals "there's more
   below" (not decorative), and yields to prefers-reduced-motion via the
   global animation-duration override further down this file. ---- */
.fh5co-scroll-down {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fh5co-scroll-down:hover,
.fh5co-scroll-down:focus-visible {
  opacity: 1;
  color: #fff;
  transform: translateX(-50%) translateY(-2px);
}
.fh5co-scroll-down-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fh5co-scroll-down i {
  display: block;
  font-size: 20px;
  animation: fh5co-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes fh5co-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media screen and (max-width: 768px) {
  .fh5co-scroll-down { bottom: 18px; }
  .fh5co-scroll-down-label { display: none; }
}

/* ---- Initial-load screen: shown for the brief window between first
   paint and DOMContentLoaded (see resources/js/motion/loader.js), which
   is also what a hard refresh looks like. Centers the site owner's own
   profile photo (no name/text) inside a spinning brand-color ring, so
   it reads as this site's loading state — not a generic template
   spinner — without spelling anything out. ---- */
.fh5co-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.fh5co-loader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fh5co-loader-avatar {
  position: relative;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  box-shadow: 0 6px 24px rgba(20, 20, 25, 0.16);
  opacity: 0;
  transform: scale(0.92);
  animation: fh5co-loader-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}
.fh5co-loader-ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--color-primary-solid);
  border-right-color: var(--color-primary-solid);
  animation: fh5co-loader-spin 0.9s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
@keyframes fh5co-loader-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes fh5co-loader-spin {
  to { transform: rotate(360deg); }
}

/* ---- Scroll progress bar: fixed at the very top, fills left-to-right
   as the user scrolls down the page (see custom.js). Sits above the
   navbar's z-index so it stays visible while scrolling past it. ---- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-solid));
  z-index: 1100;
  transition: width 0.1s linear;
}

/* ---- Scroll reveal: resources/js/motion/reveal.js (Motion's inView() +
   animate()) drives the actual entrance transition via WAAPI — this file
   only sets the pre-animation hidden state so nothing flashes at full
   opacity before JS runs, plus the .is-revealed fallback for reduced-
   motion / no-IntersectionObserver, where JS skips animation entirely
   and just adds the class. No CSS `transition` here: Motion owns the
   timing/easing so the two systems can't fight over the same frame. ---- */
.js .animate-box {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.js .animate-box[data-animate-effect="fadeInLeft"] {
  transform: translateX(-36px);
}
.js .animate-box[data-animate-effect="fadeInRight"] {
  transform: translateX(36px);
}
.js .animate-box[data-animate-effect="fadeIn"] {
  transform: none;
}
/* Grid/list items (services, portfolio, blog, skill groups, resume
   timeline) reveal as a cascading group — a smaller offset than solo
   sections reads as one coordinated wave rather than separate slides. */
.js #fh5co-features .animate-box,
.js #fh5co-work .animate-box,
.js #fh5co-blog .animate-box,
.js .skills-groups .animate-box,
.js .timeline > .animate-box {
  transform: translateY(22px);
}
/* !important on the revealed end-state: an inline style left over from an
   interrupted/rejected reveal.js animation (e.g. one card's WAAPI promise
   never resolving) would otherwise keep beating this class rule forever —
   noticeable on #fh5co-work as one card sitting visibly offset from its
   siblings until the page is reloaded. Forcing it here means "revealed"
   always wins regardless of what's left in the inline style attribute. */
.js .animate-box.is-revealed {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* Portfolio + blog images get their own clip-path/scale reveal, layered
   under the card's fade (reveal.js). overflow is already clipped by the
   card (.fh5co-blog) or the image's own fixed box (.work), so the
   inset() clip-path reads as a mask rather than spilling past the card. */
.js #fh5co-work .work,
.js #fh5co-blog .blog-bg {
  opacity: 0;
  transform: scale(1.08);
  clip-path: inset(10% round 8px);
}
.js #fh5co-work .work.is-revealed,
.js #fh5co-blog .blog-bg.is-revealed {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ---- Fixed navbar ---- */
.fh5co-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--navbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.fh5co-navbar .navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 8px 0;
}
.fh5co-navbar .navbar-brand {
  font-family: "Kaushan Script", "Lobster", cursive;
  font-size: 22px;
  color: var(--color-primary-solid) !important;
  /* Bootstrap's .navbar-brand ships height:55px + line-height:20px, meant
     to be balanced by its own 17.5px top/bottom padding. We zero that
     padding above but never reset height/line-height, so the text sat at
     the top of a 55px box instead of centering. Reset both and let the
     parent's flex align-items:center do the vertical centering. */
  padding: 0;
  height: auto;
  line-height: normal;
  display: inline-flex;
  align-items: center;
}
.fh5co-navbar .navbar-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.fh5co-navbar .navbar-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.fh5co-navbar .navbar-links a {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 2px;
  position: relative;
}
.fh5co-navbar .navbar-links a:hover,
.fh5co-navbar .navbar-links a:focus {
  color: var(--color-primary-solid);
}
.fh5co-navbar .navbar-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  background: var(--color-primary-solid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.fh5co-navbar .navbar-links a:hover::after,
.fh5co-navbar .navbar-links a:focus::after { transform: scaleX(1); }

.fh5co-navbar .navbar-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* language switch */
.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch .lang-option {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 40px;
  text-align: center;
}
.lang-switch .lang-option:hover,
.lang-switch .lang-option:focus {
  background: var(--color-primary-soft);
  color: var(--color-primary-solid);
}
.lang-switch .lang-option.is-active {
  background: var(--color-primary-solid);
  color: #fff;
}

/* theme toggle button */
.theme-toggle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.theme-toggle-btn:hover { border-color: var(--color-primary-solid); color: var(--color-primary-solid); }
.theme-toggle-btn:active { transform: scale(0.94); }
.theme-toggle-btn .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: inline-block; }

/* mobile nav toggle */
.navbar-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.navbar-toggle-btn span {
  display: block;
  height: 2px;
  width: 26px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.navbar-toggle-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-toggle-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile bar tools: language dropdown + contact shortcut ----
   Rendered in the bar itself (not inside the collapsible menu) so they are
   reachable without opening the hamburger. Desktop hides the group and
   keeps the full AZ/EN/RU row inside .navbar-tools instead.
   Icons are inline SVG (Lucide-style, 2px stroke) so the three controls
   share one visual language instead of mixing icon-font glyphs. */
.navbar-mobile-tools {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 14px;
}
.nav-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.nav-icon-sm { width: 11px; height: 11px; stroke-width: 2.4; }

.lang-dropdown { position: relative; }
.lang-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.lang-dropdown-btn:active { transform: scale(0.96); }
/* Visual size is 34px; the tap area is extended to 44px (platform minimum)
   with an invisible pseudo-element so the smaller buttons stay easy to hit. */
.lang-dropdown-btn::before,
.navbar-contact-btn::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
}
.navbar-contact-btn::before { inset: -7px; }
.navbar-contact-btn .nav-icon { width: 13px; height: 13px; }
.lang-dropdown-btn:hover,
.lang-dropdown-btn[aria-expanded="true"] {
  border-color: var(--color-primary-solid);
  color: var(--color-primary-solid);
  background: var(--color-primary-soft);
}
.lang-dropdown-btn:focus-visible,
.navbar-contact-btn:focus-visible,
.lang-dropdown-item:focus-visible {
  outline: 2px solid var(--color-primary-solid);
  outline-offset: 2px;
}
.lang-dropdown-caret { transition: transform 0.2s ease; }
.lang-dropdown-btn[aria-expanded="true"] .lang-dropdown-caret { transform: rotate(180deg); }

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 196px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 40px -12px rgba(0, 0, 0, 0.35);
  z-index: 1001;
  transform-origin: top right;
  animation: lang-menu-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lang-dropdown-menu[hidden] { display: none; }
@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lang-dropdown-menu { animation: none; }
  .lang-dropdown-caret { transition: none; }
}
.lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px 8px 8px;
  border-radius: 11px;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.lang-dropdown-item:hover,
.lang-dropdown-item:focus { background: var(--color-primary-soft); color: var(--text); text-decoration: none; }
.lang-dropdown-item.is-active { font-weight: 700; }
.lang-dropdown-name { flex: 1 1 auto; }
.lang-dropdown-check { color: var(--color-primary-solid); width: 13px; height: 13px; }
.lang-dropdown-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lang-dropdown-item.is-active .lang-dropdown-code { background: var(--color-primary-solid); border-color: var(--color-primary-solid); color: #fff; }

.navbar-contact-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-solid);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  box-shadow: 0 6px 16px -6px var(--color-primary-solid);
  touch-action: manipulation;
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.navbar-contact-btn:hover,
.navbar-contact-btn:focus { filter: brightness(0.94); }
.navbar-contact-btn:active { transform: scale(0.96); box-shadow: none; }

@media screen and (max-width: 991px) {
  .navbar-toggle-btn { display: inline-flex; }
  .navbar-mobile-tools { display: inline-flex; }
  .navbar-contact-label { display: none; }
  /* The full language row lives in the collapsed menu on desktop only —
     on mobile the bar's dropdown replaces it. */
  .fh5co-navbar .navbar-tools .lang-switch { display: none; }
  .fh5co-navbar .navbar-tools { justify-content: flex-end; }
  .fh5co-navbar .navbar-menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .fh5co-navbar .navbar-menu.is-open { max-height: 480px; }
  .fh5co-navbar .navbar-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 10px 20px;
  }
  .fh5co-navbar .navbar-links a { display: block; padding: 12px 0; width: 100%; }
  .fh5co-navbar .navbar-tools {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border);
  }
}

/* Narrow phones: contact button becomes icon-only so the brand, language
   dropdown, contact and hamburger all fit on one 360px row. */
@media screen and (max-width: 480px) {
  .fh5co-navbar .navbar-brand { font-size: 19px; }
}

#fh5co-header { margin-top: 0; }

/* The template ships an unused offcanvas mobile-nav system that gives
   #page a percentage height + overflow-x:hidden. Per the CSS overflow
   spec, mixing overflow-x:hidden with a default overflow-y forces
   overflow-y to "auto", turning #page into its own independently
   scrollable box whenever its computed height (based on %, which is
   itself derived from body's height) falls even slightly short of its
   real content height — a nested/double scrollbar. We don't use the
   offcanvas slide-out, so drop the height constraint entirely and let
   horizontal-scroll prevention live on html/body instead (see above),
   where there's no percentage-height box to fall short. */
#page {
  height: auto;
  overflow: visible;
}

/* ---- Skills: grouped cards of tag pills — no rings, no percentages,
   no self-rated level meter, just the name grouped by category. ---- */
.skills-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
@media screen and (max-width: 992px) {
  .skills-groups { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 640px) {
  .skills-groups { grid-template-columns: 1fr; }
}

.skills-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: var(--shadow);
}

.skills-group-title {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary-solid);
}

/* Skill tags: no level/percentage of any kind — just the name, as a
   pill. The value here is legibility and category grouping, not a
   (mostly made-up) self-rated proficiency number. */
.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skills-tag {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-solid);
  background: var(--color-primary-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.skills-tag:hover {
  background: var(--color-primary-solid);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255, 144, 0, 0.28);
}

/* ---- Certificates & Seminars: card grid, "show more" reveal, and the
   click-to-preview modal (image or embedded PDF) wired up in custom.js.
   style.css's shared section-padding rule (#fh5co-skills, #fh5co-work, etc.
   — see "padding: 7em 0" further down this file) never learned about this
   section since it didn't exist yet when that list was written, so it was
   sitting flush against its neighbours — most noticeable with 3 or fewer
   items, where there's no "show more" button to add its own margin either. ---- */
#fh5co-certificates {
  padding: 7em 0;
  clear: both;
}
@media screen and (max-width: 768px) {
  #fh5co-certificates { padding: 3em 0; }
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 10px;
}
@media screen and (max-width: 992px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 640px) {
  .cert-grid { grid-template-columns: 1fr; }
}

.cert-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(20, 20, 25, 0.06),
    0 14px 30px rgba(20, 20, 25, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
html[data-theme="dark"] .cert-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
/* Two classes (not one) so this always outranks the plain `.cert-card {
   display: flex }` rule above regardless of source order — a bug that
   previously left every card visible from the start. */
.cert-card.cert-card-extra { display: none; }
#certGrid.is-expanded .cert-card.cert-card-extra { display: flex; }

.cert-card-clickable { cursor: pointer; }
.cert-card-clickable:hover,
.cert-card-clickable:focus-visible {
  border-color: var(--color-primary-solid);
  box-shadow:
    0 2px 4px rgba(20, 20, 25, 0.08),
    0 24px 42px rgba(20, 20, 25, 0.16);
}
html[data-theme="dark"] .cert-card-clickable:hover,
html[data-theme="dark"] .cert-card-clickable:focus-visible {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 24px 42px rgba(0, 0, 0, 0.6);
}
.cert-card-clickable:focus-visible {
  outline: 2px solid var(--color-primary-solid);
  outline-offset: 2px;
}
/* Card lift + image zoom are decorative flourishes, not the interaction's
   only feedback (the badge/zoom-icon/border-color changes stay either
   way) — skip the motion for prefers-reduced-motion instead of gating
   the whole hover state behind it. */
@media (prefers-reduced-motion: no-preference) {
  .cert-card-clickable:hover,
  .cert-card-clickable:focus-visible {
    transform: translateY(-6px);
  }
}

.cert-card-media {
  position: relative;
  height: 140px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media screen and (max-width: 992px) {
  .cert-card-media { height: 130px; }
}
@media screen and (max-width: 640px) {
  .cert-card-media { height: 120px; }
}
.cert-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .cert-card-clickable:hover .cert-card-media img { transform: scale(1.06); }
}
.cert-card-icon {
  font-size: 42px;
  color: var(--color-primary-solid);
  opacity: 0.55;
}

/* Dark glass pill rather than a solid orange/slate fill: white-on-#FF9000
   sits around 2.4:1 contrast, well under the 4.5:1 AA minimum for text
   this small (11px bold doesn't qualify as "large text"). A near-black
   scrim keeps the label readable in both themes; the dot carries the
   certificate/seminar color distinction instead, backed by the text
   label itself (never color alone). */
.cert-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(15, 17, 21, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cert-card-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-solid);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.cert-card-badge-seminar .cert-card-badge-dot { background: #8fb4dd; }

.cert-card-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 21, 0.45);
  color: #fff;
  font-size: 22px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cert-card-clickable:hover .cert-card-zoom,
.cert-card-clickable:focus-visible .cert-card-zoom { opacity: 1; }

.cert-card-body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cert-card-body h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.cert-card-institution {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-solid);
}
.cert-card-period {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cert-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 34px;
  margin-bottom: 34px;
}
.cert-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cert-more-btn:hover {
  border-color: var(--color-primary-solid);
  color: var(--color-primary-solid);
}
@media (prefers-reduced-motion: no-preference) {
  .cert-more-btn:hover { transform: translateY(-2px); }
}
.cert-more-btn i { transition: transform 0.25s ease; }
.cert-more-btn.is-expanded i { transform: rotate(180deg); }

/* ---- Certificate preview modal — same open/close mechanics as
   .cv-lang-modal (see custom.js), sized to hold either an image or an
   embedded PDF. ---- */
.cert-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.cert-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}
.cert-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, 0.6);
}
.cert-modal-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.cert-modal.is-open .cert-modal-panel { transform: scale(1) translateY(0); }
.cert-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--bg-alt);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cert-modal-close:hover,
.cert-modal-close:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary-solid);
}
.cert-modal-title {
  margin: 0 0 16px;
  padding-right: 36px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.cert-modal-media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
}
.cert-modal-media img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  display: block;
}
.cert-modal-media iframe {
  width: 100%;
  height: 72vh;
  border: 0;
  display: block;
}
.cert-modal-doc-link { margin: 14px 0 0; text-align: center; }
.cert-modal-doc-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary-solid);
}
.cert-modal-doc-link a:hover { color: var(--color-primary-dark); }

@media screen and (max-width: 640px) {
  .cert-modal-panel { padding: 20px 16px 16px; }
  .cert-modal-media img,
  .cert-modal-media iframe { max-height: 60vh; height: 60vh; }
}

html.cert-modal-open,
html.cert-modal-open body { overflow: hidden; }

html { scroll-behavior: smooth; }
#fh5co-about, #fh5co-resume, #fh5co-skills, #fh5co-certificates, #fh5co-features,
#fh5co-work, #fh5co-blog, #fh5co-consult {
  scroll-margin-top: 76px;
}

/* ---- Section surfaces / dark mode remap ---- */
#fh5co-about,
#fh5co-blog,
body { background: var(--bg); }

#fh5co-resume.fh5co-bg-color { background: var(--bg-alt); }

/* style.css gives .timeline-panel a border-radius but zero padding — text
   sits flush against the card edge. Add real spacing plus a layered
   "contact + ambient" shadow (crisp near shadow + soft far shadow) for a
   raised, 3D card feel instead of the flat single-shadow look. */
.timeline-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  padding: 30px 32px;
  box-shadow:
    0 1px 2px rgba(20, 20, 25, 0.06),
    0 14px 30px rgba(20, 20, 25, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.timeline-panel:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary-solid) !important;
  box-shadow:
    0 2px 4px rgba(20, 20, 25, 0.08),
    0 24px 42px rgba(20, 20, 25, 0.16);
}
html[data-theme="dark"] .timeline-panel {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 14px 30px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .timeline-panel:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 24px 42px rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 768px) {
  .timeline-panel { padding: 24px 22px; }
}

/* ---- Collapsible long cards: a fixed height cap keeps one verbose CV
   entry, an oversized skills group, a long blog excerpt, or feature copy
   from stretching the whole card. Shared by .timeline-panel (resume),
   .skills-group (skills), .blog-text-body (blog) and .feature-copy-body
   (Xidmətlərim) via the .collapsible-panel marker class — same fade, same
   toggle, one implementation (resources/js/motion/collapsible-panels.js)
   instead of a copy per card type. The cap defaults to 270px but reads
   --collapsible-cap when a section sets one (see .feature-copy-body's
   230px below) — JS mirrors this exactly instead of a hardcoded number.
   The cap is the same at every breakpoint on purpose — narrower mobile
   widths wrap content onto more lines, so JS re-measures each panel's real
   scrollHeight against this cap on load and on resize; the toggle only
   appears where content genuinely overflows it, mobile or not, instead of a
   CSS-only clamp that would guess wrong per breakpoint. */
.collapsible-panel {
  position: relative;
  max-height: var(--collapsible-cap, 270px);
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.collapsible-panel.is-expanded {
  max-height: 2000px;
}
.collapsible-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.collapsible-panel.has-overflow .collapsible-fade { opacity: 1; }
.collapsible-panel.has-overflow.is-expanded .collapsible-fade { opacity: 0; }

/* Reserve room at the card's bottom so the pinned toggle below never sits
   on top of the last line of (collapsed or fully expanded) content. */
.collapsible-panel.has-overflow { padding-bottom: 60px; }

/* Absolutely positioned, not in normal flow: the button lives right after
   the (potentially very long) content in the DOM, so a static position
   would place it past the 270px cap — clipped away along with the
   overflowing content it's meant to reveal. Pinning it to the panel's own
   bottom-right corner keeps it visible whether collapsed or expanded. */
.collapsible-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--color-primary-solid);
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(20, 20, 25, 0.14);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.collapsible-panel.has-overflow .collapsible-toggle { display: flex; }
.collapsible-toggle:hover { border-color: var(--color-primary-solid); }
.collapsible-toggle i { transition: transform 0.25s ease; }
.collapsible-panel.is-expanded .collapsible-toggle i { transform: rotate(180deg); }

.timeline-panel .timeline-title,
.timeline-panel .timeline-body p { color: var(--text); }
.timeline-panel .company { color: var(--text-muted); }

.info li .first-block { width: 27%; color: var(--text) !important; }
.info li .second-block { color: var(--text-muted) !important; }

#fh5co-about p,
.timeline-body p { color: var(--text-muted); }

.fh5co-blog {
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fh5co-blog:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.14); }
.fh5co-blog .blog-text { background: var(--surface); }
.fh5co-blog .blog-text h3 a { color: var(--text); }
.fh5co-blog .blog-text p { color: var(--text-muted); }
.fh5co-blog .stuff { border-color: var(--border) !important; }

.work {
  transition: transform 0.3s ease;
}
.work:hover { transform: scale(1.03); }

/* buttons */
.btn-primary,
.btn.btn-default {
  background: var(--color-primary-solid);
  border-color: var(--color-primary-solid);
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover, .btn-primary:focus,
.btn.btn-default:hover, .btn.btn-default:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 144, 0, 0.28);
}

.cv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.btn-cv-download,
.btn-cv-view {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-cv-download i,
.btn-cv-view i { font-size: 16px; }

.btn-cv-download {
  background: var(--color-primary-solid);
  color: #fff !important;
}
.btn-cv-download:hover,
.btn-cv-download:focus {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(255, 144, 0, 0.3);
}

/* "View" opens the CV in a new tab for reading in-browser instead of
   downloading it — kept visually secondary (outline vs. filled) to
   "Download", the more committal action, while sharing its shape/size. */
.btn-cv-view {
  background: transparent;
  border: 2px solid var(--color-primary-solid);
  color: var(--color-primary-solid) !important;
}
.btn-cv-view:hover,
.btn-cv-view:focus {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark) !important;
  transform: translateY(-3px);
}

/* ---- CV language picker modal — "Bax"/"View" opens this instead of
   jumping straight to a file, since a CV can be uploaded per-locale and
   the visitor might want a language other than the one they're browsing
   in. custom.js toggles .is-open + aria-hidden; kept out of the tab
   order and pointer-events while closed rather than unmounted, so the
   opacity/transform transition below actually has something to animate. ---- */
.cv-lang-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.cv-lang-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

.cv-lang-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, 0.55);
}

.cv-lang-modal-panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: scale(0.94) translateY(8px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-lang-modal.is-open .cv-lang-modal-panel {
  transform: scale(1) translateY(0);
}

.cv-lang-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--bg-alt);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cv-lang-modal-close:hover,
.cv-lang-modal-close:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary-solid);
}

.cv-lang-modal-panel h3 {
  margin: 0 0 18px;
  padding-right: 36px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.cv-lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv-lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.cv-lang-option:hover,
.cv-lang-option:focus-visible {
  border-color: var(--color-primary-solid);
  background: var(--color-primary-soft);
  color: var(--text);
  transform: translateX(2px);
}
.cv-lang-code {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-primary-solid);
  font-size: 12px;
  font-weight: 700;
}
.cv-lang-name { flex: 1; font-size: 14px; font-weight: 600; }
.cv-lang-option i { color: var(--text-muted); font-size: 14px; }

/* Locale with no CV uploaded yet — listed (not hidden) so it's obvious
   what's missing, but visually inert: dashed border, no hover reaction,
   "Yüklənməyib" instead of the arrow. */
.cv-lang-option.is-disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  border-style: dashed;
}
.cv-lang-option.is-disabled:hover,
.cv-lang-option.is-disabled:focus-visible {
  border-color: var(--border);
  background: none;
  color: var(--text-muted);
  transform: none;
}
.cv-lang-option.is-disabled .cv-lang-code {
  background: var(--bg-alt);
  color: var(--text-muted);
}
.cv-lang-missing {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Lock background scroll while the modal is open. */
html.cv-modal-open,
html.cv-modal-open body { overflow: hidden; }

/* form controls in dark mode */
.form-control {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus {
  border-color: var(--color-primary-solid);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

#fh5co-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 30px 0;
}
#fh5co-footer p { color: var(--text-muted); margin: 0; }
#fh5co-footer p a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#fh5co-footer p a:hover,
#fh5co-footer p a:focus { color: var(--color-primary-solid); }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
@media screen and (max-width: 640px) {
  .footer-inner { justify-content: center; text-align: center; }
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.footer-brand:hover,
.footer-brand:focus { color: var(--color-primary-solid); }
.footer-brand-icon { flex-shrink: 0; }

.gototop.js-top a {
  background: var(--color-primary-solid);
}


/* accessible focus ring across template */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
  outline: 3px solid var(--color-primary-solid);
  outline-offset: 2px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .animate-box {
    transform: none;
  }
}

@media screen and (max-width: 768px) {
  .fh5co-navbar .navbar-brand { font-size: 18px; }
}

/* First/last name now share one .row.form-group (was two stacked rows —
   wasted a full row's height, see resources/views/partials/contact.blade.php)
   so the section fits on screen without scrolling. Below Bootstrap's md
   breakpoint (992px) col-md-6 has no width effect yet, so both columns
   stack full-width with nothing but the row's own margin between them —
   add it back here between the two columns specifically. */
@media screen and (max-width: 991px) {
  #contact-form .row.form-group > .col-md-6:first-child {
    margin-bottom: 15px;
  }
}

/* ---- Contact form AJAX feedback ---- */
.contact-feedback {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}
.contact-feedback.is-success {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}
.contact-feedback.is-error {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.contact-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: #dc2626;
  min-height: 0;
}
.contact-error:empty {
  display: none;
}
#contact-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---- Blog post detail page ---- */
#fh5co-post .post-body {
  color: var(--text);
  line-height: 1.8;
  font-size: 16px;
}
#fh5co-post h1 {
  margin: 8px 0 20px;
}

/* ---- Work/project detail page ---- */
#fh5co-work-single .post-body {
  color: var(--text);
  line-height: 1.8;
  font-size: 16px;
}
#fh5co-work-single h1 {
  margin: 8px 0 20px;
}

/* ---- Cyrillic name font (Russian locale) ----
   Kaushan Script ships no Cyrillic glyphs, so under lang=ru the browser
   would substitute a random system cursive per character. Lobster is the
   closest Cyrillic-capable match (same bold, slanted brush weight). Switch
   the WHOLE element — not a per-glyph fallback — so the em-dash rules,
   spacing and letters all come from one font and nothing reads as mixed.
   Lobster sits a touch heavier/wider than Kaushan at equal size; the small
   size/tracking trim keeps the visual weight of the two locales matched. */
html:lang(ru) #fh5co-header .display-tc h1,
html:lang(ru) .fh5co-cover .display-tc h1 {
  font-family: "Lobster", cursive;
  font-size: 46px;
  letter-spacing: 0.01em;
}
html:lang(ru) .fh5co-navbar .navbar-brand {
  font-family: "Lobster", cursive;
  font-size: 21px;
}
@media screen and (max-width: 768px) {
  html:lang(ru) #fh5co-header .display-tc h1,
  html:lang(ru) .fh5co-cover .display-tc h1 {
    font-size: 31px;
  }
}

/* ---- Avatar framing (admin → header → profile photo cropper). style.css
   forces background-size: cover !important on the hero avatar, so the
   admin-chosen zoom is passed through a custom property and re-applied
   here with equal weight; "cover" is the default when nothing is set. ---- */
#fh5co-header .display-tc .profile-thumb,
.fh5co-cover .display-tc .profile-thumb,
.fh5co-loader-avatar {
  background-size: var(--avatar-size, cover) !important;
  background-repeat: no-repeat;
}