/*
Theme Name:   澳門公教中心 Catholic Centre of Macao
Theme URI:    https://centro-catolico-3.dev.icac.tech/
Description:  Astra child theme for the Catholic Centre of Macao. Holds the
              "Granite & Gold" design tokens and a small set of refinements
              that Elementor cannot express as widget settings. Colours,
              fonts and spacing are set in Elementor → Site Settings, not
              here, so the Centre can change them without touching code.
Author:       Catholic Centre of Macao
Template:     astra
Version:      1.0.0
Text Domain:  ccmacau
*/

/* ==========================================================================
   1. Design tokens
   The palette is taken from the building itself: charcoal granite, the gold
   of the CENTRO CATÓLICO signage, and the white line-drawing mural.
   These mirror the Elementor Global Colours — change them there and here if
   you ever re-brand.
   ========================================================================== */
:root {
    --ccm-granite:      #22262b;   /* dark bands, footer            */
    --ccm-granite-deep: #15181c;   /* deepest band                  */
    --ccm-ivory:        #f7f5f1;   /* page background               */
    --ccm-white:        #ffffff;   /* card surfaces                 */
    --ccm-stone:        #e3dfd7;   /* hairlines, borders            */
    --ccm-ink:          #1c1f23;   /* body text                     */
    --ccm-muted:        #5c636b;   /* secondary text                */
    --ccm-gold:         #c29b45;   /* gold on dark                  */
    --ccm-gold-deep:    #7e6013;   /* gold text/links on light      */

    --ccm-rule: 1px solid var(--ccm-stone);
}

/* Traditional Chinese first, so Chinese never falls back to a Latin face.
   Noto Serif TC / Noto Sans TC are loaded by Elementor's Global Fonts. */
body,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
    font-synthesis-weight: none;
}

/* ==========================================================================
   2. Section eyebrow — a short label sitting under a short gold rule.
   Apply the CSS class "ccm-eyebrow" to a Heading or Text widget.
   ========================================================================== */
.ccm-eyebrow {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ccm-gold-deep);
}
.ccm-eyebrow::before {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-bottom: .85rem;
    background: var(--ccm-gold);
}
.ccm-eyebrow.ccm-centre,
.ccm-eyebrow.ccm-centre * { text-align: center; }
.ccm-eyebrow.ccm-centre::before { margin-left: auto; margin-right: auto; }

/* On dark bands the label lightens */
.ccm-dark .ccm-eyebrow { color: var(--ccm-gold); }

/* ==========================================================================
   3. English sub-line under a Chinese heading
   ========================================================================== */
.ccm-en {
    font-size: .95rem;
    letter-spacing: .01em;
    color: var(--ccm-muted);
}
.ccm-dark .ccm-en { color: rgba(255, 255, 255, .72); }

/* ==========================================================================
   4. Cards — white, hairline border, square-ish corners. Architectural
   rather than soft. Apply "ccm-card" to a Container.
   ========================================================================== */
.ccm-card {
    background: var(--ccm-white);
    border: var(--ccm-rule);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease;
}
.ccm-card:hover { border-color: var(--ccm-gold); }
/* Every card photograph crops to the same 3:2 window, whatever the original
   proportions, so a row of cards lines up. */
.ccm-card .elementor-widget-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* A card whose whole surface is a link */
.ccm-card-link:hover { transform: translateY(-3px); }

/* ==========================================================================
   5. Timeline — a vertical rail with a gold marker per era.
   Apply "ccm-timeline" to the wrapping Container and "ccm-timeline-item"
   to each child Container.
   ========================================================================== */
.ccm-timeline { position: relative; }
.ccm-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: var(--ccm-stone);
}
.ccm-timeline-item { position: relative; padding-left: 2.75rem; }
.ccm-timeline-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ccm-ivory);
    border: 3px solid var(--ccm-gold);
}
/* One shape for every era, so the rail reads evenly. The 1962 photograph is
   only 285 px wide — the largest copy that exists — so it is noticeably soft
   at this size. Replacing it with an original scan would be worth doing. */
