/* ============================================================
   DEFAULT MINI-SITE — THEME / LAYOUT CONTROL
   Edit values in :root to theme the site.
   Each variable controls one explicit visual role.
   ============================================================ */
:root {
    /* Page / canvas */
    --page-background-color: #6f8ba0;

    /* Hero / presentation */
    --hero-section-background-color: #4f6575;
    --hero-section-text-color: #ffffff;

    /* Company information sections */
    --company-section-background-color: #6f8ba0;
    --company-section-text-color: #ffffff;

    /* Alternate content sections */
    --alternate-section-background-color: #efb341;
    --alternate-section-text-color: #25343f;

    /* Financial statements sections */
    --financial-section-background-color: #e8e8e8;
    --financial-section-text-color: #334957;

    /* Contact / form / social sections */
    --contact-section-background-color: #6f8ba0;
    --contact-section-text-color: #ffffff;

    /* Primary buttons / actions */
    --primary-action-background-color: #efb341;
    --primary-action-text-color: #25343f;
    --primary-action-hover-background-color: #ffffff;
    --primary-action-hover-text-color: #334957;

    /* Hero navigation links */
    --hero-navigation-link-color: #f4f4f4;
    --hero-navigation-icon-color: #cccccc;
    --hero-navigation-hover-color: #ffffff;

    /* Rules / separators */
    --heading-rule-color: #efb341;
    --separator-on-dark-color: rgba(255,255,255,.20);
    --separator-on-light-color: rgba(0,0,0,.16);

    /* Financial statements popup */
    --modal-backdrop-color: rgba(0,0,0,.72);
    --modal-background-color: #f2f2f2;
    --modal-text-color: #222222;

    /* Optional media modules */
    --media-overlay-background-color: rgba(45,45,45,.82);
    --media-overlay-text-color: #ffffff;
    --video-panel-background-color: #303030;
    --video-placeholder-text-color: #eeeeee;

    /* Credits */
    --credits-background-color: #6f8ba0;
    --credits-text-color: #ffffff;
    --credits-padding: .40rem .85rem;

    /* Layout */
    --content-panel-padding: 50px;
    --hero-navigation-gap: 20px; /* Lower value moves links closer to presentation copy. */

    /* Map shadow control — set either value to none to disable that side. */
    --map-left-shadow: -12px 0 22px rgba(0,0,0,.16);
    --map-right-shadow: 12px 0 22px rgba(0,0,0,.16);

    /* Typography */
    --site-font-family: var(--google-font);
}

/* ---------- Global typography / page ---------- */
body, input, textarea, select, button, .button,
h1, h2, h3, h4, h5, h6, p, a, label, li, small, .copyright {
    font-family: var(--site-font-family) !important;
}
body, #page-wrapper { background: var(--page-background-color) !important; }

/* ---------- Explicit section-to-variable mapping ---------- */
#arxi > .content,
.hero-section {
    background-color: var(--hero-section-background-color) !important;
    color: var(--hero-section-text-color) !important;
}
#arxi h1, #arxi h2, #arxi h3, #arxi p, #arxi strong {
    color: var(--hero-section-text-color) !important;
}

.company-section,
.company-section > .intro,
.company-section > .inner {
    background-image: none !important;
    background-color: var(--company-section-background-color) !important;
    color: var(--company-section-text-color) !important;
}
.company-section h1, .company-section h2, .company-section h3,
.company-section p, .company-section li, .company-section strong,
.company-section a, .company-section label {
    color: var(--company-section-text-color) !important;
}

.alternate-section,
.alternate-section > .intro,
.alternate-section > .inner {
    background-image: none !important;
    background-color: var(--alternate-section-background-color) !important;
    color: var(--alternate-section-text-color) !important;
}
.alternate-section h1, .alternate-section h2, .alternate-section h3,
.alternate-section p, .alternate-section li, .alternate-section strong,
.alternate-section a, .alternate-section label {
    color: var(--alternate-section-text-color) !important;
}

