/* =========================================================
   Platja Segura — Identitat visual
   Paleta: Mediterrani + tecnologia
   ========================================================= */

:root {
    --ps-deep-sea: #063B5C;
    --ps-ocean: #087EA4;
    --ps-turquoise: #16B8A6;
    --ps-sand: #F4E9D3;
    --ps-off-white: #F8FAF9;
    --ps-sun: #FFC857;

    --ps-success: #1FA97C;
    --ps-warning: #FEBF00;       /* groc OFICIAL de la web d'Estat de les Platges (interior.gencat.cat) */
    --ps-warning-text: #7A5D00;  /* variant fosca del groc oficial, per a text sobre fons clar (contrast) */
    --ps-danger: #E5484D;
    --ps-info: var(--ps-ocean);

    --ps-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --ps-font-heading: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;

    --ps-radius: 1rem;
}

body {
    font-family: var(--ps-font-body);
    background-color: var(--ps-off-white);
    color: var(--ps-deep-sea);
}

h1, h2, h3, h4, h5, h6,
.ps-font-heading {
    font-family: var(--ps-font-heading);
    font-weight: 700;
    color: var(--ps-deep-sea);
}

a {
    color: var(--ps-ocean);
}

/* -------------------- Botons de marca -------------------- */
.btn-ps-primary {
    background-color: var(--ps-turquoise);
    border-color: var(--ps-turquoise);
    color: #fff;
    font-weight: 600;
}
.btn-ps-primary:hover,
.btn-ps-primary:focus {
    background-color: var(--ps-ocean);
    border-color: var(--ps-ocean);
    color: #fff;
}

/* -------------------- Navbar -------------------- */
.ps-navbar {
    background-color: var(--ps-off-white);
    box-shadow: 0 2px 12px rgba(6, 59, 92, 0.08);
}
.ps-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.ps-logo {
    height: 50px;
    width: auto;
    max-width: 100%;
    display: block;
}
@media (max-width: 575.98px) {
    .ps-logo { height: 38px; }
}
.ps-brand--footer { color: #fff; font-size: 1.35rem; }
.ps-brand--footer i { color: var(--ps-sun); }
.ps-logo-footer { height: 44px; width: auto; max-width: 100%; display: block; }

/* -------------------- Hero -------------------- */
.ps-hero {
    background: linear-gradient(135deg, var(--ps-deep-sea) 0%, var(--ps-ocean) 100%);
    color: #fff;
}
.ps-hero__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    color: #fff;
}
.ps-hero__subtitle {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
}
.ps-hero-search .form-control { min-height: 3rem; }

/* -------------------- Accés ràpid -------------------- */
.ps-quick-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    background: #fff;
    border-radius: var(--ps-radius);
    box-shadow: 0 2px 10px rgba(6,59,92,0.06);
    text-decoration: none;
    color: var(--ps-deep-sea);
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.ps-quick-access:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(6,59,92,0.12);
    color: var(--ps-deep-sea);
}
.ps-quick-access i { font-size: 1.75rem; color: var(--ps-turquoise); }
.ps-quick-access__count {
    font-weight: 400;
    font-size: .8rem;
    color: #6c757d;
}

