/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Template 101 — Omer-Decugis
   Built from "Mobile 390x844px.ai". All internal sizes are expressed in rem, so
   the whole card scales from the single font-size knob on :root.
   At the reference width (390px) that knob is 10px, i.e. 1rem = 10px = 1 design
   unit, so the rem values below read directly as the design's pixel values / 10.
   rem (not em) throughout: a box sized in em compounds with its own font-size,
   which silently inflated the larger mobile-number pill.

   The three background images are NOT referenced here: Mix's css-loader would
   hash and re-emit any file path referenced here. The blade emits them instead,
   through asset(), so they stay in assets/images where the mix copyDirectory
   puts them.
   ========================================================================== */

:root {
    color-scheme: light;
}

html {
    box-sizing: border-box;
    /* The card's scale knob. 2.5641vw == 10px at the 390px reference width.
       Scales with the phone up to the 441px tablet/desktop size, so proportions
       match the design at every width instead of stopping at 390px and leaving
       background either side of the band. */
    font-size: clamp(8.2px, 2.5641vw, 11.3px);
}

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

body {
    margin: 0;
    /* Safety net for the band's 50vw full-bleed maths on desktops with a
       classic (space-taking) scrollbar, where 100vw > the content box. */
    overflow-x: hidden;
    min-height: 100vh;
    scroll-behavior: smooth;
    color: #4D4D4D;
    background-color: #C9A227;
    /* background-image is emitted by the blade via asset(), see below */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

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

button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */

.od_card {
    /* The scale knob lives on :root; this just resets any inherited size. */
    font-size: 1rem;
    font-family: "Montserrat", "Overpass", sans-serif;
    font-weight: 400;

    --od-accent: #293157;
    --od-accent-2: #9A8150;
    --od-on-accent: #FFFFFF;
    --od-ring: #FFFFFF;
    --od-band: #FFFFFF;
    --od-band-opacity: 0.88;
    --od-name: #4D4D4D;
    --od-position: #4D4D4D;

    width: 100%;
    max-width: 39rem;
    margin: 0 auto;
    position: relative;
}

/* The design's content column: 284 of 390 units, centred. */
.od_content {
    width: 28.4rem;
    max-width: 90%;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Header — share action sits above the band, over the background art
   -------------------------------------------------------------------------- */

.od_top {
    height: 12.78rem;
    position: relative;
}

.od_share {
    position: absolute;
    /* Grown from 3.2rem to 4.4rem about its own centre, so top/right each move
       by half the growth and the button stays where the design put it. */
    top: 6.33rem;
    right: 4.7rem;
    width: 4.4rem;
    height: 4.4rem;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    /* A white disc, so the glyph reads over any of the fruit backgrounds. The
       drop shadow keeps it separated where the photo behind is pale. */
    background: #FFFFFF;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
    color: var(--od-accent);
}

.od_share svg {
    width: 55%;
    height: 55%;
    display: block;
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   Identity band — full-bleed, with the logo straddling its top edge
   -------------------------------------------------------------------------- */

.od_band {
    position: relative;
    isolation: isolate;
    padding: 5.2rem 2rem 1.3rem;
    text-align: center;
    /* Full-bleed at every width: the card column is capped at 441px, so pull
       the band out to the viewport edges. A no-op while the card still fills
       the viewport. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

/* The band is translucent in the design. The organization colour picker is an
   <input type="color"> and cannot carry alpha, so the colour is painted on its
   own layer and the transparency applied here instead. */
.od_band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--od-band);
    opacity: var(--od-band-opacity, 0.88);
    z-index: -1;
}

.od_logo {
    position: absolute;
    /* 65% of the box height, so 65% of the logo sits above the band's top edge
       and 35% overlaps the band. */
    top: -6.71rem;
    left: 50%;
    transform: translateX(-50%);
    width: 10.32rem;
    /* 103px at the 390px reference: the design's 86px, 20% larger */
    height: 10.32rem;
    border-radius: 50%;
    /* The organization logo is forced onto a 900x600 canvas on upload, so a
       square mark arrives letterboxed with transparent bars left and right.
       `contain` would fit it by that padded width and render the mark at ~55px;
       `cover` fits by the height, which the canvas does not pad, so the mark
       comes out at its true size. The bars fall outside the box and are clipped.
       This tracks the forced canvas ratio, not any one file's own margins. */
    object-fit: cover;
    object-position: center;
    background: transparent;
}

.od_name {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--od-name);
    word-break: break-word;
}

.od_position {
    margin-top: 0.7rem;
    font-size: 1.98rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--od-position);
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Contact rows — disc + pill, both navy with a white ring
   -------------------------------------------------------------------------- */

.od_contacts {
    margin-top: 2.71rem;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.od_row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.od_row_icon {
    flex: 0 0 3.35rem;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    background: var(--od-accent);
    border: 0.15rem solid var(--od-ring);
    display: grid;
    place-items: center;
    color: var(--od-on-accent);
}

.od_row_icon svg {
    width: 55%;
    height: 55%;
    display: block;
    fill: currentColor;
}

/* The design's glyph is ~57% of the 33.5px disc. */
.od_row_icon i {
    font-size: 1.9rem;
    line-height: 1;
    color: inherit;
}

.od_row_icon i::before {
    color: inherit;
}

.od_row_pill {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.35rem;
    border-radius: 999px;
    background: var(--od-accent);
    border: 0.15rem solid var(--od-ring);
    color: var(--od-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* The design sets the mobile number larger than the other rows. */
.od_row--mobile .od_row_pill {
    font-size: 1.7rem;
    font-weight: 600;
}

.od_row_pill .od_addressline {
    display: block;
}

/* --------------------------------------------------------------------------
   Save-contact action — same geometry as a contact row, in the gold accent
   -------------------------------------------------------------------------- */

.od_save {
    margin-top: 3.54rem;
    display: block;
}

.od_save .od_row_icon,
.od_save .od_row_pill {
    background: var(--od-accent-2);
}

.od_save .od_row_icon svg {
    width: 62%;
    height: 62%;
}

.od_save .od_row_pill {
    font-weight: 600;
}

.od_save button {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0;
    text-align: inherit;
}

/* Contact exchange — a second gold action, tucked under the save row.
   Declared after .od_save so its margin-top wins (equal specificity).

   PARKED: the markup was removed from view_card_template101.blade.php at the
   client's request, to be rolled out later. These rules are kept (along with
   the matching .od_exchange selectors in the touch-target, hover and focus
   blocks below) so re-enabling it is a blade-only change. Nothing matches them
   today. */
.od_exchange {
    margin-top: 1.3rem;
}

.od_exchange a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Touch targets — rows are 3.35rem tall (33.5px at 390px), under the 44px
   guideline. An invisible pseudo-element extends the hit area 0.6rem above
   and below without changing the visual size. Rows are 1.3rem apart, so the
   extended areas do not overlap.
   -------------------------------------------------------------------------- */

.od_row,
.od_save button,
.od_exchange a {
    position: relative;
}

.od_row::before,
.od_save button::before,
.od_exchange a::before {
    content: "";
    position: absolute;
    inset: -0.6rem 0;
}

/* --------------------------------------------------------------------------
   QR code
   -------------------------------------------------------------------------- */

.od_qr {
    margin-top: 4.81rem;
    display: flex;
    justify-content: center;
}

.od_qr img {
    width: 11rem;
    height: 11rem;
    padding: 0.76rem;
    display: block;
    background: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Social row
   -------------------------------------------------------------------------- */

.od_socials {
    margin-top: 4.96rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.35rem;
}

.od_social {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--od-accent);
    border: 0.16rem solid var(--od-ring);
    color: var(--od-on-accent);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.od_social i {
    font-size: 2.2rem;
    line-height: 1;
    color: inherit;
}

.od_social i::before {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Team banner + footer
   -------------------------------------------------------------------------- */

.od_banner {
    margin-top: 4rem;
}

.od_banner img {
    width: 100%;
    max-width: 100%;
    border-radius: 1.2rem;
    display: block;
}

.od_bottom_space {
    height: 8.4rem;
}

.footer,
footer {
    background: transparent;
    text-align: center;
    padding-bottom: 20px;
}

.footer p,
.footer p a,
footer p,
footer p a {
    color: #FFFFFF;
    font-size: 13px;
}

footer .text-center {
    margin-top: 10px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Interaction
   -------------------------------------------------------------------------- */

/* Hover is driven from the row, not the pill/disc: the touch-target
   pseudo-element above covers them, so they never match :hover themselves.
   Keying off the row also animates the disc and pill together. */
@media (hover: hover) {

    .od_row:hover .od_row_pill,
    .od_row:hover .od_row_icon,
    .od_save button:hover .od_row_pill,
    .od_save button:hover .od_row_icon,
    .od_exchange a:hover .od_row_pill,
    .od_exchange a:hover .od_row_icon,
    .od_social:hover {
        /* A white wash rather than filter: brightness(). `filter` makes Firefox
           rasterize the element into an offscreen surface, and during the
           transition the border-radius clip and the white border can briefly
           mis-render there -- the rounded cap flashes as a square with seams.
           It showed on the address pill first because, being two lines, it is
           the tallest and so the largest surface. An inset shadow respects
           border-radius and needs no offscreen surface. */
        box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1);
        transform: scale(1.03);
    }

    /* The share button is a white disc, so it lifts its shadow instead. */
    .od_share:hover {
        box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.28);
        transform: scale(1.03);
    }
}

.od_row_pill,
.od_row_icon,
.od_social,
.od_share {
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

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

    .od_row_pill,
    .od_row_icon,
    .od_social,
    .od_share {
        transition: none;
    }

    @media (hover: hover) {

        .od_row:hover .od_row_pill,
        .od_row:hover .od_row_icon,
        .od_save button:hover .od_row_pill,
        .od_save button:hover .od_row_icon,
        .od_exchange a:hover .od_row_pill,
        .od_exchange a:hover .od_row_icon,
        .od_social:hover,
        .od_share:hover {
            transform: none;
        }
    }
}

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */

/* The browser's default ring here is a dark 1px outline, which all but
   disappears against the photographic background. This replaces it with the
   design's own ring colour. :focus-visible keeps it off mouse clicks and on
   keyboard and switch-control use. */
.od_row:focus-visible,
.od_save button:focus-visible,
.od_exchange a:focus-visible,
.od_social:focus-visible,
.od_share:focus-visible {
    outline: 2px solid var(--od-ring);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Breakpoints — the design is mobile-only, so larger screens keep the same
   centred column and just swap in the wider background art.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    body {
        background-attachment: fixed;
    }

}

@media (min-width: 1200px) {
    body {
        background-position: center center;
    }
}