/*
Theme Name: zaxidna
Author: zaxidna.pro
Author URI: http://zaxidna.pro
Version: 1.0
*/

/* ===== Fonts =====================================================
   DEFAULT PAIRING
     Headings : Bricolage Grotesque – characterful modern display,
                distinctive without being loud. (Google Fonts)
     Body     : Pretendard – the de-facto modern Korean web font.
   Switch pairings by changing --font-head below (imports for each
   option are listed underneath). Slanted headings via .text-slant.
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* --- Alternative heading imports (uncomment one + set --font-head) ---
   A) Unbounded – max K-Pop / poster energy (Google, Ukrainian foundry):
      @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&display=swap');
      --font-head: "Unbounded", sans-serif;
   B) Clash Display – premium display WITH true italics (Fontshare):
      @import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');
      --font-head: "Clash Display", sans-serif;
   C) Fraunces – editorial K-beauty serif, gorgeous real italics (Google):
      @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600..800;1,9..144,600..800&display=swap');
      --font-head: "Fraunces", serif;   (then real italic headings: font-style:italic)
   ------------------------------------------------------------------- */

/* ===== Korean-inspired palette ===================================
   navy  – trust / academic  (Taegukgi blue)
   coral – K-Wave energy / CTA (Taegukgi red, softened)
   blush – soft K-beauty highlight
   ---------------------------------------------------------------- */
:root {
        --k-ink:       #17233A;   /* body text             */
        --k-navy:      #0B3D91;   /* primary deep blue      */
        --k-navy-700:  #0A2F6E;   /* dark sections / footer */
        --k-coral:     #E63A4F;   /* accent / CTA           */
        --k-coral-600: #C92C40;   /* accent hover           */
        --k-blush:     #FF8FA3;   /* soft highlight         */
        --k-paper:     #F5F8FC;   /* page background        */

        --font-head: "Bricolage Grotesque", "Montserrat", sans-serif;
        --font-body: "Pretendard", "Pretendard Variable", -apple-system,
                     "Noto Sans KR", "Segoe UI", sans-serif;
}

html {
        font-size: 96%;
        scroll-behavior: smooth;
}

body {
        font-family: var(--font-body);
        font-weight: 400 !important;
        font-style: normal;
        color: var(--k-ink);
        background-color: var(--k-paper);
        -webkit-font-smoothing: antialiased;
}


/* Headings share one bold display face (see --font-head) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.display-1, .display-2, .display-3, .display-4,
thead th {
        font-family: var(--font-head);
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: -0.015em;
}

h1, .h1, .display-1, .display-2 {
        font-weight: 800;
}

/* Slanted headline accent (works with any font, incl. non-italic ones).
   Add class="text-slant" to an eyebrow, word, or heading for dynamic tilt. */
.text-slant {
        display: inline-block;
        transform: skewX(-9deg);
}

/* Small overline label above headings */
.eyebrow {
        display: inline-block;
        font-family: var(--font-head);
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: .78rem;
        color: var(--k-coral);
}


h6, .h6 {
}

small, .small {
        font-size: 88%;
}

.fw-400 {
        font-weight: 400 !important;
}

.fw-700 {
        font-weight: 700 !important;
}

img {
        max-width: 100%;
}

figure {
        margin-bottom: 0 !important;
}

.rotate-45 {
        transform: rotate(45deg);
}


img {
        max-width: 100%;
}

.table thead th {
        vertical-align: top;
        font-size: 1.125rem;
        font-weight: 700 !important;
        color: var(--k-navy);
        border-bottom: .35rem solid var(--k-coral);
}

.table td strong {
        font-weight: 600 !important;
        font-size: 1.15rem;
}

.bg-primary {
        background: var(--k-coral) !important;
}

.bg-secondary {
        background-color: var(--k-navy) !important;
}

.bg-primary a, .bg-secondary a, .bg-dark a {
        color: #fff !important;
}

