/*
 * Matches the approved design (SANY V3 Windham mock: "SANY Windham Page .png"
 * / "SANY Windham Mobile.png").
 *
 * The .sany-snow-report* rules below are the Snow Report widget's own
 * wrapper and grid. The .sany-panel* rules are the shared panel/row styling,
 * neutral so the Info Panel widget (docs/info-panel-spec.md) can reuse it
 * for pixel-identical panels without a second copy that would drift.
 *
 * The design's section sits on a #f4f7f9 background. The page supplies that
 * background, not this stylesheet -- nothing here paints one, so the block
 * has to read correctly sitting on top of it instead.
 *
 * No !important anywhere, and every selector is scoped under a sany-
 * prefixed class so none of this can leak into the surrounding theme.
 */

.sany-snow-report__area {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
}

.sany-snow-report__closed {
    margin: 0;
    font-style: italic;
    opacity: 0.75;
}

/*
 * The panels are the grid, not .sany-snow-report itself. .sany-snow-report
 * can hold an optional heading (.sany-snow-report__area) ahead of this --
 * making the heading a grid item alongside the two panels put "Current
 * Conditions" in the right-hand column and wrapped "Other Conditions" down
 * into the left, since a 2-column grid with 3 items places them left,
 * right, left. Restructuring so only the panels are grid children makes
 * that layout impossible regardless of whether the heading is present.
 *
 * This widget only ever renders the two panels, so the grid is two columns
 * side by side by default (matching the desktop mock, which is a 3-column
 * grid we're only using 2 slots of), collapsing to one at 700px -- the same
 * breakpoint the full design's grid collapses to a single column at.
 */
.sany-snow-report__panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    row-gap: 48px;
}

/*
 * .sany-panel and its children are neutral, not scoped under
 * .sany-snow-report: the Info Panel widget (docs/info-panel-spec.md) reuses
 * this exact styling for pixel-identical panels, and a second copy under a
 * different scope would only guarantee the two drift. Still prefixed
 * sany- so nothing leaks into the theme.
 */

/*
 * The design's accent: a thin #9dcb3b rule down the left edge of each
 * panel, spanning the heading and every row below it. A border on the
 * panel itself, rather than on the heading or an individual row, is what
 * makes it span both without extra markup -- it naturally covers the full
 * height of whatever the panel contains.
 */
.sany-panel {
    border-left: 2px solid #9dcb3b;
    padding-left: 18px;
}

.sany-panel__heading {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: #101010;
}

.sany-panel__list {
    margin: 0;
}

/*
 * Each row is its own 2-column grid rather than a flex row: a flex row
 * with justify-content:space-between sizes the label column to its own
 * text and pins the value hard to the panel's right edge, so the value's
 * starting position drifts with every label's length. Grid gives every
 * row the same fixed-width first column, so the value column lines up at
 * a consistent x regardless of how long "Snowmaking Last 24 Hours" is
 * next to "Hours" -- matching the design, where every value in a panel
 * starts at the same offset.
 */
.sany-panel__item {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;
    padding: 10px 0;
    font-size: 16px;
    border-bottom: 1px solid #dfe3e8;
}

/* No divider under the last row of a panel. */
.sany-panel__item:last-child {
    border-bottom: none;
}

.sany-panel__item dt {
    font-weight: 400;
    color: #101010;
}

.sany-panel__item dd {
    margin: 0;
    font-weight: 400;
    text-align: left;
    color: #101010;
}

@media (max-width: 700px) {
    .sany-snow-report__panels {
        grid-template-columns: 1fr;
    }
}

/*
 * Contact panel row shapes (docs/info-panel-spec.md, Info Panel widget).
 * All three still get .sany-panel__item's font-size, padding, and divider;
 * only `display` is overridden per shape, because these three rows are not
 * uniform label/value pairs and the shared rule's 2-column grid would
 * squeeze a label-less link into its 46% first column, or pin an
 * inline_link's value out to the far right instead of beside its label.
 *
 * Values are taken from the Figma export's .stat-list--contact /
 * .stat-list__link / .stat-list__block (html-css-design/styles.css), except
 * .sany-panel__item--inline's `gap`: the export leaves that row's gap at
 * the base .stat-list li rule's 16px, which -- reproduced literally --
 * spaces "Phone:" far from its value. The design PNG (SANY Windham Page
 * .png) shows a gap about the width of a single space; 6px matches that,
 * 16px does not, and the PNG is the tiebreaker per docs/info-panel-spec.md.
 */
