/* -------------------------------------------------------------
   Global Typographic Scale & Variables
   ------------------------------------------------------------- */
:root {
    /* 1. Adjust the fluid clamp floor/ceiling slightly to hit your target 10-word measure for any new typeface */
    --main-font-size: clamp(0.8rem, 0rem + 3vw, 1.12rem);

    /* 2. Update the cap-height ratio of your new typeface */
    --font-cap-ratio: 0.67;

    /* Leave these untouched - the math automatically handles the rest. */
    --main-lh: 1.3;
    --header-multiplier: calc(1 + (var(--main-lh) / var(--font-cap-ratio)));
    --header-font-size: calc(var(--main-font-size) * var(--header-multiplier));

    /* Base Grid System Tokens */
    --grid-unit: 182px;
    --content-width: calc(var(--grid-unit) * 3); /* 546px */
    --medium-width: calc(var(--grid-unit) * 4);  /* 728px */
    --column-width: calc(var(--grid-unit) * 5);  /* 910px */

}

html, body {
    overflow-x: hidden;
}

/* -------------------------------------------------------------
   Font Definitions
   ------------------------------------------------------------- */
@font-face {
    font-family: MainFont;
    src: url('../fonts/1.otf');
    font-display: block;
} 
@font-face {
    font-family: HeaderFont;
    src: url('../fonts/2.otf');
    font-display: block;
} 
@font-face {
    font-family: SubHeaderFont;
    src: url('../fonts/3.otf');
    font-display: block;
} 
@font-face {
    font-family: UIFont;
    src: url('../fonts/4.otf');
    font-display: block;
}

/* -------------------------------------------------------------
   Global Base Typography
   ------------------------------------------------------------- */
h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: HeaderFont;
    font-size: var(--header-font-size);
    line-height: 1em;
    font-weight: normal;
    letter-spacing: -0.025em;
    color: #2d4a64;
}

h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: SubHeaderFont;
    font-size: calc(var(--main-font-size) * 1.5 * var(--main-lh));
    line-height: var(--main-lh);
    font-weight: normal;
}

/* -------------------------------------------------------------
   Global Responsive Utilities
   ------------------------------------------------------------- */
@media screen and (min-width: 601px) {
    .mobile-only {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    .tablet-down-only {
        display: none !important;
    }
}

/* -------------------------------------------------------------
   Breadcrumbs Styling
   ------------------------------------------------------------- */
.breadcrumbs_text1 {
    font-family: UIFont;
    font-size: 0.875rem;
    letter-spacing: -0.025em;
    line-height: 1.2em;
    color: #2d4a64;
}

@media screen and (min-width: 1025px) {
    .breadcrumbs_text1 {
        font-size: 1rem;
    }
}

.breadcrumbs_link1:link,
.breadcrumbs_link1:visited {
    color: #96a4b1;
    font-family: UIFont;
    text-decoration: none;
}

.breadcrumbs_link1:hover {
    color: #afd141;
    font-family: UIFont;
    text-decoration: none;
}

.typewriter {
    display: inline-block;
    color: #051736;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    animation: typing 3s steps(30, end) forwards;
    -webkit-animation: typing 3s steps(30, end) forwards;
}

@keyframes typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@-webkit-keyframes typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

#line0 { animation: typing 1.5s steps(53, end) forwards; -webkit-animation: typing 1.5s steps(53, end) forwards; }
#line1 { animation: typing 1.5s steps(30, end) forwards; -webkit-animation: typing 1.5s steps(30, end) forwards; }
#line2 { animation: typing 1.5s steps(30, end) forwards; animation-delay: 1.5s; -webkit-animation: typing 1.5s steps(30, end) forwards; -webkit-animation-delay: 1.5s; }
#line3 { animation: typing 1s steps(24, end) forwards; animation-delay: 3s; -webkit-animation: typing 1s steps(24, end) forwards; -webkit-animation-delay: 3s; }
#line4a { animation: typing 1s steps(24, end) forwards; animation-delay: 3s; -webkit-animation: typing 1s steps(24, end) forwards; -webkit-animation-delay: 3s; }
#line4b { animation: typing 1s steps(24, end) forwards; animation-delay: 4s; -webkit-animation: typing 1s steps(24, end) forwards; -webkit-animation-delay: 4s; }
#line4c { animation: typing 1s steps(24, end) forwards; animation-delay: 5s; -webkit-animation: typing 1s steps(24, end) forwards; -webkit-animation-delay: 5s; }
#line5  { animation: typing 1s steps(24, end) forwards; animation-delay: 6s; -webkit-animation: typing 1s steps(24, end) forwards; -webkit-animation-delay: 6s; }
#progress-bar1 { animation: typing 1s steps(24, end) forwards; animation-delay: 7s; -webkit-animation: typing 1s steps(24, end) forwards; -webkit-animation-delay: 7s; }
#line6  { animation: typing 1s steps(24, end) forwards; animation-delay: 7s; -webkit-animation: typing 1s steps(24, end) forwards; -webkit-animation-delay: 7s; }

/* -------------------------------------------------------------
   Site Backgrounds
   ------------------------------------------------------------- */
.noise_background1 {
    background-color: rgba(33,56,75,1);
    background-blend-mode: screen;
    background-image: url("../../images/noise-transparent.png");
    opacity: 1;
    background-attachment: fixed;
    background-position: center;
}

.bg-dot-grid {
    background-color: rgba(250,250,250,1);
    background-blend-mode: multiply;
    background-image: url("../../images/bg-dot-grid.png");
    background-attachment: fixed;
    background-position: center;
}

/* -------------------------------------------------------------
   Standard Body Text Links
   ------------------------------------------------------------- */
a:link,
a:visited {
    color: #2d4a64;
    font-family: SubHeaderFont;
}
a:hover {
    color: #afd141;
    font-family: SubHeaderFont;
}

a.link-dark:link,
a.link-dark:visited {
    color: #afd141;
    text-decoration: underline;
    transition: filter 0.2s ease;
}

a.link-dark:hover,
a.link-dark:focus {
    color: #afd141;
    filter: brightness(120%);
}

/* -------------------------------------------------------------
   Global Page Transitions
   ------------------------------------------------------------- */
.page-transition-dark,
.page-transition-light {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    animation: fadeOut 1s ease forwards;
}

/* Dark variant (for hero/dark banner pages like melbourne-graphic-design.php) */
.page-transition-dark {
    background: #110a19;
}

/* Light variant (for light content pages like index.php) */
.page-transition-light {
    background: #fafafa;
}

@keyframes fadeOut {
    from { 
        opacity: 1; 
    }
    to { 
        opacity: 0; 
        visibility: hidden; 
    }
}