/* =============================================================
   ALFANZOO — THE BIG MANGO TREE
   The homepage wayfinder. One illustration, three branches, each
   branch a real link: Book a room, Tour packages, Reserve a table.

   WHY A SEPARATE FILE
   It is used by exactly one page (the homepage, via
   includes/mango-tree.php) and it is self-contained: the tree is a
   designed object, not a component borrowed from somewhere else in
   the stylesheets. Loading it only where it is drawn also keeps the
   weight off every other page.

   Loaded BY includes/mango-tree.php, the way includes/table-modal.php
   owns its own styling, so the art and its CSS cannot be separated by
   a later edit.

   NAMING
   .mango-sign*  = the teak signs drawn INSIDE the SVG
   .mango-way*   = the HTML links BELOW the SVG
   These used to share one class (.mango-plaque). The HTML rules, which
   set transform on hover, were then also applied to the SVG <g>, whose
   transform attribute positions the sign: hovering a sign threw it to
   the corner of the drawing. Two jobs, two names.

   Site variables used, each with a fallback so the file also works alone:
   --font-display, --font-body, --muted-on-dark
   ============================================================= */

.mango-section {
    --mango-leaf: #2F5D3A;
    --mango-leaf-lit: #4E8A4A;
    --mango-bark: #4A3A28;
    --mango-bark-lit: #6B543A;
    --mango-gold: #E9B949;
    --mango-gold-deep: #C8912A;
    --mango-cream: #F6E9C8;
    --mango-teak: #3B2818;
    --mango-night: #14201A;
    --mango-muted: var(--muted-on-dark, rgba(255, 255, 255, .72));
    --mango-display: var(--font-display, Georgia, "Times New Roman", serif);
    --mango-body: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
    position: relative;
    overflow: hidden;
    padding: 3.75rem 5% 4rem;
    border-top: 1px solid rgba(233, 185, 73, .32);
    background:
        radial-gradient(70% 55% at 50% 10%, rgba(198, 161, 91, .16), transparent 70%),
        radial-gradient(40% 40% at 18% 88%, rgba(78, 138, 74, .16), transparent 70%),
        linear-gradient(180deg, #1A211C 0%, #14201A 55%, #16241C 100%);
    color: #fff;
}

.mango-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------------------------- heading ------------------------- */

.mango-head {
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto .6rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--mango-gold);
}
.mango-head h2 {
    font-family: var(--mango-display);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 .5rem;
    text-wrap: balance;
}
.mango-head p {
    color: var(--mango-muted);
    font-family: var(--mango-body);
    font-weight: 300;
    max-width: 56ch;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    text-wrap: balance;
}

/* ---------------------------- the illustration ---------------- */

.mango-figure {
    margin: 0 auto;
    max-width: 1000px;
}
.mango-figure svg {
    display: block;
    width: 100%;
    height: auto;
    /* The tree is the loudest thing in this band; letting it bleed a little
       past the text column is what stops it reading as an inline diagram. */
    max-height: 70vh;
    overflow: visible;
}
.mango-caption {
    margin-top: .5rem;
    text-align: center;
    color: var(--mango-muted);
    font-family: var(--mango-display);
    font-style: italic;
    font-size: .98rem;
    letter-spacing: .01em;
    text-wrap: balance;
}

/* --- the world behind the tree --------------------------------
   Everything here is aria-hidden in the markup. */