/* -------------------- Estat del mar (home) -------------------- */
.ps-section-sea {
    position: relative;
    background-color: var(--ps-sand);
    padding-top: 1.5rem;
    padding-bottom: 75px;
}
/* Efecte "onatge": només a baix (a dalt ja hi posa la vora .ps-territory-hero). */
.ps-section-sea::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 28px;
    background-repeat: repeat-x;
    background-size: 60px 28px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M0,14 C15,0 45,28 60,14 L60,28 L0,28 Z' fill='%23F8FAF9'/%3E%3C/svg%3E");
}
.ps-stat-card {
    background: #fff;
    border-radius: var(--ps-radius);
    padding: 1.25rem .5rem;
    height: 100%;
}
.ps-stat-card i { font-size: 1.5rem; display: block; margin-bottom: .25rem; }
.ps-stat-card__num { display: block; font-family: var(--ps-font-heading); font-size: 1.75rem; font-weight: 700; }
.ps-stat-card__label { font-size: .8rem; color: #6c757d; }
.ps-stat-card--success i, .ps-stat-card--success .ps-stat-card__num { color: var(--ps-success); }
.ps-stat-card--warning i, .ps-stat-card--warning .ps-stat-card__num {
    color: var(--ps-warning);
    text-shadow: 0 0 1px rgba(6, 59, 92, 0.55), 0 0 1px rgba(6, 59, 92, 0.55);
}
.ps-stat-card--danger i, .ps-stat-card--danger .ps-stat-card__num { color: var(--ps-danger); }
.ps-stat-card--info i, .ps-stat-card--info .ps-stat-card__num { color: var(--ps-info); }

/* -------------------- Cards de platja -------------------- */
.ps-beach-card { border-radius: var(--ps-radius); overflow: hidden; transition: transform .15s ease; }
.ps-beach-card:hover { transform: translateY(-3px); }
.ps-beach-card__flag {
    padding: .4rem .75rem;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
}
.ps-flag--success { background-color: var(--ps-success); }
.ps-flag--warning { background-color: var(--ps-warning); color: var(--ps-deep-sea); }
.ps-flag--danger { background-color: var(--ps-danger); }
.ps-flag--secondary { background-color: #9aa5ad; }

.ps-badge-soft {
    background-color: rgba(8,126,164,0.1);
    color: var(--ps-ocean);
    font-weight: 600;
    padding: .4rem .6rem;
}

.ps-badge-updated {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    color: #6c757d;
}
.ps-badge-updated--sense-dades { color: #adb5bd; }
.ps-badge-updated__exacte { color: #adb5bd; font-weight: 400; }
.ps-lead--intro { color: #33454e; font-size: 1.05rem; }
.ps-section-intro { color: #6c757d; margin-bottom: 1rem; }
.ps-distance { color: var(--ps-ocean); font-weight: 600; }

.ps-frase-bany {
    font-size: 1.15rem;
    font-weight: 700;
    padding: .5rem 0 .5rem .9rem;
    border-left: 5px solid #9aa5ad;
    margin-bottom: 1rem;
}
.ps-frase-bany--success { border-left-color: var(--ps-success); color: var(--ps-success); }
.ps-frase-bany--warning { border-left-color: var(--ps-warning); color: var(--ps-warning-text); }
.ps-frase-bany--danger  { border-left-color: var(--ps-danger); color: var(--ps-danger); }
.ps-frase-bany--secondary { color: #6c757d; }

/* -------------------- Subbarra fixa mòbil (fitxa de platja) -------------------- */
.ps-mobile-subbar {
    top: 60px; /* ajustar si l'alçada real de .ps-navbar és diferent */
    z-index: 1015; /* just per sota del navbar (sticky-top de Bootstrap) */
    background: #fff;
    box-shadow: 0 2px 10px rgba(6,59,92,0.1);
    border-bottom: 1px solid rgba(6,59,92,0.08);
}
.ps-mobile-subbar__info { min-width: 0; max-width: 60%; }
.ps-flag-mini {
    font-size: .75rem;
    padding: .35rem .6rem;
    color: #fff;
    font-weight: 700;
}
.ps-flag-mini--success { background-color: var(--ps-success); }
.ps-flag-mini--warning { background-color: var(--ps-warning); color: var(--ps-deep-sea); }
.ps-flag-mini--danger { background-color: var(--ps-danger); }
.ps-flag-mini--secondary { background-color: #9aa5ad; }

/* -------------------- Llista de serveis (llegible per LLMs) -------------------- */
.ps-service-list li {
    padding: .3rem 0;
    border-bottom: 1px dashed rgba(6,59,92,0.08);
    font-size: .92rem;
}
.ps-service-list li:last-child { border-bottom: none; }

.ps-horari-periode {
    padding: .5rem 0;
    border-bottom: 1px dashed rgba(6,59,92,0.08);
}
.ps-horari-periode:last-child { border-bottom: none; padding-bottom: 0; }

/* -------------------- Pàgina "Què signifiquen les banderes" -------------------- */
.ps-flag-explainer {
    background: #fff;
    border-radius: var(--ps-radius);
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(6,59,92,0.06);
    border-top: 4px solid transparent;
}
.ps-flag-explainer i { font-size: 2rem; }
.ps-flag-explainer--success { border-top-color: var(--ps-success); }
.ps-flag-explainer--success i { color: var(--ps-success); }
.ps-flag-explainer--warning { border-top-color: var(--ps-warning); }
.ps-flag-explainer--warning i { color: var(--ps-warning-text); }
.ps-flag-explainer--danger { border-top-color: var(--ps-danger); }
.ps-flag-explainer--danger i { color: var(--ps-danger); }

.ps-flag-list { list-style: none; padding-left: 0; max-width: 70ch; }
.ps-flag-list li { padding: .4rem 0; border-bottom: 1px dashed rgba(6,59,92,0.08); }
.ps-flag-list li:last-child { border-bottom: none; }

.ps-video-embed { border-radius: var(--ps-radius); overflow: hidden; max-width: 800px; box-shadow: 0 4px 16px rgba(6,59,92,0.12); }

.ps-source-box {
    background: var(--ps-sand);
    border-radius: var(--ps-radius);
    padding: 1rem 1.25rem;
    font-size: .9rem;
    color: #4a5a63;
}

.ps-source-notice {
    background: #fff;
    border: 1px dashed rgba(6,59,92,0.25);
    border-radius: var(--ps-radius);
    padding: 1.25rem 1.5rem;
    color: #4a5a63;
}
.ps-source-notice h2 { color: var(--ps-deep-sea); font-size: 1rem; }
.ps-source-notice a { color: var(--ps-ocean); }

/* -------------------- Costes -------------------- */
.ps-coast-card {
    display: block;
    background: linear-gradient(135deg, var(--ps-deep-sea), var(--ps-ocean));
    color: #fff;
    border-radius: var(--ps-radius);
    padding: 1.5rem;
    text-decoration: none;
    height: 100%;
}
.ps-coast-card h3 { color: #fff; }
.ps-coast-card__cta { font-weight: 600; color: var(--ps-sun); }

/* -------------------- Territori (costa/municipi) -------------------- */
.ps-territory-hero {
    position: relative;
    background-color: var(--ps-sand);
    padding-top: 50px;
}
.ps-territory-hero::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 28px;
    background-repeat: repeat-x;
    background-size: 60px 28px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M0,14 C15,28 45,0 60,14 L60,0 L0,0 Z' fill='%23F8FAF9'/%3E%3C/svg%3E");
}
.ps-lead { font-size: 1.05rem; color: #4a5a63; }
.ps-municipi-chip {
    display: block;
    background: #fff;
    border-radius: .6rem;
    padding: .6rem .9rem;
    text-decoration: none;
    color: var(--ps-deep-sea);
    box-shadow: 0 1px 6px rgba(6,59,92,0.06);
}

/* -------------------- Fitxa de platja -------------------- */
.ps-beach-hero {
    position: relative;
    background-color: var(--ps-sand);
    padding-top: 50px;
    padding-bottom: 75px;
}
.ps-beach-hero::before,
.ps-beach-hero::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 28px;
    background-repeat: repeat-x;
    background-size: 60px 28px;
    pointer-events: none;
}
.ps-beach-hero::before {
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M0,14 C15,28 45,0 60,14 L60,0 L0,0 Z' fill='%23F8FAF9'/%3E%3C/svg%3E");
}
.ps-beach-hero::after {
    bottom: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M0,14 C15,0 45,28 60,14 L60,28 L0,28 Z' fill='%23F8FAF9'/%3E%3C/svg%3E");
}
.ps-flag-hero {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.25rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
}
.ps-flag-hero i { font-size: 1.4rem; }
.ps-flag-hero--success { background-color: var(--ps-success); }
.ps-flag-hero--warning { background-color: var(--ps-warning); color: var(--ps-deep-sea); }
.ps-flag-hero--danger { background-color: var(--ps-danger); }
.ps-flag-hero--secondary { background-color: #9aa5ad; }

.ps-now-card { background: #fff; border-radius: var(--ps-radius); padding: 1.5rem; box-shadow: 0 2px 12px rgba(6,59,92,0.06); }
.ps-now-icon { font-size: 1.5rem; color: var(--ps-ocean); margin-bottom: .35rem; display: block; }
.ps-now-val { font-family: var(--ps-font-heading); font-weight: 700; font-size: 1.35rem; }
.ps-now-label { font-size: .78rem; color: #6c757d; }

.ps-service-group { background: #fff; border-radius: var(--ps-radius); padding: 1rem; }
.ps-service-group__title { color: var(--ps-ocean); }
.ps-meteo-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: .85rem;
}
.ps-meteo-item:first-of-type { margin-top: 0; }
.ps-meteo-item__icon {
    flex: 0 0 auto;
    width: 2rem;
    text-align: center;
    font-size: 1.7rem;
    color: var(--ps-ocean);
}
.ps-meteo-item__label { display: block; font-size: .78rem; color: #6c757d; }
.ps-meteo-item__value { display: block; font-family: var(--ps-font-heading); font-weight: 700; font-size: 1.05rem; }

.ps-feature-card {
    background: #fff; border-radius: var(--ps-radius); padding: 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    font-weight: 600; height: 100%;
}
.ps-feature-card i { font-size: 1.4rem; color: var(--ps-turquoise); }

/* -------------------- Mapes -------------------- */
.ps-map { height: 320px; border-radius: var(--ps-radius); overflow: hidden; background: #dde8ea; }
.ps-map--platja { height: 220px; }
.ps-map--gran { height: 75vh; min-height: 420px; }

.ps-map-list {
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--ps-radius);
    box-shadow: 0 2px 10px rgba(6,59,92,0.06);
}
.ps-map-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(6,59,92,0.06);
    color: var(--ps-deep-sea);
}
.ps-map-list-item:last-child { border-bottom: none; }
.ps-map-list-item:hover { background-color: var(--ps-off-white); }
.ps-map-list-item__dot {
    flex: 0 0 auto;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(6,59,92,0.15);
}
.ps-map-list-item__info { flex: 1 1 auto; min-width: 0; }
.ps-dot--success { background-color: var(--ps-success); }
.ps-dot--warning { background-color: var(--ps-warning); }
.ps-dot--danger { background-color: var(--ps-danger); }
.ps-dot--secondary { background-color: #9aa5ad; }

.ps-map-marker-wrapper { background: transparent; border: none; }
.ps-map-marker {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(6,59,92,0.25);
}
/* Clústers: colors de marca en lloc del groc/taronja per defecte de la llibreria */
.marker-cluster-small { background-color: rgba(22,184,166,0.5); }
.marker-cluster-small div { background-color: rgba(22,184,166,0.8); color: #fff; }
.marker-cluster-medium { background-color: rgba(8,126,164,0.5); }
.marker-cluster-medium div { background-color: rgba(8,126,164,0.8); color: #fff; }
.marker-cluster-large { background-color: rgba(6,59,92,0.5); }
.marker-cluster-large div { background-color: rgba(6,59,92,0.85); color: #fff; }

/* -------------------- Cercador -------------------- */
.ps-filter-check {
    background: #fff; border-radius: 2rem; padding: .4rem 1rem .4rem .5rem;
    box-shadow: 0 1px 4px rgba(6,59,92,0.06);
}

/* -------------------- Estats buits / 404 -------------------- */
.ps-empty-state {
    text-align: center; padding: 3rem 1rem; color: #6c757d;
    background: #fff; border-radius: var(--ps-radius); width: 100%;
}
.ps-empty-state i { font-size: 2rem; display: block; margin-bottom: .75rem; color: var(--ps-ocean); }
.ps-404-icon { font-size: 3.5rem; color: var(--ps-ocean); }

/* -------------------- Footer -------------------- */
.ps-footer {
    position: relative;
    background-color: var(--ps-deep-sea);
    color: #fff;
}
.ps-footer::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: #F8FAF9;
    background-repeat: repeat-x;
    background-size: 60px 28px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cpath d='M0,14 C15,28 45,0 60,14 L60,28 L0,28 Z' fill='%23063B5C'/%3E%3C/svg%3E");
}
.ps-footer-links a { color: rgba(255,255,255,0.75); text-decoration: none; }
.ps-footer-links a:hover { color: #fff; }
.ps-footer-links li { margin-bottom: .4rem; }

/* -------------------- Breadcrumb -------------------- */
.ps-breadcrumb .breadcrumb { font-size: .875rem; }

/* -------------------- Accessibilitat: focus visible -------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--ps-sun);
    outline-offset: 2px;
}

/* =========================================================
   FORÇAT: la bandera groga ha de ser groc real (#FFC857), MAI
   taronja, en tots els components on es mostra. S'aplica al final
   del full d'estils, amb !important, per garantir que guanya
   qualsevol altra regla (pròpia o de Bootstrap) i no dependre de
   l'ordre de càrrega ni de la caché de plantilles.
   ========================================================= */
.ps-flag--warning,
.ps-flag-hero--warning,
.ps-flag-mini--warning {
    background-color: #FEBF00 !important;
    color: #063B5C !important;
}
.ps-frase-bany--warning {
    border-left-color: #FEBF00 !important;
    color: #7A5D00 !important;
}
.ps-flag-explainer--warning {
    border-top-color: #FEBF00 !important;
}
.ps-flag-explainer--warning i {
    color: #7A5D00 !important;
}
.ps-stat-card--warning i,
.ps-stat-card--warning .ps-stat-card__num {
    color: #FEBF00 !important;
    text-shadow: 0 0 1px rgba(6, 59, 92, 0.55), 0 0 1px rgba(6, 59, 92, 0.55);
}
/* Per si s'utilitza mai alguna classe nativa de Bootstrap directament */
.bg-warning {
    background-color: #FEBF00 !important;
}
.text-warning {
    color: #7A5D00 !important;
}