.ccm-timeline-item .elementor-widget-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
@media (max-width: 767px) {
    .ccm-timeline::before { left: 6px; }
    .ccm-timeline-item { padding-left: 2rem; }
}

/* ==========================================================================
   6. Numbered steps — a large outlined numeral beside each step.
   ========================================================================== */
.ccm-stepnum .elementor-heading-title,
.ccm-stepnum {
    font-size: clamp(2.6rem, 6vw, 3.6rem);
    line-height: 1;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ccm-gold);
    text-stroke: 1.5px var(--ccm-gold);
}

/* ==========================================================================
   7. Statement band — oversized quotation on granite.
   ========================================================================== */
.ccm-statement .elementor-heading-title {
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    line-height: 1.35;
}

/* ==========================================================================
   8. Contact tiles and small utilities
   ========================================================================== */
.ccm-tile {
    background: var(--ccm-white);
    border: var(--ccm-rule);
    border-radius: 4px;
}
.ccm-tile a { color: var(--ccm-gold-deep); }
.ccm-tile a:hover { color: var(--ccm-ink); }

.ccm-hairline {
    border: 0;
    border-top: var(--ccm-rule);
}

/* ==========================================================================
   8b. Heroes — the photograph band that opens every page.
   ========================================================================== */
.ccm-hero { min-height: 62vh; }
.home .ccm-hero { min-height: 86vh; }
@media (max-width: 767px) {
    .ccm-hero      { min-height: 58vh; }
    .home .ccm-hero { min-height: 74vh; }
}
/* The photographs are dark; keep the scrim heavier at the left where the
   text sits so the headline never fights the image. */
.ccm-hero::before {
    background-image: linear-gradient(100deg,
        rgba(13, 16, 19, .86) 0%,
        rgba(13, 16, 19, .70) 42%,
        rgba(13, 16, 19, .38) 100%) !important;
}

/* ==========================================================================
   9. Header
   ========================================================================== */
.ccm-header {
    transition: background-color .3s ease, box-shadow .3s ease;
    position: sticky;
    top: 0;
    z-index: 99;
}
.admin-bar .ccm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ccm-header { top: 46px; } }

.ccm-logo img {
    max-width: 190px;
    width: 100%;
    height: auto;
}
@media (max-width: 767px) { .ccm-logo img { max-width: 138px; } }

/* TranslatePress's switcher, kept small and quiet — it is a utility control,
   not a navigation item. Its own script sets a fixed pixel width that clips
   "English" to "Eng…", so the widths here are deliberately forced. */