.sany-panel__link {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

/* link: a bare bold link, no label. */
.sany-panel__item--link {
    display: block;
}

/* inline_link: "Label:" then a bold link, sitting together at the row's
   left edge rather than pushed apart by the shared grid's fixed columns. */
.sany-panel__item--inline {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
}

/* block: label above value, stacked. */
.sany-panel__item--block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/*
 * Page-level grid for arranging the plugin's shortcodes outside Elementor
 * (docs/info-panel-spec.md's seven-panel layout, reproduced here since a
 * shortcode-driven page has no Elementor columns to place them in). Matches
 * the Figma export's .info-grid (html-css-design/styles.css): 3 equal
 * columns, 64px column-gap, 48px row-gap, collapsing to 2 columns at
 * 1024px and 1 at 700px.
 *
 * The Snow Report widget carries .sany-info-grid__span-2 because it renders
 * both conditions panels inside its own internal 2-column grid
 * (.sany-snow-report__panels, above), which already uses a 64px
 * column-gap. Spanning exactly 2 of these 3 outer columns with a matching
 * 64px gap makes the arithmetic work out so all three row-1 panels come out
 * the same width:
 *
 *   outer column width   c = (W - 2*64) / 3
 *   span-2 width         s = 2c + 64
 *   inner panel width    d = (s - 64) / 2  =  c
 *
 * d and c are the same expression, so the widget's two internal panels and
 * the third outer column (Contact Information) are pixel-identical -- but
 * only because both grids share the same 64px gap and the span is exactly
 * 2 of 3 columns. Change either gap, or the span, and the widths diverge.
 */
.sany-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 64px;
    row-gap: 48px;
}

.sany-info-grid__span-2 {
    grid-column: span 2;
}

/* 2 columns: the span-2 item still spans both, filling the row on its own
   (matching the Snow Report widget's own 700px-collapse point being lower
   than this one, so its internal 2-column grid stays intact here). */
@media (max-width: 1024px) {
    .sany-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1 column: a span-2 item on a 1-column grid would force an implicit extra
   track and overflow, so the span has to drop to 1 here -- matching
   .sany-snow-report__panels' own collapse to a single column at the same
   breakpoint, so the widget's two panels stack instead of spilling out. */
@media (max-width: 700px) {
    .sany-info-grid {
        grid-template-columns: 1fr;
    }

    .sany-info-grid__span-2 {
        grid-column: span 1;
    }
}

/*
 * Mountain Info widget (elementor/class-mountain-info-widget.php): Total
 * Trails and Total Lifts sit in one .sany-info-grid cell -- row 2, column 1
 * -- rather than being a third grid row, per the design. A plain flex
 * column, gapped to match .sany-info-grid's own 48px row-gap, stacks the
 * two panels inside that single cell without nesting a second grid inside
 * a grid cell.
 */
.sany-info-grid__stack {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/*
 * Mountain Status widget (elementor/class-status-widget.php). Matches the
 * hand-built badge it replaces in the mountain page heroes, measured on
 * staging's West Mountain page: Museo-Slab at 11.55px, uppercase, white, a
 * 1px border in the same colour, 6px corners, 176px wide by 43px tall with
 * the text centred, and 30px of space before the mountain name below it.
 * The first version of these defaults sized the pill to its text in the
 * theme's body font, which looked like a different element sitting in the
 * old badge's place.
 *
 * min-width rather than width, so a longer label ("Closed for the Season")
 * still fits on one line. Museo-Slab is the site's own custom font
 * (Elementor Pro > Custom Fonts); sans-serif covers a page that doesn't load
 * it. Every property here can be overridden from the widget's Style tab,
 * and the 30px from its Advanced tab.
 *
 * Applies to the widget and to the [sany_mountain_status] shortcode alike.
 * The shortcode's style="plain" adds .sany-status--plain, which opts out:
 * for a badge typed into a text widget that already draws its own border.
 * 0.11.0 and 0.11.1 styled only the widget's wrapper, so the shortcode in an
 * Elementor Shortcode widget rendered as dark body text, close to invisible
 * on the navy hero.
 *
 * The 30px below is on the badge itself, not on the widget's wrapper, so
 * the widget and the shortcode in a Shortcode widget come out identical:
 * both measured 73px tall with 30px from the badge to the next element on
 * staging's West Mountain page. 0.11.2 had it on the wrapper, which the
 * shortcode doesn't output, so the shortcode's badge sat against the
 * mountain name. vertical-align: top keeps the line box from adding a few
 * pixels of descender space under an inline-block.
 */

.sany-status:not(.sany-status--plain) {
    display: inline-block;
    box-sizing: border-box;
    min-width: 176px;
    padding: 0 18px;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: #fff;
    font-family: Museo-Slab, sans-serif;
    font-size: 11.55px;
    font-weight: 400;
    line-height: 41px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: top;
    margin-bottom: 30px;
}


/* elementor/class-events-widget.php */
.sany-events__content {
    display: inline-block;
    box-sizing: border-box;
    min-width: 176px;
    padding: 0 18px;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: #fff;
    font-family: Museo-Slab, sans-serif;
    font-size: 11.55px;
    font-weight: 400;
    line-height: 41px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: top;
    margin-bottom: 30px;
}
.color-blue .sany-events__content {
    color:#1C3664;
}
.elementor-widget-sany_detailed_events *{
    font-family: Roboto;
    font-weight: 400;
    font-size: 20px;
}