.financial-section,
.financial-section > .intro,
.financial-section > .inner {
    background-image: none !important;
    background-color: var(--financial-section-background-color) !important;
    color: var(--financial-section-text-color) !important;
}
.financial-section h1, .financial-section h2, .financial-section h3,
.financial-section p, .financial-section li, .financial-section strong,
.financial-section a, .financial-section label {
    color: var(--financial-section-text-color) !important;
}
.financial-section .statement-list li { border-color: var(--separator-on-light-color); }

/* IMPORTANT: the contact section is #contact / .contact-section.
   These variables directly control Contact details, Form and Social panels. */
.contact-section,
.contact-section > .intro,
.contact-section > .inner,
.contact-section .contact-combined-panel {
    background-image: none !important;
    background-color: var(--contact-section-background-color) !important;
    color: var(--contact-section-text-color) !important;
}
.contact-section h1, .contact-section h2, .contact-section h3,
.contact-section p, .contact-section li, .contact-section strong,
.contact-section a, .contact-section label {
    color: var(--contact-section-text-color) !important;
}

/* ---------- Standard panel geometry ---------- */
.panel > .intro,
.panel > .inner,
#arxi > .content {
    box-sizing: border-box;
    padding: var(--content-panel-padding) !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
}
.panel > .inner.columns { align-items: flex-start !important; }
.panel > .inner.columns > * { align-self: flex-start !important; }

/* Normal content panels must not gain internal scrollbars. Content must be edited
   to fit, or split into another adjacent panel. Explicit modal scrolling is separate. */
.panel > .intro,
.panel > .inner { overflow: hidden; }

.section-intro h2 { font-size: 1.45rem; margin: 0 0 .85rem; }
.section-intro h2.major:after { margin-top: .85rem; width: 2.75rem; }
.section-intro p { font-size: .92rem; line-height: 1.72; margin: .85rem 0 0; opacity: .92; }

h1.major:after, h2.major:after, .section-intro h2.major:after {
    background: var(--heading-rule-color) !important;
}


/* ---------- Hero / logo / quick links ---------- */
#arxi > .content {
    display: flex !important;
    flex-direction: column !important;
}
#arxi > .image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100%;
    overflow: hidden !important;
}
#arxi > .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}
.hero-lead { padding-top: 20px; }
.hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: var(--hero-navigation-gap) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    align-items: center;
    flex: 0 0 auto !important;
    width: 100%;
}
/* Hero actions deliberately reuse the SAME base .button + .primary-action
   styling as "ΟΛΟΙ ΟΙ ΙΣΟΛΟΓΙΣΜΟΙ". Only size/icon spacing differs here. */
.hero-links .hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    margin: 0;
    min-width: 0;
    height: 2.35rem;
    line-height: 2.35rem;
    padding: 0 .85rem;
    font-size: .62rem;
    font-weight: 400;
    letter-spacing: .075em;
    text-transform: uppercase;
    text-decoration: none;
    flex: 1 1 0;
    width: 0;
}
.hero-links .hero-action .icon {
    font-size: .82rem;
    line-height: 1;
    color: currentColor !important;
}

/* ---------- Generic content ---------- */
.content-block h3 { margin-bottom: 1.05rem; }
.company-facts { list-style: none; margin: 0; padding: 0; }
.company-facts li { border-bottom: 1px solid var(--separator-on-dark-color); padding: .68rem 0; }
.company-facts li:last-child { border-bottom: 0; }

/* ---------- Actions ---------- */
.button.primary-action {
    background: var(--primary-action-background-color) !important;
    box-shadow: none;
    color: var(--primary-action-text-color) !important;
}
.button.primary-action:hover {
    background: var(--primary-action-hover-background-color) !important;
    color: var(--primary-action-hover-text-color) !important;
}
.button.primary-action .icon { color: currentColor !important; }