.ccm-header .trp-language-switcher {
    margin: 0;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    line-height: 1.35;
    font-size: .82rem;
    /* TranslatePress ships 10px of vertical padding of its own, which makes
       the control noticeably taller than anything beside it. The padding
       belongs on the inner wrapper so the hit area stays sensible. */
    padding: 0 !important;
}
.ccm-header .trp-language-item,
.ccm-header .trp-language-item-name {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.ccm-header .trp-language-switcher > div,
.ccm-header .trp-language-switcher .trp-current-language-item__wrapper {
    padding: 4px 8px !important;
    border-radius: 3px;
}
/* TranslatePress pads the link itself by 7px/16px and spaces the flag from
   the label by 8px, which is most of the control's width. */
.ccm-header .trp-language-item {
    padding: 3px 0 !important;
    gap: 6px !important;
}
.ccm-header .trp-flag-image {
    width: 15px !important;
    height: 11px !important;
}
.ccm-header .trp-shortcode-arrow {
    width: 15px !important;
    height: 15px !important;
}

/* --------------------------------------------------------------------------
   9a. Desktop header (above Header Footer Elementor's dropdown breakpoint).

   Elementor containers and widgets are 100% wide by default, which makes the
   menu box narrower than the menu itself and hides the last item under the
   language switcher. These rules size everything to content instead.

   They are scoped to >=1025px on purpose. Below that HFE swaps the menu for a
   hamburger, and forcing widths on the widget there drags the collapsed menu
   off the left of the screen and breaks the whole bar.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .ccm-header .hfe-nav-menu,
    .ccm-header ul.hfe-nav-menu { flex-wrap: nowrap; }
    .ccm-header .hfe-nav-menu li a.hfe-menu-item { white-space: nowrap; }
    .ccm-header .elementor-widget-shortcode { flex: 0 0 auto; }

    .ccm-header .ccm-hd-left {
        width: auto !important;
        flex: 0 0 auto;
    }
    .ccm-header .ccm-hd-right {
        width: auto !important;
        flex: 1 1 auto;
    }
    .ccm-header .elementor-widget-navigation-menu {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 0;
    }
    .ccm-header .ccm-logo { flex: 0 1 auto; }
}

/* The English labels are noticeably longer than the Chinese ones, so the
   header tightens before it breaks. */
@media (min-width: 1025px) and (max-width: 1440px) {
    .ccm-header .hfe-nav-menu li a.hfe-menu-item {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 15px;
    }
    .ccm-header .hfe-nav-menu > li { margin-left: 6px !important; }
}

/* --------------------------------------------------------------------------
   9b. Mobile and tablet header — one row: logo left, switcher and hamburger
   right, with the menu itself dropping below the bar when opened.

   The collapsed <nav> keeps its horizontal width in the flow even though it
   has no height, which is what pushed the bar sideways. Taking it out of the
   flow is the fix; the `position: static` rules above it exist so it anchors
   to the header rather than to the widget it sits in.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ccm-header > .e-con,
    .ccm-header .e-con-inner,
    .ccm-header .ccm-hd-right,
    .ccm-header .elementor-widget-navigation-menu,
    .ccm-header .hfe-nav-menu-layout { position: static !important; }

    .ccm-header .e-con-inner {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .ccm-header .ccm-hd-left {
        width: auto !important;
        flex: 0 0 auto !important;
    }
    .ccm-header .ccm-hd-right {
        width: auto !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }
    .ccm-header .elementor-widget-navigation-menu {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .ccm-header nav.hfe-nav-menu__layout-horizontal {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: auto !important;
        background: var(--ccm-white);
        border-top: 1px solid var(--ccm-stone);
        box-shadow: 0 12px 24px rgba(13, 16, 19, .10);
    }
    /* nowrap matters: while the menu is closed the nav is 0px tall, and a
       wrapping column flex container spills its items into fresh columns —
       six items x 375px gave the page 2250px of horizontal scroll. */
    .ccm-header nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .ccm-header nav.hfe-nav-menu__layout-horizontal:not(.menu-is-active) {
        overflow: hidden !important;
    }
    .ccm-header nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li {
        width: 100%;
        margin-left: 0 !important;
    }
    .ccm-header nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li > a.hfe-menu-item {
        padding: 14px 20px !important;
        border-bottom: 1px solid var(--ccm-stone);
    }

    /* header.js moves the switcher into the menu panel at this width, so the
       top row is just the logo and the hamburger. */
    .ccm-header .trp-language-switcher { min-width: 0 !important; }

    /* header.js hides the switcher here and appends the other language to the
       menu as a plain link instead — see that file for why. The row is an
       ordinary .hfe-menu-item, so it inherits the styling of the rows above
       it; only the quiet top rule marks it as a different kind of choice. */
    .ccm-header .ccm-hd-right > .elementor-widget-shortcode { display: none; }

    .ccm-header ul.hfe-nav-menu > li.ccm-lang-item {
        width: 100%;
        margin: 0 !important;
        list-style: none;
    }
}
/* ==========================================================================
   9c. Astra's back-to-top button, in the site's own colours
   ========================================================================== */
#ast-scroll-top {
    background-color: var(--ccm-granite);
    color: #fff;
    border-radius: 3px;
}
#ast-scroll-top:hover { background-color: var(--ccm-gold-deep); }
.ccm-header .elementor-nav-menu > li > a,
.ccm-header .hfe-nav-menu li a {
    letter-spacing: .02em;
}

/* The mobile toggle that Header Footer Elementor renders */
.ccm-header .hfe-nav-menu__toggle { color: var(--ccm-ink); }
.ccm-header .menu-item.current-menu-item > a { color: var(--ccm-gold-deep); }

