/* ===================================================================
   nO shOes Studio - Design Tokens & CSS Variables
   =================================================================== */

:root {
    /* ---- Brand -------------------------------------------------- */
    --brand-orange:        #FB4F14;          /* Broncos orange */
    --brand-orange-light:  #FD7E44;
    --brand-orange-dark:   #C93E10;
    --brand-orange-line:   #FF7D00;

    --brand-blue:          #002244;          /* Broncos navy */
    --brand-blue-light:    #1A3A5C;
    --brand-blue-dark:     #001122;

    /* ---- Neutral palette --------------------------------------- */
    --white:     #ffffff;
    --gray-100:  #f8f9fa;
    --gray-200:  #e9ecef;
    --gray-300:  #dee2e6;
    --gray-400:  #ced4da;
    --gray-500:  #adb5bd;
    --gray-600:  #6c757d;
    --gray-700:  #495057;
    --gray-800:  #343a40;
    --gray-900:  #212529;
    --black:     #000000;

    /* ---- Theme: Light (default) -------------------------------- */
    --color-bg:             var(--white);
    --color-bg-secondary:   var(--gray-100);
    --color-text:           var(--gray-900);
    --color-text-muted:     var(--gray-600);
    --color-border:         var(--gray-300);
    --color-heading:        var(--brand-blue);

    /* ---- Theme: Dark [data-theme="dark"] ----------------------- */
    --dark-bg:              #0F1923;
    --dark-bg-secondary:    #162231;
    --dark-text:            #E9ECEF;
    --dark-text-muted:      #ADB5BD;
    --dark-border:          #2D3A47;
    --dark-heading:         var(--brand-orange-light);

    /* ---- Links ------------------------------------------------ */
    --link-color:           var(--brand-blue-light);
    --link-hover:           var(--brand-orange-light);
    --link-active:          var(--brand-orange-dark);
    --link-visited:         var(--gray-500);
    --link-decoration:      underline;
    --link-hover-decoration: none;

    /* ---- Typography ------------------------------------------- */
    --font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif:    Georgia, "Times New Roman", serif;
    --font-display:  "Abril Fatface", "Playfair Display", Georgia, serif;
    --font-mono:     "Fira Code", "Cascadia Code", Consolas, monospace;
    --font-special:   "Baskerville Old Face", "Garamond", "Palatino Linotype", "Book Antiqua", Palatino, serif;
    --font-special-alt:   "Oswald", "Impact", "Arial Black", sans-serif;

    --font-size-base:     1rem;       /* 16px */
    --font-size-lg:       1.125rem;   /* 18px */
    --font-size-sm:       0.875rem;   /* 14px */
    --line-height:        1.6;

    /* ---- Spacing ---------------------------------------------- */
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;

    /* ---- Borders & Radius ------------------------------------- */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   1rem;
    --radius-full: 9999px;

    /* ---- Shadows ---------------------------------------------- */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.1);

    /* ---- Transitions ------------------------------------------ */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
}

.text-muted {
    color: var(--color-text-muted) !important;
}


/* ===================================================================
   Dark theme override
   =================================================================== */
[data-theme="dark"] {
    --color-bg:           var(--dark-bg);
    --color-bg-secondary: var(--dark-bg-secondary);
    --color-text:         var(--dark-text);
    --color-text-muted:   var(--dark-text-muted);
    --color-border:       var(--dark-border);
    --color-heading:      var(--dark-heading);
    --link-color:         var(--white);
    --link-hover:         var(--brand-orange-light);
    --link-active:        var(--brand-orange-dark);
    --link-visited:       var(--gray-500);
}


/* ===================================================================
   Base element styles (using variables)
   =================================================================== */
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-text-size-adjust: 100%;
}

/* ---- Images & decorative chrome ---------------------------------
   Pictures on this site are furniture, not content: dragging across them
   must not paint the blue text-selection highlight, must not start a
   ghost-image drag, and must not pop the "save image" callout on touch.
   Applied to .profile-img and every other <img> in the templates; any
   non-image element can wear the class too (icon wrappers, logo blocks).
   Firefox ignores -webkit-user-drag, so main.js also blocks the drag. */