/* ---------- Financial statements ---------- */
.statement-list { list-style: none; margin: 0; padding: 0; }
.statement-list li { border-bottom: 1px solid var(--separator-on-dark-color); padding: .58rem 0; margin: 0; }
.statement-list li:first-child { padding-top: 0; }
.statement-list li:last-child { border-bottom: 0; }
.statement-record { display: grid; grid-template-columns: 5.1rem 1fr; gap: .9rem; align-items: center; }
.statement-record .button { margin: 0; width: 5.1rem; min-width: 5.1rem; height: 2.35rem; line-height: 2.35rem; padding: 0 .35rem; font-size: .54rem; text-align: center; }
.statement-record .statement-download { display: inline-flex; align-items: center; justify-content: center; gap: .30rem; }
.statement-record .statement-download .icon { font-size: .72rem; line-height: 1; }
.statement-copy h3 { font-size: .96rem; line-height: 1.2; margin: 0 0 .16rem; }
.statement-copy p { font-size: .74rem; line-height: 1.3; margin: 0; opacity: .82; }
.statement-copy small { font-size: .64rem; opacity: .74; }
.statements-more { margin-top: 1.15rem; }
.statements-more .button { margin: 0; }

.statements-popup { position: fixed; inset: 0; z-index: 10000; display: none; }
.statements-popup.is-open { display: block; }
.statements-popup__backdrop { position: absolute; inset: 0; background: var(--modal-backdrop-color); }
.statements-popup__panel {
    position: relative;
    width: min(760px, calc(100vw - 40px));
    max-height: 80vh;
    margin: 8vh auto 0;
    padding: 2rem;
    overflow-y: auto; /* Explicitly allowed: this is the full-history modal. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Native momentum scrolling on iOS/iPadOS. */
    touch-action: none; /* Popup JS owns touch/pen/mouse drag so page gestures cannot steal it. */
    user-select: none; /* Dragging the popup must never select statement text. */
    -webkit-user-select: none;
    cursor: grab;
    overscroll-behavior: contain; /* Keep scrolling inside the popup at its limits. */
    border-radius: 12px;
    background: var(--modal-background-color);
    color: var(--modal-text-color);
    box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.statements-popup__panel.is-pointer-dragging { cursor: grabbing; }
.statements-popup__panel h2, .statements-popup__panel h3 { color: var(--modal-text-color) !important; }
.statements-popup__panel .statement-list li { border-color: var(--separator-on-light-color); }
.statements-popup__panel .statement-copy p { color: var(--modal-text-color); opacity: .82; }
.statements-popup__close { position: absolute; right: 1rem; top: 1rem; border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; color: var(--modal-text-color); }

/* ---------- Contact ---------- */
.contact-introduction { margin-top: 1.2rem; }
.contact-introduction p { margin: 0 0 .8rem; font-size: .86rem; line-height: 1.58; opacity: .94; }
.contact-introduction p:last-child { margin-bottom: 0; }
.contact-details { margin-top: 1.8rem; }
.contact-details p { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .42rem; line-height: 1.45; }
.contact-details p:last-child { margin-bottom: 0; }
.contact-address { white-space: nowrap; }
.contact-meta .icon, .contact-details .icon { flex: 0 0 auto; margin: .12rem 0 0; color: var(--contact-section-text-color); }
.social-links a { color: var(--contact-section-text-color) !important; }
.social-links > li:before { background: var(--primary-action-background-color) !important; color: var(--primary-action-text-color) !important; }
#message { min-height: 12rem; resize: vertical; }

/* Honeypot: remains in DOM for anti-spam, never occupies visual layout. */
.hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Contact order/geometry: Details -> Map -> Form + Social. */
#contact { align-items: stretch !important; overflow: visible !important; }
#contact > .intro, #contact > .inner, #contact > .map-embed { align-self: stretch !important; box-sizing: border-box; }
#contact > .map-embed {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 2;
    box-shadow: var(--map-left-shadow), var(--map-right-shadow) !important;
}
#contact > .map-embed iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; }
#contact > .contact-combined-panel { display: flex !important; align-items: flex-start !important; overflow: hidden !important; }
#contact > .contact-combined-panel > * { align-self: flex-start !important; }

