/* ==========================================================================
   Untappd Brewery Widget — Theme-Adaptive Styles
   All colours, fonts and sizes inherit from the active WordPress theme.
   Only the Untappd amber (#f5a623) is hard-coded — it carries brand meaning
   (star ratings) and should not be inherited.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root variables — borders/hover adapt to light/dark OS preference.
   Theme authors can override these on .untappd-brewery-widget in their CSS.
   -------------------------------------------------------------------------- */

.untappd-brewery-widget {
    --utw-amber:        #f5a623;   /* Untappd brand — intentionally fixed      */
    --utw-border:       rgba(0,   0,   0,   0.10);  /* light-mode default      */
    --utw-separator:    rgba(0,   0,   0,   0.07);
    --utw-hover-bg:     rgba(0,   0,   0,   0.03);
    --utw-muted:        0.55;      /* opacity multiplier for secondary text     */
    --utw-radius:       8px;
}

@media (prefers-color-scheme: dark) {
    .untappd-brewery-widget {
        --utw-border:    rgba(255, 255, 255, 0.13);
        --utw-separator: rgba(255, 255, 255, 0.08);
        --utw-hover-bg:  rgba(255, 255, 255, 0.04);
    }
}

/* --------------------------------------------------------------------------
   Base — inherit all typographic properties from the theme.
   box-sizing reset applied only to widget children so nothing else is
   affected.
   -------------------------------------------------------------------------- */

