/*
 * Site styling for apokleistikeslarisa.gr, carried over from the WordPress
 * derma-care theme. Cassiopeia loads this file automatically when present.
 * Colours come from the template style params; only layout lives here.
 */

:root {
    --brand: #08a882;
    --brand-dark: #05715a;
    --brand-tint: #e9f8f3;
}

/* ---------------------------------------------------------------- links */

/* Underline is a hover affordance here, never the resting state. */
a,
a:link,
a:visited,
.com-content-article__body a,
.blog-item a,
.site-topbar a,
.site-footer-inner a {
    text-decoration: none;
}

a:hover,
a:focus,
a:focus-visible,
.com-content-article__body a:hover,
.blog-item a:hover,
.site-topbar a:hover,
.site-footer-inner a:hover {
    text-decoration: underline;
}

/* Cassiopeia draws its focus ring on plain :focus, so a mouse click leaves a box
   around the link. Keep the ring for keyboard users, drop it for pointer clicks. */
a:focus:not(:focus-visible),
.metismenu.mod-menu .metismenu-item > a:focus:not(:focus-visible),
.mod-menu a:focus:not(:focus-visible),
.mod-menu button:focus:not(:focus-visible) {
    outline: none;
}

/* ------------------------------------------------------------- top bar */

.container-topbar .topbar-module,
.container-topbar {
    background-color: var(--brand-dark);
    color: #fff;
}

/* The topbar container is full-width and Cassiopeia puts no grid child inside it,
   so the text would otherwise sit flush against the viewport edge. */
.site-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    max-width: var(--container-width, 1320px);
    margin-inline: auto;
    padding: .5rem clamp(1rem, 4vw, 2rem);
    font-size: .875rem;
}

.topbar-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* gap replaces the whitespace text node that flex layout swallows between
   the label span and the value next to it. */
.topbar-contact > li {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Items pulled in with {loadmoduleid} arrive wrapped in the module's own markup;
   flatten its block spacing so every entry sits on one line. */
.topbar-contact .mod-custom,
.topbar-contact .mod-custom > *,
.site-footer-inner .mod-custom,
.site-footer-inner .mod-custom > * {
    margin: 0;
    padding: 0;
}

.site-footer-inner .mod-custom {
    display: inline;
}

.site-topbar a {
    color: #fff;
}

.topbar-label {
    opacity: .75;
}

.site-topbar .topbar-cta {
    padding: .3rem .9rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

/* Inverts to a white pill, so the label has to go dark green to stay readable.
   Cassiopeia's `.container-topbar a:not(.btn):hover` scores (0,3,1) and would
   otherwise repaint it light grey — hence the extra qualifiers here. */
.container-topbar .site-topbar a.topbar-cta:hover,
.container-topbar .site-topbar a.topbar-cta:focus,
.container-topbar .site-topbar a.topbar-cta:focus-visible {
    background-color: #fff;
    color: var(--brand-dark);
    border-color: #fff;
    text-decoration: none;
}

/* -------------------------------------------------------------- header */

.header .navbar-brand,
.container-header .navbar-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
}

/* The emblem is a pale silver rod; a white disc keeps it legible on the green. */
.header .navbar-brand .brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.header .navbar-brand .brand-logo img {
    width: auto;
    height: 58px;
    display: block;
}

.header .navbar-brand .site-description {
    max-width: 30ch;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: .01em;
}

/* The nav row holds the menu and the search box, which are different heights;
   without this they sit on different baselines. */
.container-header .container-nav {
    align-items: center;
}

.container-nav .container-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --------------------------------------------------------------- cards */

.blog-items .blog-item {
    break-inside: avoid;   /* Cassiopeia's masonry layouts use CSS columns */
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background-color: #fff;
    border: 1px solid #e6eae9;
    border-left: 3px solid var(--brand);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: box-shadow .18s ease;
}

.blog-items .blog-item:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
}

.blog-items .blog-item .page-header h2 {
    margin-top: .75rem;
}

.com-content-article {
    margin-bottom: 2rem;
}

.com-content-category-blog__item .item-image img,
.com-content-article__body img {
    max-width: 100%;
    height: auto;
}

/* Featured images came out of WordPress at full upload size. */
.com-content-category-blog__item .item-image img,
.com-content-article > .page-header + figure img,
.item-image img {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border-radius: 4px;
}

.blog-items .item-image img {
    max-height: 260px;
}

.article-info {
    font-size: .8125rem;
    color: #6b6f6e;
}

/* Labels that only repeat what the control already says. Hidden from sight but kept
   in the accessibility tree — screen readers still need them to announce the field. */
.article-info > .article-info-term,
.container-search label.finder {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Downloadable documents (καταστατικό, αιτήσεις, ΦΕΚ). */
.doc-link {
    margin: .35rem 0;
    padding: .6rem .9rem;
    background-color: var(--brand-tint);
    border-left: 3px solid var(--brand);
    border-radius: 3px;
}

.doc-link a {
    font-weight: 600;
}

/* ------------------------------------------------------- sidebar modules */

.mod-articles-items > li {
    padding: .6rem 0;
    border-bottom: 1px solid #eceeed;
}

.mod-articles-items > li:last-child {
    border-bottom: 0;
}

.mod-articles-title {
    margin: 0 0 .2rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.mod-articles-title a {
    text-decoration: none;
}

.mod-articles-item .mod-articles-info,
.mod-articles-item time {
    font-size: .8125rem;
    color: #6b6f6e;
}

.mod-articles-image {
    margin: 0 0 .5rem;
}

.mod-articles-image img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
}

/* ------------------------------------------------------------- footer */

.container-footer .footer-module,
.container-footer {
    color: #fff;
}

.site-footer-inner {
    max-width: var(--container-width, 1320px);
    margin-inline: auto;
    padding: 1.5rem clamp(1rem, 4vw, 2rem) 1rem;
    text-align: center;
    line-height: 1.6;
}

.site-footer-inner p {
    margin-bottom: .5rem;
}

.footer-org {
    font-weight: 600;
}

.footer-contact,
.footer-social {
    font-size: .875rem;
}

.site-footer-inner a {
    color: #fff;
}

/* The footer is several sibling modules; stack them as one column. */
.footer .grid-child {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Target the column's children, not the `.footer-module` suffix: Joomla only wraps a
   module in `.moduletable` for some chrome configurations, so the suffix class is not
   guaranteed to exist on every module here. */
.footer .grid-child > * {
    width: 100%;
    max-width: var(--container-width, 1320px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    text-align: center;
    color: #fff;
}

.footer-copyright {
    margin: 0;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .8125rem;
    opacity: .85;
}

.footer-credit {
    padding: .6rem 0 1.25rem;
}

.easylogic-footer-logo {
    display: inline-block;
    line-height: 0;
    opacity: .75;
    transition: opacity .15s ease;
}

.easylogic-footer-logo:hover,
.easylogic-footer-logo:focus {
    opacity: 1;
}

.easylogic-footer-logo img {
    width: 80px;
    height: 20px;
    display: block;
}

@media (max-width: 575.98px) {
    .site-topbar {
        justify-content: center;
        text-align: center;
    }

    .topbar-contact {
        justify-content: center;
    }

    .header .navbar-brand .brand-logo {
        width: 58px;
        height: 58px;
    }

    .header .navbar-brand .brand-logo img {
        height: 44px;
    }

    .header .navbar-brand .site-description {
        font-size: .9375rem;
    }
}