.bg-dark {
        background-color: var(--k-navy-700) !important;
}

.bg-light {
        background-color: var(--k-paper) !important;
}

.text-primary {
        color: var(--k-coral) !important;
}

.text-light {
        color: var(--k-paper) !important;
}


.text-uppercase {
        letter-spacing: .065rem;
}

hr, .border-top, .border {
        border-color: rgba(0, 0, 0, 0.15) !important;
        opacity: 1;
}

a {
        color: #313131;
        text-decoration: none !important;
        transition: .25s;
}

a:focus, button {
        outline: none !important;
}

article a {
        color: var(--k-coral);
        font-weight: 400;
}

a:hover {
        color: var(--k-coral);
        text-decoration: none;
        transition: .25s;
}

a[href^="tel:"] {
        white-space: nowrap;
}

.btn {
        border-radius: 0;
        box-shadow: none !important;
        outline: 0 !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        transition: .25s;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: .065rem;
        font-size: 1.125rem;
}

.btn-primary {
        background: var(--k-coral);
        border: 0 !important;
        color: #fff;
        transition: all 0.25s ease-in-out;
        -webkit-transition: all 0.25s ease-in-out;
}

.btn-primary:hover, .btn-primary:focus, .open>.dropdown-toggle.btn-primary {
        background: var(--k-coral-600);
        box-shadow: none !important;
        color: #fff !important;
}

.btn-primary:active, .btn-primary.active {
        box-shadow: none !important;
        color: #fff !important;
}

.btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #616161;
}






.logo img {
        width: 9rem;
}

.logo-lg img {
        width: 12rem;
}

header {
        z-index: 99;
        position: relative;
}

header a {
        text-decoration: none !important;
}

header .rounded-50 {
        background-color: rgba(255, 255, 255, 0.125);
}

header .navbar {
        display: block;
}

header .navbar-toggler {
        border: 0 !important;
        padding: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
}

header .navbar-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%28255, 255, 255, 1%29' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

header .navbar-nav .nav-link {
        color: #fff !important;
        white-space: nowrap;
        font-size: 1.125rem;
        padding-top: .275rem;
        padding-bottom: .275rem;
        box-shadow: none !important;
}

header .navbar-nav .nav-link:focus, header .navbar-nav .nav-link:hover {
        background-color: transparent;
        color: var(--k-coral) !important;
}

header .navbar-nav .active > .nav-link, header .navbar-nav .nav-link.active, header .navbar-nav .nav-link.show, header .navbar-nav .show > .nav-link {
        background-color: transparent;
}

header .dropdown-menu[data-bs-popper] {
        border-top: .325rem solid var(--k-coral) !important;
        border: 0;
        border-radius: 0;
}

header .dropdown-menu .dropdown-item {
        color: #212121 !important;
        font-weight: 600;
}

header .dropdown-menu .dropdown-item:focus, header .dropdown-menu .dropdown-item:hover {
        color: var(--k-coral) !important;
        background-color: transparent !important;
}

header .dropdown-item.active, header .dropdown-item:active {
        color: var(--k-coral) !important;
        background-color: transparent !important;
}

header .border-end {
        border-color: rgba(255, 255, 255, 0.225) !important;
        opacity: 1;
}

header .language {
        font-size: 1.125rem;
}

header .current-lang {
        display: none !important;
}


section.cover-hero {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        position: relative;
        display: block;
	      transition: .25s;
        background-image: url("images/hero_v.avif");
        background-size: cover;
        background-position: 50% 85%;
}

section.cover-hero .mask-dark {
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: 2;
        /* Subtle left-side shade so the white text stays readable over
           the photo. Navy tint (palette) instead of flat black keeps it
           soft and on-brand; fades out before the student on the right. */
        background: linear-gradient(
          90deg,
          rgba(10, 25, 55, 0.68) 0%,
          rgba(10, 25, 55, 0.42) 40%,
          rgba(10, 25, 55, 0.08) 72%,
          rgba(10, 25, 55, 0)    90%
        );
}