/* ==========================================================================
   10. Footer
   ========================================================================== */
.ccm-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.ccm-footer a:hover { color: var(--ccm-gold); }
.ccm-footer .ccm-footer-head {
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ccm-gold);
}

/* ==========================================================================
   11. News grid (Essential Addons "Post Grid") — align it with .ccm-card
   ========================================================================== */
.eael-grid-post .eael-grid-post-holder {
    background: var(--ccm-white);
    border: var(--ccm-rule);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease;
}
.eael-grid-post .eael-grid-post-holder:hover {
    border-color: var(--ccm-gold);
    transform: translateY(-3px);
}
.eael-grid-post .eael-entry-wrapper { padding: 22px 24px 26px; }
.eael-entry-title,
.eael-grid-post .eael-entry-title {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 .5rem !important;
}
.eael-entry-title a,
.eael-grid-post .eael-entry-title a {
    color: var(--ccm-ink);
    text-decoration: none !important;
}
.eael-entry-title a:hover { color: var(--ccm-gold-deep); }

/* Essential Addons dims every thumbnail by default; keep the photographs
   clear and bring the scrim in only on hover. */
.eael-grid-post .eael-entry-overlay {
    background-color: rgba(13, 16, 19, 0) !important;
    transition: background-color .25s ease;
}
.eael-grid-post .eael-entry-overlay > * { opacity: 0; transition: opacity .25s ease; }
.eael-grid-post:hover .eael-entry-overlay {
    background-color: rgba(13, 16, 19, .45) !important;
}
.eael-grid-post:hover .eael-entry-overlay > * { opacity: 1; }

/* Equal-height cards in a row */
.eael-post-grid.eael-post-grid-style-one { display: flex; flex-wrap: wrap; }
.eael-post-grid.eael-post-grid-style-one > .eael-grid-post { display: flex; }
.eael-post-grid.eael-post-grid-style-one > .eael-grid-post > .eael-grid-post-holder {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.eael-grid-post .eael-entry-wrapper { flex: 1 1 auto; }
.eael-entry-meta,
.eael-grid-post .eael-entry-meta > * {
    color: var(--ccm-muted);
    font-size: .82rem;
}
.eael-grid-post .eael-entry-meta { margin-bottom: .55rem; }
.eael-grid-post .eael-entry-media img { aspect-ratio: 3 / 2; object-fit: cover; }
.eael-post-elements-readmore-btn,
.eael-grid-post .eael-post-elements-readmore-btn {
    color: var(--ccm-gold-deep) !important;
    font-weight: 600;
    text-decoration: none !important;
    font-size: .9rem;
}
.eael-post-elements-readmore-btn:hover,
.eael-grid-post .eael-post-elements-readmore-btn:hover {
    color: var(--ccm-ink) !important;
}

/* ==========================================================================
   11b. Card headings that are links should not look like body links
   ========================================================================== */
.ccm-card .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
}
.ccm-card .elementor-heading-title a:hover { color: var(--ccm-gold-deep); }

/* ==========================================================================
   12. SureForms — make the contact form match the rest of the site
   ========================================================================== */
.srfm-form-container input[type="text"],
.srfm-form-container input[type="email"],
.srfm-form-container textarea {
    border: var(--ccm-rule) !important;
    border-radius: 3px !important;
    background: var(--ccm-white) !important;
}
.srfm-form-container .srfm-button {
    border-radius: 3px !important;
    letter-spacing: .04em;
}

/* ==========================================================================
   13. Single post — a readable measure and a gold rule under the title
   ========================================================================== */
.single-post .entry-title { position: relative; padding-bottom: .7rem; }
.single-post .entry-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: var(--ccm-gold);
}
.ccm-lyrics p { margin: 0 0 .35rem; }

/* ==========================================================================
   14. Accessibility — a visible focus ring everywhere
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
    outline: 3px solid var(--ccm-gold);
    outline-offset: 2px;
}

/* Skip link */
.skip-link:focus { background: var(--ccm-granite); color: #fff; }