/* ---------- Optional image-background module ---------- */
.demo-background-panel {
    position: relative !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-image: linear-gradient(var(--media-overlay-background-color), var(--media-overlay-background-color)), url('../../images/areabg01.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.demo-background-panel .demo-background-image { width: 100% !important; min-width: 0 !important; height: 100% !important; background: none !important; display: block !important; }
.demo-background-panel .demo-overlay-content { width: 100% !important; box-sizing: border-box !important; padding: var(--content-panel-padding) !important; background: transparent !important; color: var(--media-overlay-text-color) !important; }
.demo-background-panel .demo-overlay-content h2, .demo-background-panel .demo-overlay-content p { color: var(--media-overlay-text-color) !important; }


/* ---------- ATLAS projects / clients image-background panel ----------
   Uses the supplied areabg02.jpg. Panel width remains native Ethereal span-* in index.html. */
.projects-background-panel {
    background-image: linear-gradient(rgba(18, 29, 36, .78), rgba(18, 29, 36, .78)), url('../../images/areabg02.jpg') !important;
    background-position: center center !important;
}
.projects-overlay-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.projects-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.6rem;
    min-height: 0;
}
.projects-list { list-style: none; margin: 0; padding: 0; }
.projects-list li {
    margin: 0;
    padding: .48rem 0;
    border-top: 1px solid rgba(255,255,255,.24);
    line-height: 1.25;
}
.projects-list li:first-child { border-top: 0; padding-top: 0; }
.projects-list strong, .projects-list span { display: block; color: var(--media-overlay-text-color) !important; }
.projects-list strong { font-size: .86rem; font-weight: 500; }
.projects-list span { margin-top: .15rem; font-size: .72rem; opacity: .82; }
@media screen and (max-width: 980px) {
    .projects-columns { grid-template-columns: 1fr; gap: 0; }
    .projects-list + .projects-list li:first-child { border-top: 1px solid rgba(255,255,255,.24); padding-top: .48rem; }
}

/* ---------- Optional gallery ---------- */
.demo-gallery-section, .demo-gallery-intro { background: var(--alternate-section-background-color) !important; color: var(--alternate-section-text-color) !important; }
.demo-gallery-intro h2, .demo-gallery-intro p { color: var(--alternate-section-text-color) !important; }

/* ---------- Optional YouTube full-panel module ---------- */
.demo-video-section { align-items: stretch !important; overflow: hidden !important; padding: 0 !important; background: var(--video-panel-background-color) !important; }
.demo-video-section .video-embed { position: relative !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--video-panel-background-color); }
.demo-video-section .video-embed iframe, .demo-video-section .video-placeholder { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; }
.video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 2rem; text-align: center; color: var(--video-placeholder-text-color); }
.video-placeholder[hidden] { display: none !important; }
.video-placeholder .icon { font-size: 3rem; }
.video-placeholder strong { font-size: 1.15rem; font-weight: 400; }
.video-placeholder small { opacity: .7; }

/* ---------- Credits ---------- */
#wrapper > .copyright { background: var(--credits-background-color) !important; color: var(--credits-text-color) !important; padding: var(--credits-padding) !important; font-size: 1rem !important; line-height: 1.35; bottom: -3.25rem !important; transform: none !important; margin: 0 !important; }
#wrapper > .copyright a { color: var(--credits-text-color) !important; }


/* ---------- End-of-site geometry (locked standard) ----------
   #wrapper must size to the full horizontal panel strip; otherwise its
   absolutely positioned copyright anchors to the viewport-sized flex item
   instead of the real right edge of the last panel. The end gap is real
   #page-wrapper padding so it participates in the document scroll width. */