section.cover-hero .intro {
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3;
}









article ul li + li {
        margin-top: .25rem;
}

article ul {
        padding-left: 1.25rem;
        margin-left: 0;
}

article ul li::marker {
      color: var(--k-coral);
}

article .table td strong {
        font-weight: 600;
}


article .wp-block-column p {
        font-weight: 600;
}

article .wp-block-column img {
        width: 8rem;
}

article .wp-block-table {
        overflow: hidden !important;
}

article hr {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
}

article.pp-0 p {
        margin: 0 !important;
}


article .wp-block-file__embed {
        margin-bottom: .5rem;
        height: 100vh !important;
}

article .wp-block-file__button, .zdownload .wp-block-file__button {
        transition: 0s;
}

.corporate-items img {
        height: 1.5rem;
}

section.features .border-start {
        border-left: .15rem solid #212121 !important;
}

section.production-img {
        overflow: hidden;
}

section.production-img .img-fix {
        margin: 0 -33%;
}

.vline {
        border-left: .15rem solid #212121;
        width: 0;
        margin: 0 auto;
}

.form-control, .form-select {
        box-shadow: none !important;
        border-radius: 0;
        background-color: transparent;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: .125rem solid #212121;
        padding-left: 0 !important;
        font-weight: 300 !important;
}

.form-control:focus, .form-select:focus {
        background-color: transparent;
        border-bottom: .125rem solid var(--k-coral);
}

.form-group > div {
        position: relative;
}

.help-block {
        display: none;
}

/*
.wpcf7-form p {
        margin-bottom: 0;
}
*/

.wpcf7-not-valid-tip {
        display: none !important;
}

.wpcf7-not-valid {
        border-bottom: .125rem solid #eb0045 !important;
}


.wpcf7-checkbox > span {
        display: block;
}

.wpcf7-checkbox label {
        margin-bottom: 0;
}

.wpcf7-checkbox.has-error label {
        color: #e3000f;
}

.wpcf7 .wpcf7-form .form-check-input {
        margin-right: .25rem;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: .15rem solid #212121;
        background-color: transparent;
}

.wpcf7 .wpcf7-form .form-check-input:focus {
        border-color: var(--k-coral);
}

.wpcf7 .wpcf7-form .form-check-input:checked {
        background-color: var(--k-coral);
        border-color: var(--k-coral);
        box-shadow: none !important;
}

textarea.form-control {
        height: 5rem;
        resize: none;
}

span.wpcf7-list-item {
        margin: 0 0 .25rem 0 !important;
}

span.wpcf7-list-item-label {
        font-weight: 300;
}

.wpcf7 form .wpcf7-response-output {
        margin: 1rem 0 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: #e3000f;
}


.wpcf7 .wpcf7-spinner {
        display: none;
}

::placeholder {
        color: #4c4c4c;
        opacity: 1;
}

:-ms-input-placeholder {
        color: #616161;
}

::-ms-input-placeholder {
        color: #616161;
}


.clearfix {
       clear: both;
}




div.divider {
        border-top: .15rem solid #212121;
}


section.gmap {
        margin-bottom: -6rem;
        position: relative;
        overflow: hidden;
}

 section.gmap iframe {
        height: 33rem;
 }

section.gmap::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3rem;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(
          to bottom,
          rgba(0,0,0,0.125),
          rgba(0,0,0,0)
        );
}


footer .zaxidna svg {
        width: 3.6rem;
}


footer hr, footer .border-top, footer .border {
        border-color: rgba(255, 255, 255, 0.225) !important;
        opacity: 1;
}










@media (min-width: 576px) {


}


@media (min-width: 768px) {

section.production-img .img-fix {
        margin: 0 -25%;
}

}


