/* ===== pakhomov.eu theme - redesign 'Navy classic' (variant A), October 2026 =====
   Loaded after style.css and overrides it: fonts, colours, spacing, and the phone layout.
   Colours and fonts are set once in :root below. Font: Source Sans 3 (SIL Open Font License, see fonts/OFL.txt),
   stored on this site, so browsers do not contact Google for it. */

:root {
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif; --font-head: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --fs: 16px; --lh: 1.6;
  --page-bg: #E8ECF1; --card-bg: #FFFFFF; --text: #1F2A37; --muted: #5B6676; --heading: #0B2545; --accent: #1D4E89; --link: #1D4E89; --rule: #D6DCE4;
  --side-bg: #0B2545; --side-text: #FFFFFF; --side-muted: #A9B9CE; --side-heading: #FFFFFF; --side-link: #FFFFFF; --side-rule: #2A4A73; --side-accent: #8FB3DA; --side-track: #1C3A63;
  --switch-bg: #FFFFFF; --switch-border: #C9D2DE; --switch-active-bg: #0B2545; --switch-active-text: #FFFFFF;
  --photo-cover-bg: #1C3A63;
  --radius: 10px; --shadow: 0 6px 24px rgba(11, 37, 69, .12); --frame: 0;
}

@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/source-sans-3-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }

/* ---- header: title + level switch ---- */
header { background: var(--page-bg); }
.into-header { width: auto; max-width: 1100px; padding: 40px 20px 0; }
.into-header h1 { font-family: var(--font-head); font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--heading); letter-spacing: .02em; }
.into-header h2 { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.main_tabs_div { width: auto; margin: 22px auto 30px; text-align: center; }
.tabs {
  position: static; left: 0; top: 0; display: inline-flex; gap: 2px; padding: 4px;
  background: var(--switch-bg); border: 1px solid var(--switch-border); border-radius: 999px; overflow: visible;
}
.tabs li {
  float: none; width: auto; min-width: 104px; border: 0 !important; border-radius: 999px;
  padding: 7px 18px; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--muted); background: transparent;
  transition: background-color .2s, color .2s;
}
.tabs li:hover { color: var(--heading); }
.tabs li.active { background: var(--switch-active-bg); color: var(--switch-active-text); }

/* ---- two columns ---- */
.wrapper { width: auto; max-width: 1100px; margin: 0 auto 56px; padding: 0 20px; box-sizing: border-box; }
.container { display: flex; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); border: var(--frame); background: var(--card-bg); }
.leftbar { float: none; flex: 0 0 300px; width: 300px; background: var(--side-bg); color: var(--side-text); padding: 30px 0 24px; box-sizing: border-box; }
.content { float: none; flex: 1 1 auto; width: auto; min-width: 0; background: var(--card-bg); text-align: left; padding: 30px 40px 40px 34px; box-sizing: border-box; }

/* ---- left column ---- */
.name h2 { font-family: var(--font-head); font-size: 25px; line-height: 1.2; font-weight: 700; color: var(--side-heading); padding: 0 24px 18px; }
.image-name { padding-bottom: 14px; }
.photo-cover-wrap { display: block; width: 200px; max-width: 72%; margin: 0 auto; border-radius: 10px; overflow: hidden; }
.photo-cover-wrap img, #photo-img { width: 100% !important; display: block; }
.photo-cover { background: var(--photo-cover-bg) !important; font-size: 14px; letter-spacing: .02em; }
.photo-note { color: var(--side-muted); font-size: 12px; margin-top: 8px; }
.wrapper-address, .wrapper-email, .wrapper-linkedin, .wrapper-location { padding: 0 28px 14px; color: var(--side-text); }
.wrapper-address h3, .wrapper-email h3, .wrapper-location h3 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--side-muted); margin-bottom: 2px;
}
.wrapper-address p, .wrapper-email p, .wrapper-location p { font-size: 15px; word-break: break-word; }
.wrapper-linkedin h3 { font-size: 15px; font-weight: 600; }
.wrapper-linkedin a, .image-name h3 a { color: var(--side-link); text-decoration: underline; text-underline-offset: 3px; }
.leftbar .wraper-solid { width: auto; margin: 6px 28px 16px !important; border: 0; height: 1px; background: var(--side-rule); }
.leftbar .faq-title { background-color: transparent; color: var(--side-text); }
.leftbar .faq_plus, .leftbar .minus { color: var(--side-text); left: 28px; }
.leftbar .work-table-1, .leftbar .test3 { left: 0; width: auto; margin-left: 46px; color: var(--side-text); font-size: 15px; font-weight: 600; }
.leftbar .question-skills { color: var(--side-text); padding: 6px 28px 0; margin: 0; font-size: 14px; }
.leftbar #software-skills { color: var(--side-muted); font-size: 13px; }
.leftbar .ui-widget-content { background: var(--side-track); border: 0; }
.leftbar .ui-widget-header { background: var(--side-accent); border: 0; }
.leftbar .ui-progressbar { height: 6px; border-radius: 3px; margin: 3px 0 0; }