:root { --site-end-gap: 5rem; }
@media screen and (min-width: 981px) {
    #wrapper {
        width: max-content !important;
        min-width: max-content !important;
        flex: 0 0 max-content !important;
    }
    #page-wrapper {
        padding-right: var(--site-end-gap) !important;
    }
}



/* ---------- Responsive ---------- */
@media screen and (max-width: 980px) {
    .panel > .inner.columns > * { margin-left: 0 !important; margin-top: 2.5rem; }
    .panel > .inner.columns > *:first-child { margin-top: 0; }
    .hero-links { margin-top: var(--hero-navigation-gap) !important; gap: .45rem 1rem; }
    .hero-links .hero-action { width: auto; min-width: 0; flex: 1 1 calc(50% - .5rem); }
    .statement-record { grid-template-columns: 4.9rem 1fr; }
    .statement-record .button { width: 4.9rem; min-width: 4.9rem; }
    .statements-popup__panel { margin: 5vh auto 0; max-height: 88vh; padding: 1.5rem; }
    .contact-address { white-space: normal; }
    #arxi > .image { min-height: 22rem; }
    #contact > .map-embed { flex: none !important; width: 100% !important; min-width: 0 !important; height: 24rem !important; }
    #contact > .contact-combined-panel { display: block !important; }
    .demo-background-panel { width: 100% !important; min-width: 0 !important; min-height: 28rem !important; }
    .demo-video-section .video-embed { flex: none !important; width: 100% !important; min-width: 0 !important; height: 56.25vw !important; min-height: 18rem !important; max-height: 70vh !important; }
}

/* ---------- Mobile animated scroll hint ---------- */
.scroll-hint-overlay { display: none; }
@media (max-width: 980px) {
    .scroll-hint-overlay { display: block; position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); width: 64px; height: 64px; z-index: 2147483647; background: transparent; border: 0; padding: 0; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0,0,0,0); touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
    .scroll-hint-overlay:focus, .scroll-hint-overlay:focus-visible, .scroll-hint-overlay:active { outline: none !important; box-shadow: none !important; border-color: transparent !important; }
    .scroll-hint-svg { width: 64px; height: 64px; display: block; overflow: visible; pointer-events: none; }
    .scroll-hint-svg polyline { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); transform-box: fill-box; transform-origin: center; animation: hintBounce 1.15s infinite; }
    .scroll-hint-svg .c1 { opacity: .45; }
    .scroll-hint-svg .c2 { opacity: .95; animation-delay: .12s; }
    @keyframes hintBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
    @media (prefers-reduced-motion: reduce) { .scroll-hint-svg polyline { animation: none; } }
}

/* ============================================================
   UNIFIED PRIMARY ACTION STATES
   Keep every primary action visually identical, including native
   <input type="submit"> controls whose base-template selectors are
   more specific than .button.primary-action.
   ============================================================ */
input[type="submit"].button.primary-action,
input[type="button"].button.primary-action,
button.button.primary-action,
a.button.primary-action {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
}

input[type="submit"].button.primary-action:hover,
input[type="submit"].button.primary-action:focus,
input[type="button"].button.primary-action:hover,
input[type="button"].button.primary-action:focus,
button.button.primary-action:hover,
button.button.primary-action:focus,
a.button.primary-action:hover,
a.button.primary-action:focus {
    background: var(--primary-action-hover-background-color) !important;
    color: var(--primary-action-hover-text-color) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------- Page canvas background (locked standard) ----------
   The original Ethereal template paints the viewport through body:after.
   Keep that pseudo-element tied to the semantic page background variable,
   otherwise the original template color can appear beyond the last panel. */
html,
body,
#page-wrapper {
    background-color: var(--page-background-color) !important;
}
body:after {
    background-color: var(--page-background-color) !important;
}