@media (min-width: 992px) {


.logo img {
        width: 12rem;
}

.logo-lg img {
        width: 15rem;
}


header .dropdown-item {
        white-space: nowrap;
}

header .navbar-nav .nav-link {
        padding-left: 0 !important;
        padding-right: 1rem !important;
}

header .navbar-nav > .nav-item + .nav-item {
        margin-left: .5rem;
}

header .dropdown-item {
        padding: .25rem 1.5rem;
}

section.cover-hero {
        background-image: url("images/hero_h.avif");
}

section.cover-hero .mask-dark {
        /* Wider photo on desktop: lighter shade that fades earlier so the
           student on the right stays fully clear. */
        background: linear-gradient(
          90deg,
          rgba(10, 25, 55, 0.62) 0%,
          rgba(10, 25, 55, 0.34) 35%,
          rgba(10, 25, 55, 0.06) 62%,
          rgba(10, 25, 55, 0)    80%
        );
}

section.cover-hero .fs-4 {
        font-size: 1.75rem !important;
}

section.cover-hero .btn, section.services h6 {
        font-size: 1.25rem !important;
}

section.production-img .img-fix {
        margin: 0;
}

}


@media (min-width: 1200px) {


section.side .vline {
        border-left: .1rem solid rgba(0, 0, 0, 0.15) !important;
}

.logo img {
        width: 12rem;
}

.logo-lg img {
        width: 18rem;
}

.btn {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
        font-size: 1.25rem;
}

header .navbar-nav .nav-link {

}

header .navbar-nav > .nav-item + .nav-item {
        margin-left: .5rem;
}


}

@media (min-width: 1400px) {


}


/* =================================================================
   Scroll-reveal animation (ally-style) + track cards + anchor
   ================================================================= */

/* Smooth-scroll anchor target: keep a little breathing room from top */
#programs {
        scroll-margin-top: 2rem;
}

/* ----- Scroll reveal --------------------------------------------
   Add data-reveal to any element. Optional direction:
   data-reveal="up" (default) | "left" | "right" | "zoom".
   Optional stagger via inline style="--reveal-delay:.12s".
   JS (footer.php) toggles .is-visible when the block enters view. */
[data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                    transform .7s cubic-bezier(.22,.61,.36,1);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, transform;
}

[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"]  { transform: scale(.94); }

[data-reveal].is-visible {
        opacity: 1;
        transform: none;
}

/* Never hide content if JS is off or motion is reduced */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        [data-reveal] {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
        }
}

/* ----- Track cards (плашки) -------------------------------------- */
.track-card {
        position: relative;
        background: #fff;
        border: 1px solid rgba(11, 61, 145, 0.08);
        border-radius: 1.5rem;
        box-shadow: 0 1px 2px rgba(23, 35, 58, 0.04),
                    0 22px 45px -28px rgba(11, 61, 145, 0.28);
        overflow: hidden;
        transition: transform .4s cubic-bezier(.22,.61,.36,1),
                    box-shadow .4s cubic-bezier(.22,.61,.36,1);
}

.track-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 4px 10px rgba(23, 35, 58, 0.06),
                    0 34px 60px -26px rgba(11, 61, 145, 0.38);
}

/* Coral accent rail that grows on hover */
.track-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: .35rem; height: 100%;
        background: linear-gradient(var(--k-coral), var(--k-blush));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

.track-card:hover::before { transform: scaleY(1); }

.track-card img {
        display: block;
        width: 100%;
        border-radius: 1rem;
        transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.track-card:hover img { transform: scale(1.03); }

/* Card link picks up the coral accent + arrow nudge on hover */
.track-card .card-link {
        color: var(--k-navy);
        font-weight: 700;
}

.track-card:hover .card-link {
        color: var(--k-coral);
}

.track-card .card-link i {
        transition: transform .3s ease;
}

.track-card:hover .card-link i {
        transform: translateX(.35rem);
}