.not-selectable {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* ---- Links ----------------------------------------------------- */
a {
    color: var(--link-color) !important;
    font-weight: 700 !important;
}

a:hover,
a:focus-visible {
    color: var(--link-hover) !important;
    text-decoration: var(--link-hover-decoration);
}
a:active {
    color: var(--link-active);
}
a:visited {
    color: var(--link-visited);
}

/* Anchors styled as solid buttons get white text; background comes from
   the button variant (e.g. .btn-primary). */
a.btn.btn-primary,
a.btn.btn-secondary {
    color: var(--white) !important;
}

/* ---- Badge wrapping ------------------------------------------
   Bootstrap's `.badge` is `white-space: nowrap` + `text-align: center`, so a
   long localized sub-skill name (RU "Автоматизация рабочих процессов с помощью
   ИИ", ES "Internacionalización de Django") is wider than its card — and the
   card's `overflow-hidden` clips it at the edge instead of showing it.
   Let badges wrap and shrink to the width they are given.
   `overflow-wrap: anywhere` rather than `break-word`: it also lowers the
   min-content width, which is what lets the flex parent shrink at all.
   Short status/date badges are unaffected. */
a.badge,
span.badge,
div.badge {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}

a.badge {
    color: var(--white) !important;
    background-color: var(--brand-blue-light) !important;
}

/* A link nested inside a <button>. */
button a {
    color: var(--white) !important;
}

a.badge:hover,
a.badge:focus-visible {
    color: var(--badge-fg, var(--gray-100)) !important;
}

/* ---- Badge color variants ------------------------------------
   Project palette replacing Bootstrap's .bg-* utilities.
   --badge-fg also drives the text color on hovered/focused links. */
.badge.badge-primary {
    --badge-fg: var(--white);
    background-color: rgb(13 200 253) !important;
    color: var(--badge-fg) !important;
}

.badge.badge-success {
    --badge-fg: var(--white);
    background-color: rgb(15 163 141) !important;
    color: var(--badge-fg) !important;
}

.badge.badge-warning {
    --badge-fg: var(--gray-900);
    background-color: #ffc107 !important;
    color: var(--badge-fg) !important;
}

.badge.badge-secondary {
    --badge-fg: var(--white);
    background-color: var(--gray-600) !important;
    color: var(--badge-fg) !important;
}

.badge.badge-secondary:hover {
    background-color: var(--brand-orange-light) !important;
}

.badge.badge-light {
    --badge-fg: var(--gray-900);
    background-color: var(--gray-100) !important;
    color: var(--badge-fg) !important;
}

.badge.badge-danger {
    --badge-fg: var(--white);
    background-color: #dc3545 !important;
    color: var(--badge-fg) !important;
}

/* ---- Dropdown menu ------------------------------------------- */
.dropdown-menu {
    background-color: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-menu .dropdown-divider {
    border-top-color: var(--color-border) !important;
}

a.dropdown-item,
button.dropdown-item {
    color: var(--brand-blue-light) !important;
}

a.dropdown-item:hover,
a.dropdown-item:focus-visible,
button.dropdown-item:hover,
button.dropdown-item:focus-visible {
    background-color: var(--gray-200) !important;
    color: var(--brand-orange) !important;
}

a.dropdown-item.active,
a.dropdown-item:active,
button.dropdown-item.active,
button.dropdown-item:active {
    background-color: var(--brand-orange) !important;
    color: #f8f9fa !important;
}

/* Dark theme dropdown */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

[data-theme="dark"] a.dropdown-item,
[data-theme="dark"] button.dropdown-item {
    color: var(--dark-text) !important;
}

[data-theme="dark"] a.dropdown-item:hover,
[data-theme="dark"] a.dropdown-item:focus-visible,
[data-theme="dark"] button.dropdown-item:hover,
[data-theme="dark"] button.dropdown-item:focus-visible {
    background-color: rgba(251, 79, 20, 0.15) !important;
    color: var(--brand-orange-light) !important;
}

[data-theme="dark"] a.dropdown-item.active,
[data-theme="dark"] a.dropdown-item:active,
[data-theme="dark"] button.dropdown-item.active,
[data-theme="dark"] button.dropdown-item:active {
    background-color: var(--brand-orange) !important;
    color: #f8f9fa !important;
}

/* ---- Navbar toggler icon ------------------------------------- */
.navbar-toggler-icon {
    width: 1.25em !important;
    height: 1.25em !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,34,68,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(253,126,68,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* ---- Navbar -------------------------------------------------- */
.navbar {
    background-color: var(--color-bg) !important;
    border-bottom: 1px solid var(--color-border);
}

.navbar .nav-link {
    color: var(--color-text) !important;
    transition: color var(--transition-fast);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: var(--brand-orange) !important;
}

.navbar .nav-link.active {
    color: var(--brand-orange) !important;
}

.navbar-brand {
    color: var(--brand-blue) !important;
}

[data-theme="dark"] .navbar-brand {
    color: var(--brand-orange-light) !important;
}

.navbar-toggler {
    border-color: var(--color-border) !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(251, 79, 20, 0.25) !important;
}

/* ---- Theme toggle button ------------------------------------- */
#themeToggle {
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text) !important;
    padding: var(--spacing-xs) var(--spacing-sm);
}

#themeToggle:hover {
    color: var(--brand-orange) !important;
}

/* ---- Progress overlay & spinner ------------------------------ */
.progress-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.progress-overlay.active {
    display: flex;
}

.progress-spinner {
    text-align: center;
    color: #fff;
}

.spinner-circle {
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--brand-orange);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.progress-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Light mode: show moon (dark) icon, hide sun (light) icon */
#themeToggle .theme-icon-light { display: none; }
#themeToggle .theme-icon-dark { display: inline; }

/* Dark mode: show sun (light) icon, hide moon (dark) icon */
[data-theme="dark"] #themeToggle .theme-icon-light { display: inline; }
[data-theme="dark"] #themeToggle .theme-icon-dark { display: none; }

/* ---- Scroll to top button ------------------------------------ */
#scrollToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal), background-color var(--transition-fast), color var(--transition-fast);
}

#scrollToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollToTop svg {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}

#scrollToTop:hover {
    background-color: var(--brand-orange);
    color: #fff;
    border-color: var(--brand-orange);
}

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

/* h2 {
    font-family: var(--font-special);
} */

/* ---- Drop cap / First letter ----------------------------------- */
.drop-cap::first-letter,
.article-body > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3.5rem;
    float: left;
    line-height: 0.8;
    padding-right: 0.15em;
    color: var(--brand-orange);
}

.main-title {
    font-family: var(--font-special);
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ===================================================================
   Utility helpers
   =================================================================== */
.text-brand-orange { color: var(--brand-orange); }
.text-brand-blue   { color: var(--brand-blue); }
.bg-brand-orange   { background-color: var(--brand-orange); }
.bg-brand-blue     { background-color: var(--brand-blue); }

.text-display {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}


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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html {
  height: 100%;
}

.bg-gradient-primary-to-secondary {
  background: var(--brand-blue-light);
  background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-orange) 100%);
}

.text-gradient {
    background: -webkit-linear-gradient(315deg, var(--brand-blue-light) 0%, var(--brand-orange-light) 100%);
    background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-orange-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rounded-4 {
  border-radius: 1rem !important;
}

.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    font-size: 1.5rem;
    background-color: var(--brand-blue-light);
}

.profile {
    position: relative;
    height: 75vw;
    width: 75vw;
    border-radius: 50vw;
    margin-top: 5vw;
    max-height: 40rem;
    max-width: 40rem;
    animation: profile-hover 3s ease-in-out infinite;
}