.mango-star { fill: #F3E7C4; opacity: .55; }
.mango-range-far  { fill: #1D2E26; }
.mango-range-near { fill: #17261F; }
.mango-bank { fill: #0F1A14; }
.mango-trunk-shadow { fill: rgba(0, 0, 0, .38); }
.mango-ripple {
    fill: none;
    stroke: rgba(198, 161, 91, .18);
    stroke-width: 2;
    stroke-linecap: round;
}
.mango-ripple-moon { stroke: rgba(243, 231, 196, .42); }
.mango-bark-line {
    fill: none;
    stroke: #2A2016;
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .6;
}

/* --- branches -------------------------------------------------
   Every visual part of a branch sits inside one <a>. The group is
   the hit target, the <title> is the accessible name, and the focus
   ring is drawn on the branch itself (see below). */
.mango-branch { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.mango-branch .mango-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 64;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mango-branch .mango-bark {
    fill: none;
    stroke: var(--mango-bark);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .35s ease;
}
.mango-branch .mango-bark-hi {
    fill: none;
    stroke: var(--mango-bark-lit);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
    transition: opacity .35s ease;
}
.mango-branch .mango-canopy {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* The gold glow that outlines the branch. It is a wide stroke drawn BEHIND
   the bark (the markup puts it before the bark paths), so only the margin
   past the bark shows: an outline, not a line hidden under the wood. Shown
   on hover (for a pointer) and on keyboard focus (always). */
.mango-ring {
    fill: none;
    stroke: var(--mango-gold);
    stroke-width: 44;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity .3s ease;
}

/* Keyboard focus. The browser's default outline on an SVG <a> traces a
   rectangle around the whole viewBox and is effectively invisible, so
   the glow is drawn on the branch instead, with a gold frame on the sign. */
.mango-branch:focus-visible .mango-ring { opacity: .6; }
.mango-branch:focus-visible .mango-sign-board { stroke: var(--mango-gold); stroke-width: 4; }

/* Hover is gated on a real hover device. On a touch screen :hover sticks
   after a tap, which left one branch lit and lifted for no reason. */
@media (hover: hover) {
    .mango-branch:hover .mango-bark { stroke: #5B4830; }
    .mango-branch:hover .mango-bark-hi { opacity: .95; }
    .mango-branch:hover .mango-canopy { transform: translateY(-7px) scale(1.012); }
    .mango-branch:hover .mango-ring { opacity: .4; }
    .mango-branch:hover .mango-mango use { filter: brightness(1.12) saturate(1.1); }
    .mango-branch:hover .mango-sign-swing { transform: rotate(-2.2deg); }
    .mango-branch:hover .mango-sign-board { fill: var(--mango-gold); }
    .mango-branch:hover .mango-sign-frame { stroke: rgba(59, 40, 24, .5); }
    .mango-branch:hover .mango-sign-title { fill: #2A1C10; }
    .mango-branch:hover .mango-sign-sub { fill: #4A3318; }
}

/* --- the fruit ------------------------------------------------ */
.mango-mango {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: mangoSway 5.4s ease-in-out infinite;
}
.mango-mango use { transition: filter .35s ease; }
@keyframes mangoSway {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3.5deg); }
}

/* --- the lanterns ---------------------------------------------
   The glow breathes; the lantern itself does not move. */
.mango-lantern-halo { animation: mangoGlow 3.8s ease-in-out infinite; animation-delay: inherit; }
.mango-lantern { animation: none; }
@keyframes mangoGlow {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}

/* --- the prayer flags ------------------------------------------ */
.mango-flags { pointer-events: none; }
.mango-flag-string {
    fill: none;
    stroke: rgba(198, 161, 91, .85);
    stroke-width: 1.8;
    stroke-linecap: round;
}
.mango-flag { opacity: .93; }

/* --- the hanging signs ----------------------------------------
   Teak boards with a carved gold frame. Title in the display serif,
   sentence case: it is a sign, not a label. */
.mango-sign-swing {
    transition: transform .7s cubic-bezier(.25, 1.5, .4, 1);
}
.mango-sign-cord {
    fill: none;
    stroke: rgba(198, 161, 91, .85);
    stroke-width: 2;
    stroke-linecap: round;
}
.mango-sign-knot { fill: #C6A15B; stroke: #4A3A28; stroke-width: 1.5; }
.mango-sign-board {
    fill: url(#mangoSignWood);
    stroke: rgba(233, 185, 73, .6);
    stroke-width: 2;
    transition: fill .3s ease;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
}
.mango-sign-frame {
    fill: none;
    stroke: rgba(233, 185, 73, .3);
    stroke-width: 1.5;
    transition: stroke .3s ease;
}
.mango-sign-nail { fill: rgba(233, 185, 73, .6); }
.mango-sign-title {
    fill: var(--mango-cream);
    font-family: var(--mango-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .01em;
    text-anchor: middle;
    transition: fill .3s ease;
}
.mango-sign-sub {
    fill: #D9C089;
    font-family: var(--mango-body);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .02em;
    text-anchor: middle;
    transition: fill .3s ease;
}

/* The in-art signs are sized for a desktop tree. Below the breakpoint the
   tree is roughly a third of that width, 28px becomes 8px and the three
   signs overlap the trunk, so they are dropped and the HTML links below
   take over entirely. They are the same three links, so nothing is lost,
   only the placement changes. */
@media (max-width: 860px) {
    .mango-sign { display: none; }
    .mango-figure { max-width: 520px; }
    .mango-figure svg { max-height: 48vh; }
    .mango-section { padding: 2.5rem 5% 3rem; }
}

/* ------------------------- the HTML links --------------------- */
/* Always rendered, even though the SVG carries its own signs. They are
   the same three links, which means: the targets are reachable if the
   SVG fails to load or is stripped by a sanitiser, the labels are real
   text a screen reader reads in the document's own order, and a phone
   gets three comfortable tap targets instead of three fruit.

   One bordered strip with dividers rather than three separate cards:
   they are three doors into one place, not three unrelated things. */

.mango-ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.4rem auto 0;
    max-width: 1000px;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(198, 161, 91, .3);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(244, 227, 188, .04);
}
.mango-ways li { display: flex; }
.mango-ways li + li { border-left: 1px solid rgba(198, 161, 91, .22); }

.mango-way {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: 1;
    box-sizing: border-box;
    padding: 1.1rem 1.25rem;
    color: #fff;
    text-decoration: none;
    text-align: left;
    transition: background .3s ease;
}
.mango-way:hover { background: rgba(233, 185, 73, .12); }
.mango-way:focus-visible {
    outline: 2px solid var(--mango-gold);
    outline-offset: -4px;
    background: rgba(233, 185, 73, .12);
}
.mango-way-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(233, 185, 73, .14);
    border: 1px solid rgba(233, 185, 73, .4);
    color: var(--mango-gold);
    font-size: 1.02rem;
}
.mango-way-txt { display: block; min-width: 0; }
.mango-way-txt b {
    display: block;
    font-family: var(--mango-display);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
}
.mango-way-txt span {
    display: block;
    margin-top: .2rem;
    font-family: var(--mango-body);
    font-size: .88rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--mango-muted);
}

@media (max-width: 720px) {
    .mango-ways {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-top: 1rem;
    }
    .mango-ways li + li {
        border-left: 0;
        border-top: 1px solid rgba(198, 161, 91, .22);
    }
    .mango-way { min-height: 72px; padding: .8rem 1rem; }
}
@media (max-width: 420px) {
    .mango-section { padding: 2.1rem 5% 2.5rem; }
    .mango-head { padding-left: .9rem; }
    .mango-head h2 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
    .mango-head p { font-size: .95rem; }
    .mango-way-ico { width: 40px; height: 40px; }
    .mango-way-txt b { font-size: 1.1rem; }
    .mango-way-txt span { font-size: .84rem; }
}

/* Reduced motion. The fruit sway, the lantern glow and the sign swing are
   all decoration; removing them changes nothing a guest is trying to read. */
@media (prefers-reduced-motion: reduce) {
    .mango-mango, .mango-lantern-halo { animation: none; }
    .mango-branch .mango-canopy,
    .mango-sign-swing { transition: none; }
    .mango-branch:hover .mango-canopy,
    .mango-branch:hover .mango-sign-swing { transform: none; }
}