.untappd-brewery-widget,
.untappd-brewery-widget *,
.untappd-brewery-widget *::before,
.untappd-brewery-widget *::after {
    box-sizing:  border-box;
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Widget wrapper — no background, no imposed colour.  The border uses the
   adaptive variable so it reads correctly on both light and dark themes.
   -------------------------------------------------------------------------- */

.untappd-widget-inner {
    border:        1px solid var(--utw-border);
    border-radius: var(--utw-radius);
    overflow:      hidden;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.untappd-widget-header {
    display:       flex;
    align-items:   center;
    gap:           0.5em;
    padding:       1em 1.25em 0.75em;
    border-bottom: 1px solid var(--utw-separator);
}

.untappd-widget-icon {
    color:       var(--utw-amber);
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

/* Title — let the theme's .widget-title / heading rules win entirely;
   only reset margin so it sits flush in the flex row. */
.untappd-brewery-widget .widget-title,
.untappd-brewery-widget h2,
.untappd-brewery-widget h3 {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Check-in list
   -------------------------------------------------------------------------- */

.untappd-checkins {
    list-style: none;
    margin:     0;
    padding:    0;
}

.untappd-checkin {
    display:       flex;
    gap:           0.8em;
    padding:       0.875em 1.25em;
    border-bottom: 1px solid var(--utw-separator);
    transition:    background 0.15s ease;
}

.untappd-checkin:last-child {
    border-bottom: none;
}

.untappd-checkin:hover {
    background: var(--utw-hover-bg);
}

/* --------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------- */

.untappd-checkin__avatar {
    flex-shrink: 0;
    width:       2.75em;
    height:      2.75em;
    line-height: 1;
}

.untappd-checkin__avatar img {
    width:         2.75em;
    height:        2.75em;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--utw-border);
    display:       block;
}

/* Fallback placeholder when no avatar URL is provided.
   Background and text colour both inherit from the theme. */
.untappd-checkin__avatar-placeholder {
    width:           2.75em;
    height:          2.75em;
    border-radius:   50%;
    border:          2px solid var(--utw-border);
    background:      var(--utw-border);      /* subtle tinted circle          */
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1em;
    font-weight:     700;
    color:           inherit;
}

/* --------------------------------------------------------------------------
   Body — content to the right of the avatar
   -------------------------------------------------------------------------- */

.untappd-checkin__body {
    flex:      1;
    min-width: 0;
}

/* User name + relative timestamp */

.untappd-checkin__meta {
    display:       flex;
    align-items:   baseline;
    gap:           0.5em;
    flex-wrap:     wrap;
    margin-bottom: 0.3em;
}

.untappd-checkin__user {
    font-size:     0.875em;
    font-weight:   700;
    color:         inherit;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.untappd-checkin__time {
    font-size:   0.72em;
    opacity:     var(--utw-muted);
    white-space: nowrap;
    margin-left: auto;           /* push to the right of the meta row          */
}

/* Beer label thumbnail + name + style */

.untappd-checkin__beer {
    display:       flex;
    align-items:   center;
    gap:           0.55em;
    margin-bottom: 0.35em;
}

.untappd-checkin__beer-label {
    width:         2.25em;
    height:        2.25em;
    border-radius: 3px;
    object-fit:    cover;
    flex-shrink:   0;
    border:        1px solid var(--utw-border);
}

.untappd-checkin__beer-text {
    display:        flex;
    flex-direction: column;
    gap:            0.1em;
    min-width:      0;
}

.untappd-checkin__beer-name {
    font-size:       0.9em;
    font-weight:     700;
    color:           inherit;
    text-decoration: none;
    display:         block;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    line-height:     1.25;
    transition:      opacity 0.15s;
}

a.untappd-checkin__beer-name:hover {
    opacity:         0.7;
    text-decoration: underline;
}

.untappd-checkin__beer-style {
    font-size:      0.7em;
    opacity:        var(--utw-muted);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Star rating
   Stars use the Untappd amber — the only intentionally fixed colour.
   Empty stars are the same amber at low opacity so they work on any
   background without needing a separate dark/light rule.
   -------------------------------------------------------------------------- */

.untappd-checkin__rating {
    display:       flex;
    align-items:   center;
    gap:           0.35em;
    margin-bottom: 0.3em;
}

.untappd-stars {
    display:     inline-flex;
    gap:         1px;
    line-height: 1;
}

.untappd-star {
    font-size: 0.8em;
    color:     var(--utw-amber);
    opacity:   0.22;             /* empty star — dimmed amber                  */
}

.untappd-star--full {
    opacity: 1;
}

.untappd-star--half {
    opacity:                 1;
    /* Left half amber, right half transparent so parent bg shows through */
    background:              linear-gradient(90deg, var(--utw-amber) 50%, transparent 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.untappd-checkin__rating-num {
    font-size:   0.72em;
    font-weight: 600;
    opacity:     0.65;
}

/* --------------------------------------------------------------------------
   Comment quote
   -------------------------------------------------------------------------- */

.untappd-checkin__comment {
    font-style:  italic;
    font-size:   0.82em;
    opacity:     var(--utw-muted);
    margin:      0.25em 0 0.4em;
    padding:     0;
    line-height: 1.5;
    border:      none;           /* reset any theme blockquote border          */
}

/* --------------------------------------------------------------------------
   Check-in photo
   -------------------------------------------------------------------------- */

.untappd-checkin__photo {
    display:       block;
    width:         100%;
    max-height:    160px;
    object-fit:    cover;
    border-radius: 4px;
    margin-top:    0.4em;
    border:        1px solid var(--utw-border);
}

/* --------------------------------------------------------------------------
   Footer "View on Untappd" link
   Inherits the theme link colour; falls back gracefully.
   -------------------------------------------------------------------------- */

.untappd-view-all {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4em;
    padding:         0.75em 1.25em;
    border-top:      1px solid var(--utw-separator);
    font-size:       0.72em;
    font-weight:     500;
    color:           inherit;
    text-decoration: none;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    opacity:         0.5;
    transition:      opacity 0.2s ease;
}

.untappd-view-all:hover {
    opacity:         1;
    text-decoration: none;
}

.untappd-view-all svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Admin / error states
   -------------------------------------------------------------------------- */

.untappd-config-notice {
    font-size:   0.82em;
    border-left: 3px solid var(--utw-amber);
    padding:     0.625em 0.875em;
    margin:      0;
    opacity:     0.85;
}

.untappd-empty {
    font-size: 0.82em;
    opacity:   0.55;
    padding:   1em 1.25em;
    margin:    0;
}

/* --------------------------------------------------------------------------
   Responsive — narrow sidebar / mobile
   -------------------------------------------------------------------------- */

@media (max-width: 300px) {
    .untappd-checkin {
        flex-direction: column;
    }

    .untappd-checkin__avatar,
    .untappd-checkin__avatar img,
    .untappd-checkin__avatar-placeholder {
        width:  2.25em;
        height: 2.25em;
    }
}

/* --------------------------------------------------------------------------
   Carousel — horizontal sliding row of check-in cards
   -------------------------------------------------------------------------- */

.utw-carousel {
    display: flex;
    align-items: stretch;
}

/* Scrolling viewport: clips the overflowing track */
.utw-carousel-viewport {
    flex:      1;
    overflow:  hidden;
    min-width: 0;
}

/* Track: all cards laid out in a single horizontal row */
.utw-carousel-viewport .untappd-checkins {
    display:     flex;
    flex-wrap:   nowrap;
    transition:  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Viewport fades slightly during the slide for a softer feel */
.utw-carousel-viewport {
    transition: opacity 0.25s ease;
}

/* Each card occupies 1/N of the viewport width */
.utw-carousel-viewport .untappd-checkin {
    flex:          0 0 calc(100% / var(--utw-visible, 3));
    min-width:     0;
    border-bottom: none;
    border-right:  1px solid var(--utw-separator);
    padding:       0.75em 0.75em;
}

.utw-carousel-viewport .untappd-checkin:last-child {
    border-right: none;
}

/* Tighter avatar in carousel */
.utw-carousel-viewport .untappd-checkin__avatar,
.utw-carousel-viewport .untappd-checkin__avatar img,
.utw-carousel-viewport .untappd-checkin__avatar-placeholder {
    width:  2em;
    height: 2em;
}

/* Slim photo in carousel */
.utw-carousel-viewport .untappd-checkin__photo {
    max-height: 90px;
}