@keyframes profile-hover {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* btn settings */
.btn-primary {
    color: var(--white) !important;
    background-color: var(--brand-orange-light) !important;
    border: var(--brand-orange-light) !important;
    border-radius: 100px 0 !important;
}

.btn-primary:hover {
    background-color: var(--brand-blue-light) !important;
}

.btn-secondary {
    background-color: var(--brand-blue) !important;
    border: var(--brand-blue-dark) !important;
    border-radius: 100px 0 !important;
}

.btn-secondary:hover {
    background-color: var(--brand-blue-dark) !important;
}

.btn-outline-light {
    border-radius: 100px 0 !important;
    color:#ffffff !important;
}

.btn-outline-light:hover {
    color: var(--brand-blue) !important;
}

.profile .profile-img {
    height: 75vw;
    max-height: 45rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ---- Floating social icons around the portrait ----------------------
   Markup: templates/index/top_content.html  (.profile-socials > a.social-float)
   Every icon is centred on its slot with translate(-50%, -50%) and then
   drifts on its own slow, off-beat path (26-44s, staggered negative
   delays), so the group reads as chaotic but never busy.
   Slots 1-8 sit on the rim of the circle; a 9th+ link falls back to the
   centre, so no admin-entered profile is ever dropped.
   --------------------------------------------------------------------- */
.profile .profile-socials {
    position: absolute;
    inset: 0;
    pointer-events: none; /* only the icons themselves are clickable */
}

.profile .social-float {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* fallback when the animation is off */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.1rem, 4.4vw, 2.9rem);
    height: clamp(2.1rem, 4.4vw, 2.9rem);
    border-radius: 50%;
    /* Light badge so the icon stays legible on both the navy and the
       orange side of the gradient, in light and dark theme alike. */
    background-color: rgba(255, 255, 255, 0.92);
    /* border: solid 2px var(--brand-blue-light); */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    pointer-events: auto;
    will-change: transform;
    animation: social-drift-1 30s ease-in-out -3s infinite;
}

/* bs_icon renders a fixed width="16" height="16" svg, so size it in CSS:
   the width/height percentages beat the presentation attributes. */
.profile .social-float svg {
    fill: var(--brand-orange) !important;
    width: 58%;
    height: 58%;
}

.profile .social-float:hover,
.profile .social-float:focus-visible {
    background-color: var(--brand-blue-light);
    border-color: var(--brand-orange);
    animation-play-state: paused;
}

/* ---- Slots (percentages of the circular container) ----
   The order zig-zags around the rim (right-upper, left-lower, upper-left,
   lower-right, ...) so that any prefix of the list — 2, 3 or 8 links — is
   spread around the portrait instead of bunching up on one side. */
.profile .social-float:nth-child(1) {
    left: 92%;
    top: 30%;
    animation: social-drift-1 30s ease-in-out -3s infinite;
}
.profile .social-float:nth-child(2) {
    left: 10%;
    top: 68%;
    animation: social-drift-2 36s ease-in-out -11s infinite;
}
.profile .social-float:nth-child(3) {
    left: 26%;
    top: 10%;
    animation: social-drift-3 27s ease-in-out -17s infinite;
}
.profile .social-float:nth-child(4) {
    left: 73%;
    top: 88%;
    animation: social-drift-4 41s ease-in-out -23s infinite;
}
.profile .social-float:nth-child(5) {
    left: 90%;
    top: 66%;
    animation: social-drift-5 33s ease-in-out -7s infinite;
}
.profile .social-float:nth-child(6) {
    left: 74%;
    top: 8%;
    animation: social-drift-6 44s ease-in-out -29s infinite;
}
.profile .social-float:nth-child(7) {
    left: 27%;
    top: 90%;
    animation: social-drift-4 39s ease-in-out -19s infinite;
}
.profile .social-float:nth-child(8) {
    left: 8%;
    top: 30%;
    animation: social-drift-1 29s ease-in-out -13s infinite;
}

/* ---- Drift paths: irregular waypoints keep the loops from reading as
   a pattern; amplitudes stay small (< 24px) so icons hug their slot. ---- */
@keyframes social-drift-1 {
    0%   { transform: translate(-50%, -50%); }
    21%  { transform: translate(calc(-50% + 15px), calc(-50% - 13px)); }
    46%  { transform: translate(calc(-50% - 9px),  calc(-50% - 21px)); }
    68%  { transform: translate(calc(-50% - 18px), calc(-50% + 9px)); }
    87%  { transform: translate(calc(-50% + 7px),  calc(-50% + 17px)); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes social-drift-2 {
    0%   { transform: translate(-50%, -50%); }
    19%  { transform: translate(calc(-50% - 17px), calc(-50% + 8px)); }
    43%  { transform: translate(calc(-50% + 5px),  calc(-50% + 20px)); }
    66%  { transform: translate(calc(-50% + 19px), calc(-50% - 12px)); }
    85%  { transform: translate(calc(-50% - 6px),  calc(-50% - 16px)); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes social-drift-3 {
    0%   { transform: translate(-50%, -50%); }
    24%  { transform: translate(calc(-50% + 9px),  calc(-50% + 19px)); }
    49%  { transform: translate(calc(-50% + 21px), calc(-50% - 6px)); }
    72%  { transform: translate(calc(-50% - 14px), calc(-50% - 15px)); }
    90%  { transform: translate(calc(-50% - 5px),  calc(-50% + 11px)); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes social-drift-4 {
    0%   { transform: translate(-50%, -50%); }
    17%  { transform: translate(calc(-50% - 12px), calc(-50% - 19px)); }
    41%  { transform: translate(calc(-50% + 16px), calc(-50% - 9px)); }
    64%  { transform: translate(calc(-50% + 11px), calc(-50% + 21px)); }
    83%  { transform: translate(calc(-50% - 20px), calc(-50% + 5px)); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes social-drift-5 {
    0%   { transform: translate(-50%, -50%); }
    26%  { transform: translate(calc(-50% + 18px), calc(-50% + 12px)); }
    52%  { transform: translate(calc(-50% - 7px),  calc(-50% + 18px)); }
    74%  { transform: translate(calc(-50% - 16px), calc(-50% - 11px)); }
    91%  { transform: translate(calc(-50% + 4px),  calc(-50% - 19px)); }
    100% { transform: translate(-50%, -50%); }
}

@keyframes social-drift-6 {
    0%   { transform: translate(-50%, -50%); }
    18%  { transform: translate(calc(-50% - 6px),  calc(-50% + 22px)); }
    45%  { transform: translate(calc(-50% - 18px), calc(-50% + 4px)); }
    69%  { transform: translate(calc(-50% + 13px), calc(-50% - 17px)); }
    88%  { transform: translate(calc(-50% + 20px), calc(-50% + 7px)); }
    100% { transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .profile .social-float,
    .profile .social-float:nth-child(1),
    .profile .social-float:nth-child(2),
    .profile .social-float:nth-child(3),
    .profile .social-float:nth-child(4),
    .profile .social-float:nth-child(5),
    .profile .social-float:nth-child(6),
    .profile .social-float:nth-child(7),
    .profile .social-float:nth-child(8) {
        animation: none;
    }
}

@media (min-width: 576px) {
    .profile {
        height: 60vw;
        width: 60vw;
    }
    .profile .profile-img {
        height: 60vw;
    }
}

@media (min-width: 768px) {
    .profile {
        height: 50vw;
        width: 50vw;
    }
    .profile .profile-img {
        height: 50vw;
    }
}

@media (min-width: 992px) {
    .profile {
        height: 40vw;
        width: 40vw;
    }
    .profile .profile-img {
        height: 40vw;
    }
}

@media (min-width: 1200px) {
    .profile {
        height: 35vw;
        width: 35vw;
    }
    .profile .profile-img {
        height: 35vw;
    }
}

@media (min-width: 1840px) {
    .profile {
        height: 25vw;
        width: 25vw;
    }
    .profile .profile-img {
        height: 25vw;
    }
}

/* ---- Language switcher forms in dropdown ---- */
.lang-form {
    margin: 0;
}
.lang-form button.dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.card-body {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
}

.card-body img {
    border-left: solid 2px var(--brand-orange);
    border-radius: 5px 0 0 5px;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
}

/* Card side image (Projects list, Skills list, Skill page, Project page).
   Fills the full card height on desktop (stretched by .align-items-stretch),
   fixed width; stacks full-width on mobile. */
.card-body img.project-card-img {
    border-left: solid 2px var(--brand-orange);
    border-radius: 5px 0 0 5px;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    width: 350px;
    max-width: 100%;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 767.98px) {
    .card-body img.project-card-img {
        width: 100%;
        /* height: 400px; */
        order: 1; /* image on top on mobile */
        border-left: none;
        border-bottom: solid 2px var(--brand-orange);
        border-radius: 5px 5px 0 0;
    }
}

.footer {
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.table {
    --bs-table-bg: var(--color-bg-secondary);
    --bs-table-color-type: var(--color-text);
}

/* ===================================================================
   Skills cloud (home page)
   -------------------------------------------------------------------
   apps/core/views.py hands each chip its randomness (size / tilt /
   vertical offset / side margin / stacking) as CSS custom properties, so
   they are consumed here instead of as inline styles — an inline
   font-size or transform could never be overridden by a media query.
   =================================================================== */
.skills-cloud {
    overflow: hidden;
    padding: 1em 1em;
    margin-bottom: 2em;
}

.skills-cloud .title-block {
    text-align: center;
    margin-bottom: 3rem;
}

.skills-cloud__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 72rem;
    margin: 0 auto;
}

.skill-chip {
    position: relative;
    display: inline-block;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: var(--chip-size, 1rem);
    text-decoration: none !important;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    max-width: 100%;
    transform: rotate(var(--chip-rot, 0deg)) translateY(var(--chip-y, 0px));
    margin: 0 var(--chip-mx, 0px);
    z-index: var(--chip-z, 0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    transition: box-shadow 150ms ease, filter 150ms ease;
}

.skill-chip:hover,
.skill-chip:focus-visible {
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    filter: brightness(1.1);
}

/* Phones and small tablets: a long name (RU "Автоматизация рабочих процессов
   с помощью ИИ", ES "Internacionalización de Django") is wider than the
   screen at up to 1.4rem, so cap the size, let the label wrap and drop the
   negative side margins + tilt that push a chip past the edge. */
@media (max-width: 767.98px) {
    .skill-chip {
        font-size: min(var(--chip-size, 1rem), 1.1rem);
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: calc(100% - 0.5rem);
        margin: 0;
        transform: rotate(calc(var(--chip-rot, 0deg) / 2)) translateY(calc(var(--chip-y, 0px) / 2));
    }
}

@media (max-width: 575.98px) {
    .skills-cloud__wrap {
        gap: 0.3rem;
        padding: 0 0.25rem;
    }

    .skill-chip {
        padding: 0.3rem 0.7rem;
        font-size: min(var(--chip-size, 1rem), 1rem);
    }
}

/* ===================================================================
   Modal & form controls — dark theme
   =================================================================== */
[data-theme="dark"] .modal-content {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text);
}

[data-theme="dark"] .modal .modal-header {
    border-bottom-color: var(--dark-border);
}

[data-theme="dark"] .modal .modal-title {
    color: var(--dark-heading);
}

[data-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--dark-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--dark-text-muted);
}

[data-theme="dark"] .form-floating > .form-control::placeholder {
    color: transparent;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--dark-bg);
    border-color: var(--brand-orange);
    color: var(--dark-text);
    box-shadow: 0 0 0 0.2rem rgba(251, 79, 20, 0.25);
}

[data-theme="dark"] .form-floating > label {
    color: var(--dark-text-muted);
}

/**/
.cookie-policy .table-responsive {
    border: solid 2px var(--brand-orange);
    border-radius: 15px;
}


/* card images at the top.
   `max-width: 768px` overlapped Bootstrap's `flex-md-row` (`min-width: 768px`)
   at a window width of exactly 768px: media queries measure the viewport
   *including* the scrollbar, so both rules applied — the card switched to a
   row while the image took `width: 100%`, filling the row and pushing
   `.title-block` (the chips) out of the `overflow-hidden` card. Use the same
   767.98px boundary as the block above so the two never overlap. */
@media (max-width: 767.98px) {

    .card-body img.project-card-img {
        width: 100%;
        border-left: none;
        border-bottom: solid 2px var(--brand-orange);
        border-radius: 5px 5px 0 0;
        order: -1; /* image on top on mobile */
    }
}

/* ===================================================================
   Main page top content
   =================================================================== */
.top-content {
    padding: 2rem 0;
    text-align: center;
}

/* ===================================================================
   Projects
   =================================================================== */
.project-list {
    padding-top: 1.25rem;    /* 20px */
    padding-bottom: 1.25rem; /* 20px */
}

.project-list .clear-filter {
    margin-top: 1em;
    padding: 0.8em 2em;
}

/* ===================================================================
   Skills list
   =================================================================== */
.skills-section {
    /* padding: 0 3rem;  */
    margin: 3rem 0;
}


.skills-section .title-block {
    margin: 3em;
}

.skills-section .title-block h2 {
    font-size: 2rem;
}

.skills-section .card-button {
    padding: 2rem;
}

.skills-section .sub-skills-block {
    padding: 1rem 2rem;
    background-color: var(--color-bg-secondary);
}

@media (max-width: 768px) {
    .skills-section {
        /* 1.5em is half of Bootstrap's `gx-5` gutter (3rem): the .row pulls
           itself out by -1.5rem on each side, so 1em of section padding let it
           hang 8px past the viewport — a sideways scroll on phones, and the
           cards' right edge got cut off. Desktop already has 3em. */
        /* padding: 0 1.5em; 
        margin: 2em 0; */
    }

    .skills-section .title-block {
        margin: 2em 2em 1em 2em;
    }

    .skills-section .card-button {
        padding: 2rem;
    }

    .skills-section .sub-skills-block {
        padding: 1em;
    }
}

/* ===================================================================
   Skill Single page
   =================================================================== */
.skill-detail .card-title {
    padding: 3em;
}

.skill-detail .card-title h1 {
    font-size: 2.75rem; 
}

.skill-detail .card-body {
    padding: 3em;
}

@media (max-width: 575.98px) {
    .skill-detail .card-title {
        padding: 1.5em;
    }

    .skill-detail .card-title h1 {
        font-size: 2rem; 
    }

    .skill-detail .card-body {
        padding: 1.5em;
    }

}


/* ===================================================================
   Call-to-action button in project list and about page
   =================================================================== */
.i-flying {
    /* background-color: rgba(26, 58, 92, 0.2);
    border: solid 2px var(--brand-blue); */
    border-radius: 30%;
    padding: 10px;
}

.flying-icons svg{
    fill: var(--brand-orange) !important;  
    font-size: 20px !important;
}

/* ===================================================================
   About p class
   =================================================================== */
.about p.p-about {
    font-family: var(--font-special-alt);
    font-size: 70px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: italic;
    text-shadow: 2px 4px 2px var(--brand-orange-light);

    /* ⏬ INCREASE THIS VALUE TO ADD LINE SPACING ⏬ */
    line-height: 1.15; 
  
    /* Keeps the horizontal letters tightly squeezed */
    letter-spacing: -2px;

    margin: 20px 0;
    border-bottom: solid 10px var(--brand-orange-line);
    border-top: solid 10px var(--brand-orange-line);
}

@media (max-width: 768px) {
    .about p.p-about {
        font-size: 50px;
        letter-spacing: -2px;
    }
}

@media (max-width: 575.98px) {
    .about p.p-about {
        font-size: 30px;
        letter-spacing: -1px;
    }
}



/* ===================================================================
   Call-to-action button in project list and about page
   =================================================================== */
.call-to-action-section {
    color: var(--white);
    padding: 2rem 0 2rem 0;
}


.call-to-action-section h2 {
    font-family: var(--font-special-alt);
    font-size: 70px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 3rem;
    text-shadow: 2px 4px 2px #e3d2ca;
    line-height: 1.15;
    letter-spacing: -2px;
}


.call-to-action-section  .call-to-action {
    padding: 1rem 2rem;
}

.call-to-action-section  .call-to-action:hover {
    background-color: var(--brand-blue-light) !important;
}

@media (max-width: 768px) {
    .call-to-action-section h2 {
        font-size: 50px;
        letter-spacing: -1px;
    }
}