/* ==========================================
   L'OPERA ROYAL - GLOBAL CSS
   Astra Child Theme Foundation
========================================== */

/* ==========================================
   FONTS
   Expected font files:
   assets/fonts/Amalfi-Coast.ttf
   assets/fonts/Montserrat-Medium.woff2
========================================== */

@font-face {
    font-family: "Amalfi Coast";
    src: url("../fonts/Amalfi-Coast.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat Medium";
    src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   DESIGN TOKENS
   One source of truth for the whole website.
   Change colors, fonts, logo and layout here.
========================================== */

:root {
    /* ======================================
       OFFICIAL BRAND COLORS
       Navy is the dominant color.
       Gold is only used as an accent.
       No black background.
       No gradients.
    ====================================== */

    --royal-navy: #083050;
    --royal-blue: #083050;
    --royal-gold: #ac8e5f;
    --royal-grey: #6d6e71;

    /* ======================================
       RGB VALUES
       Used for transparent colors.
       Change only if the main color changes.
    ====================================== */

    --royal-navy-rgb: 8, 48, 80;
    --royal-gold-rgb: 172, 142, 95;
    --royal-grey-rgb: 109, 110, 113;
    --royal-white-rgb: 255, 255, 255;

    /* ======================================
       NAVY VARIANTS
       These stay navy, never pure black.
    ====================================== */

    --royal-navy-dark: #062844;
    --royal-navy-deep: #05233b;
    --royal-navy-soft: #0b3a5e;
    --royal-navy-light: #12466f;

    /* ======================================
       GOLD VARIANTS
       Accent only.
    ====================================== */

    --royal-gold-hover: #8f7142;
    --royal-gold-light: #c9a66a;
    --royal-gold-soft: rgba(var(--royal-gold-rgb), 0.16);
    --royal-gold-border: rgba(var(--royal-gold-rgb), 0.34);

    /* ======================================
       NEUTRAL COLORS
    ====================================== */

    --royal-white: #ffffff;
    --royal-cream: #fffaf2;
    --royal-cream-soft: #f8f1e7;

    /* ======================================
       TEXT COLORS
    ====================================== */

    --royal-text-dark: var(--royal-navy);
    --royal-text-body: #20384f;
    --royal-text-muted: var(--royal-grey);

    --royal-text-light: rgba(var(--royal-white-rgb), 0.92);
    --royal-text-faded: rgba(var(--royal-white-rgb), 0.68);

    /* ======================================
       LINES / BORDERS
    ====================================== */

    --royal-line-light: rgba(var(--royal-navy-rgb), 0.12);
    --royal-line-navy: rgba(var(--royal-navy-rgb), 0.22);
    --royal-line-gold: rgba(var(--royal-gold-rgb), 0.34);
    --royal-line-white: rgba(var(--royal-white-rgb), 0.16);

    /* ======================================
       FONTS
    ====================================== */

    --royal-font-script: "Amalfi Coast", "Brush Script MT", "Segoe Script", cursive;
    --royal-font-heading: "Montserrat Medium", Montserrat, Arial, sans-serif;
    --royal-font-body: "Montserrat Medium", Montserrat, Arial, sans-serif;

    /* ======================================
       LOGOS
       Expected logo files:
       assets/images/logo/logo-main.png
       assets/images/logo/logo-mark.png
       assets/images/logo/logo-footer.png
       assets/images/logo/Symbol-R_Logo-in-Gold-Transparent.webp
    ====================================== */

    --royal-logo-main: url("../images/logo/logo-main.png");
    --royal-logo-mark: url("../images/logo/logo-mark.png");
    --royal-logo-footer: url("../images/logo/logo-footer.png");
    --royal-logo-symbol: url("../images/logo/Symbol-R_Logo-in-Gold-Transparent.webp");

    --royal-logo-header-width: 160px;
    --royal-logo-header-width-mobile: 132px;
    --royal-logo-footer-width: 180px;
    --royal-logo-mark-size: 72px;

    --royal-logo-symbol-size-desktop: 68px;
    --royal-logo-symbol-size-tablet: 58px;
    --royal-logo-symbol-size-mobile: 46px;

    --royal-logo-brand-width-desktop: 96px;
    --royal-logo-brand-width-tablet: 82px;
    --royal-logo-brand-width-mobile: 68px;

    /* ======================================
   HEADER / NAVBAR
   Transparent first, navy blurred on scroll.
====================================== */

    --royal-header-bg: transparent;
    --royal-header-bg-scrolled: rgba(var(--royal-navy-rgb), 0.92);

    --royal-topbar-bg: rgba(var(--royal-navy-rgb), 0.74);
    --royal-topbar-bg-scrolled: rgba(var(--royal-navy-rgb), 0.96);

    --royal-navbar-bg: transparent;
    --royal-navbar-bg-scrolled: rgba(var(--royal-navy-rgb), 0.90);

    --royal-navbar-text: var(--royal-white);
    --royal-navbar-text-scrolled: var(--royal-white);
    --royal-navbar-text-hover: var(--royal-gold);

    --royal-navbar-border: rgba(var(--royal-white-rgb), 0.14);
    --royal-navbar-border-scrolled: rgba(var(--royal-white-rgb), 0.12);

    --royal-header-blur: blur(4px) saturate(106%);
    --royal-header-blur-scrolled: blur(14px) saturate(112%);

    --royal-header-shadow: none;
    --royal-header-shadow-scrolled: 0 16px 34px rgba(var(--royal-navy-rgb), 0.18);

    --royal-mobile-menu-bg: rgba(var(--royal-navy-rgb), 0.97);
    --royal-mobile-menu-border: rgba(var(--royal-white-rgb), 0.12);

    /* ======================================
       LAYOUT
    ====================================== */

    --royal-container: 1240px;
    --royal-container-wide: 1480px;

    --royal-gutter-mobile: 24px;
    --royal-gutter-tablet: 40px;
    --royal-gutter-desktop: 72px;
    --royal-gutter: var(--royal-gutter-mobile);

    /* ======================================
       HEADER SIZES
    ====================================== */

    --royal-topbar-height: 30px;
    --royal-navbar-height-mobile: 72px;
    --royal-navbar-height-desktop: 92px;
    --royal-header-total-mobile: var(--royal-navbar-height-mobile);
    --royal-header-total-desktop: calc(var(--royal-topbar-height) + var(--royal-navbar-height-desktop));

    /* ======================================
       SECTION SPACING
    ====================================== */

    --royal-section-xs: 40px;
    --royal-section-sm: 56px;
    --royal-section-md: 76px;
    --royal-section-lg: 104px;
    --royal-section-xl: 128px;


    /* ======================================
       CARDS
    ====================================== */

    --royal-card-padding: clamp(24px, 3vw, 38px);

    /* ======================================
       SHADOWS
       Navy-based shadows only.
    ====================================== */

    --royal-shadow-soft: 0 14px 34px rgba(var(--royal-navy-rgb), 0.10);
    --royal-shadow-medium: 0 22px 58px rgba(var(--royal-navy-rgb), 0.16);
    --royal-shadow-dark: 0 28px 90px rgba(var(--royal-navy-rgb), 0.24);

    /* ======================================
       TRANSITIONS
    ====================================== */

    --royal-transition-fast: 160ms ease;
    --royal-transition: 240ms ease;
    --royal-transition-slow: 420ms ease;

    /* ======================================
       Z-INDEX
    ====================================== */

    --royal-z-base: 1;
    --royal-z-content: 5;
    --royal-z-header: 1000;
    --royal-z-menu: 1100;
    --royal-z-modal: 2000;
/* ======================================
BUTTONS
========================================== */
    --royal-btn-height: 52px;
    --royal-btn-height-sm: 42px;
    --royal-btn-padding: 30px;
    --royal-btn-padding-sm: 22px;
}

@media (min-width: 768px) {
    :root {
        --royal-gutter: var(--royal-gutter-tablet);
    }
}

@media (min-width: 1100px) {
    :root {
        --royal-gutter: var(--royal-gutter-desktop);
    }
}

/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;

    margin: 0;
    padding: 0;

    color: var(--royal-text-body);
    background: var(--royal-white);

    font-family: var(--royal-font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;

    overflow-x: hidden;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.royal-site {
    background: var(--royal-white);
    margin-top: -60px;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: inherit;
}

button,
input,
select,
textarea {
    margin: 0;
    font: inherit;
}

button {
    cursor: pointer;
    appearance: none;
}

button,
input,
select,
textarea {
    border-radius: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

p {
    margin-bottom: 1rem;
}

strong {
    font-weight: 700;
}

/* ==========================================
   ASTRA CLEAN BASE
========================================== */

body.royal-site #page,
body.royal-site .royal-site-wrapper,
body.royal-site #content,
body.royal-site .site,
body.royal-site .site-content,
body.royal-site .content-area,
body.royal-site .site-main,
body.royal-site .ast-container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

body.royal-site .site-content,
body.royal-site .ast-container {
    display: block;
}

body.royal-site main,
body.royal-site article,
body.royal-site .entry-content {
    width: 100%;
}

body.royal-site .entry-header {
    display: none;
}

body.royal-site .entry-content {
    margin: 0;
}

body.royal-site .entry-content>* {
    margin-top: 0;
}

body.royal-site .entry-content p:last-child {
    margin-bottom: 0;
}

body.royal-site .wp-block-group,
body.royal-site .wp-block-cover,
body.royal-site .wp-block-columns {
    margin: 0;
    padding: 0;
}

/* ==========================================
   GLOBAL LAYOUT
========================================== */

.royal-main {
    width: 100%;
    min-height: 60vh;
}

.royal-container {
    width: min(100% - calc(var(--royal-gutter) * 2), var(--royal-container));
    margin-inline: auto;
}

.royal-container-wide {
    width: min(100% - calc(var(--royal-gutter) * 2), var(--royal-container-wide));
    margin-inline: auto;
}

.royal-section {
    position: relative;
    padding-block: var(--royal-section-md);
}

.royal-section--small {
    padding-block: var(--royal-section-sm);
}

.royal-section--large {
    padding-block: var(--royal-section-lg);
}

.royal-section--xlarge {
    padding-block: var(--royal-section-xl);
}

.royal-section--white {
    background: var(--royal-white);
}

.royal-section--cream {
    background: var(--royal-cream-soft);
}

.royal-section--navy {
    color: var(--royal-white);
    background: var(--royal-navy);
}

.royal-section--navy-dark {
    color: var(--royal-white);
    background: var(--royal-navy-dark);
}

.royal-section--navy-soft {
    color: var(--royal-white);
    background: var(--royal-navy-soft);
}

/* ==========================================
   LOGO HELPERS
========================================== */

.royal-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--royal-logo-header-width);
    max-width: 100%;
}

.royal-logo img {
    width: 100%;
    height: auto;
}

.royal-logo--footer {
    width: var(--royal-logo-footer-width);
}

.royal-logo-bg {
    display: block;

    width: var(--royal-logo-header-width);
    aspect-ratio: 3 / 1;

    background-image: var(--royal-logo-main);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.royal-logo-bg--mark {
    width: var(--royal-logo-mark-size);
    aspect-ratio: 1 / 1;

    background-image: var(--royal-logo-mark);
}

.royal-logo-bg--footer {
    width: var(--royal-logo-footer-width);
    background-image: var(--royal-logo-footer);
}

.royal-logo-bg--symbol {
    width: var(--royal-logo-symbol-size-desktop);
    aspect-ratio: 1 / 1;

    background-image: var(--royal-logo-symbol);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ==========================================
   TYPOGRAPHY
========================================== */

.royal-kicker {
    margin: 0 0 12px;

    display: inline-flex;

    color: var(--royal-gold);

    font-family: var(--royal-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.royal-title {
    margin: 0;

    color: var(--royal-navy);

    font-family: var(--royal-font-heading);
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.royal-title--small {
    font-size: clamp(26px, 3vw, 42px);
}

.royal-title--large {
    font-size: clamp(42px, 6vw, 86px);
}

.royal-title--light {
    color: var(--royal-white);
}

.royal-title--gold {
    color: var(--royal-gold);
}

.royal-title--script {
    font-family: var(--royal-font-script);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
}

.royal-text {
    margin: 0;

    color: var(--royal-text-body);

    font-family: var(--royal-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.76;
}

.royal-text--large {
    font-size: 16px;
    line-height: 1.8;
}

.royal-text--muted {
    color: var(--royal-text-muted);
}

.royal-text--dark {
    color: var(--royal-text-dark);
}

.royal-text--light {
    color: var(--royal-text-light);
}

.royal-text--faded {
    color: var(--royal-text-faded);
}

.royal-script {
    font-family: var(--royal-font-script);
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
}

/* ==========================================
   DECORATION
   No gradient. Solid accent lines only.
========================================== */

.royal-divider {
    width: 96px;
    height: 1px;
    margin: 20px 0 26px;

    display: block;

    background: var(--royal-gold);
}

.royal-divider--center {
    margin-inline: auto;
}

.royal-divider--light {
    background: rgba(var(--royal-white-rgb), 0.32);
}

.royal-divider--navy {
    background: var(--royal-navy);
}

.royal-dot {
    width: 6px;
    height: 6px;

    display: inline-block;

    background: var(--royal-gold);
    border-radius: 50%;
}

/* ==========================================
   FORMS
========================================== */

.royal-input,
.royal-select,
.royal-textarea {
    width: 100%;

    color: var(--royal-text-dark);
    background: var(--royal-white);
    border: 1px solid rgba(var(--royal-navy-rgb), 0.18);
    border-radius: 0;

    font-family: var(--royal-font-body);
    font-size: 14px;
    font-weight: 500;

    transition:
        border-color var(--royal-transition),
        box-shadow var(--royal-transition),
        background-color var(--royal-transition);
}

.royal-input,
.royal-select {
    min-height: 48px;
    padding: 0 16px;
}

.royal-textarea {
    min-height: 140px;
    padding: 14px 16px;
    resize: vertical;
}

.royal-input::placeholder,
.royal-textarea::placeholder {
    color: rgba(32, 56, 79, 0.52);
}

.royal-input:focus,
.royal-select:focus,
.royal-textarea:focus {
    outline: none;
    border-color: var(--royal-gold);
    box-shadow: 0 0 0 3px rgba(var(--royal-gold-rgb), 0.16);
}

.royal-label {
    display: block;
    margin-bottom: 8px;

    color: var(--royal-navy);

    font-family: var(--royal-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.royal-field {
    width: 100%;
}

.royal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.royal-form-grid--1 {
    grid-template-columns: 1fr;
}

/* ==========================================
   DEFAULT PAGE STYLE
========================================== */

.royal-page {
    padding: 160px 0 90px;

    background: var(--royal-white);
}

.royal-page__header {
    max-width: 820px;
    margin: 0 auto 42px;

    text-align: center;
}

.royal-page__title {
    margin: 0;

    color: var(--royal-navy);

    font-family: var(--royal-font-heading);
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.royal-page__subtitle {
    max-width: 680px;
    margin: 18px auto 0;

    color: var(--royal-text-muted);

    font-family: var(--royal-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.78;
}

.royal-page__content {
    max-width: 920px;
    margin-inline: auto;

    color: var(--royal-text-body);

    font-family: var(--royal-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.78;
}

.royal-page__content p:last-child {
    margin-bottom: 0;
}

/* ==========================================
   CARDS
========================================== */

.royal-card {
    position: relative;
    overflow: hidden;

    color: var(--royal-text-body);
    background: var(--royal-white);
    border: 1px solid var(--royal-line-light);

    box-shadow: var(--royal-shadow-soft);

    transition:
        border-color var(--royal-transition),
        box-shadow var(--royal-transition);
}

.royal-card:hover {
    border-color: var(--royal-line-gold);
    box-shadow: var(--royal-shadow-medium);
}

.royal-card--navy {
    color: var(--royal-white);
    background: var(--royal-navy);
    border-color: rgba(var(--royal-white-rgb), 0.12);
}

.royal-card--navy .royal-card__title,
.royal-card--navy .royal-card__text {
    color: var(--royal-white);
}

.royal-card__media {
    position: relative;
    overflow: hidden;
}

.royal-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform var(--royal-transition-slow);
}

.royal-card:hover .royal-card__media img {
    transform: scale(1.045);
}

.royal-card__content {
    padding: var(--royal-card-padding);
}

.royal-card__title {
    margin: 0 0 12px;

    color: var(--royal-navy);

    font-family: var(--royal-font-heading);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.royal-card__text {
    margin: 0;

    color: var(--royal-text-muted);

    font-family: var(--royal-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.76;
}

/* ==========================================
   GRID HELPERS
========================================== */

.royal-grid {
    display: grid;
    gap: 28px;
}

.royal-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.royal-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.royal-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ==========================================
   VISIBILITY HELPERS
========================================== */

.royal-hidden {
    display: none !important;
}

.royal-desktop-only {
    display: none;
}

.royal-mobile-only {
    display: block;
}

/* ==========================================
   ACCESSIBILITY
========================================== */

:focus-visible {
    outline: 2px solid var(--royal-gold);
    outline-offset: 4px;
}

.screen-reader-text,
.skip-link {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    top: 16px;
    left: 16px;
    z-index: var(--royal-z-modal);

    width: auto;
    height: auto;

    padding: 12px 16px;
    margin: 0;

    clip: auto;
    overflow: visible;

    color: var(--royal-white);
    background: var(--royal-navy);

    font-family: var(--royal-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==========================================
   WORDPRESS HELPERS
========================================== */

.alignwide,
.alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    margin-top: 10px;

    color: var(--royal-text-muted);

    font-family: var(--royal-font-body);
    font-size: 13px;
    line-height: 1.5;
}

.gallery {
    display: grid;
    gap: 18px;
}

.gallery-item {
    margin: 0;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (min-width: 768px) {
    .royal-desktop-only {
        display: block;
    }

    .royal-mobile-only {
        display: none;
    }
}

@media (max-width: 1024px) {
    .royal-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .royal-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .royal-container,
    .royal-container-wide {
        width: min(100% - 32px, 100%);
    }

    .royal-logo,
    .royal-logo-bg {
        width: var(--royal-logo-header-width-mobile);
    }

    .royal-logo-bg--symbol {
        width: var(--royal-logo-symbol-size-mobile);
    }

    .royal-section {
        padding-block: var(--royal-section-sm);
    }

    .royal-section--large,
    .royal-section--xlarge {
        padding-block: var(--royal-section-md);
    }

    .royal-page {
        padding: 120px 0 64px;
    }

    .royal-page__header {
        margin-bottom: 30px;
    }

    .royal-page__title {
        font-size: clamp(34px, 10vw, 52px);
    }

    .royal-page__content {
        font-size: 14px;
    }

    .royal-title {
        font-size: clamp(30px, 9vw, 48px);
    }

    .royal-title--large {
        font-size: clamp(42px, 14vw, 68px);
    }

    .royal-text {
        font-size: 14px;
    }

    .royal-form-grid,
    .royal-grid--2,
    .royal-grid--3,
    .royal-grid--4 {
        grid-template-columns: 1fr;
    }

    .royal-card__content {
        padding: 24px;
    }
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}