/* ---- right column: summary ---- */
.wrap-class-1 ul { margin-top: 0; }
.wrap-class-1 ul li { padding: 0 0 10px; }
.wrap-class-1 ul li h4 { font-size: 16px; font-weight: 400; line-height: var(--lh); color: var(--text); text-align: left; }
.wrap-class-1 ul li:first-child h4 { font-size: 17px; font-weight: 600; color: var(--heading); }

/* ---- section headings and rules ---- */
.content .my-line-1 { position: static; width: 100% !important; height: 1px; border: 0; margin: 0; background: var(--rule); }
.wrap-zag-1 { padding: 22px 0 10px; }
.wrap-zag-1 .my-line-1:first-child { display: none; }
.wrap-zag-1 h3, .content h3.education, .content h3.hobbies {
  font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: .08em; color: var(--heading);
  padding: 0 0 8px; position: static;
}
.wrap-zag-1 .my-line-1.line-2, .content .line-4, .content .line-6 { height: 2px; background: var(--accent); }
.content .otstup-zag { margin: 0; padding: 22px 0 10px; }
.content .line-3, .content .line-5 { display: none; }
.content .treinings > .faq__item > .work-table-1 { margin-top: 22px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.content .treinings > .faq__item > .work-table-1 h4 { font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: .08em; color: var(--heading); }
.content .treinings > .faq__item > .faq-title .faq_plus { top: 4px; }
.content .treinings > .faq__item > .faq-title .minus { top: 1px; }

/* ---- rows: + date | title ---- */
.content .faq__item { padding-bottom: 8px; }
.content .black { font-size: 15px !important; color: var(--accent) !important; background: transparent !important; padding: 0 !important; }
.content .faq_plus, .content .minus { color: var(--accent); font-weight: 700; left: 0; }
.content .faq_plus { top: 0; font-size: 16px; }
.content .minus { top: -2px; font-size: 20px; }
.content .work-table-1 { position: static; left: 0; width: auto; margin-left: 22px; display: flex; gap: 18px; }
.content .work-table-1 > div:first-child { float: none; flex: 0 0 150px; width: 150px; color: var(--muted); font-size: 14px; line-height: 1.5; padding-top: 1px; }
.content .work-table-1 > div:last-child { float: none; flex: 1 1 auto; width: auto; padding-left: 0; }
.content .work-table-1 h4 { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--text); }
.target, .content .work-table-1 a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- expanded details ---- */
.faq-content { font-size: 15px; padding: 8px 0 6px 22px; }
.content .faq-content p { margin: 4px 0; line-height: var(--lh); }
.text-about-work h4 { font-size: 15px; font-weight: 600; color: var(--heading); margin-top: 10px; }
.q13, .question-skills, .black-content, #question-5 p { font-size: 15px !important; }
.q13 .q13 .q13 p { width: auto; }
.align-text { padding: 8px 0; }
.eu { font-family: var(--font-body); font-size: 13px; }

/* ---- certificate thumbnails ---- */
.image-about p { margin-bottom: 14px; }
.i { width: 180px; border-radius: 6px; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }

/* ===== phone and small tablet ===== */
@media (max-width: 860px) {
  .into-header { padding-top: 24px; }
  .into-header h1 { font-size: 28px; }
  .into-header h2 { font-size: 11px; letter-spacing: .12em; }
  .main_tabs_div { margin: 16px auto 20px; }
  .tabs li { min-width: 0; padding: 7px 15px; }
  .wrapper { padding: 0 10px; margin-bottom: 32px; }
  .container { flex-direction: column; border-radius: calc(var(--radius) * .7); }
  .leftbar { flex: none; width: auto; padding: 22px 0 10px; }
  .name h2 { text-align: center; font-size: 23px; padding-bottom: 14px; }
  .photo-cover-wrap { width: 150px; }
  .wrapper-address, .wrapper-email, .wrapper-linkedin, .wrapper-location { padding: 0 22px 12px; }
  .leftbar .wraper-solid { margin: 4px 22px 12px !important; }
  .leftbar .faq_plus, .leftbar .minus { left: 22px; }
  .leftbar .work-table-1, .leftbar .test3 { margin-left: 40px; }
  .content { padding: 22px 18px 28px; }
  .wrap-class-1 ul li h4 { font-size: 15.5px; }
  .wrap-class-1 ul li:first-child h4 { font-size: 16px; }
  .content .work-table-1 { flex-direction: column; gap: 0; }
  .content .work-table-1 > div:first-child { flex: none; width: auto; font-size: 13.5px; }
  .faq-content { padding-left: 22px; }
  .i { width: 150px; }
}