/* ==========================================================================
   compat.css — lightweight replacement for Canvas theme CSS
   Replaces: site.min.css, dialog.min.css, bundle.css (style.min.css + animate.min.css)
   Only includes classes actually used in templates (~50 rules vs thousands)
   ========================================================================== */

/* ── Base Reset & Structure ──
   Critical layout rules previously provided by Canvas site.min.css
   ========================================================================== */
body {
    line-height: 1.25;
    color: #333;
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: #1a1a1a;
    transition: color .2s;
}

a:hover {
    color: var(--uv-gold-dark, #0a58ca);
}

img {
    max-width: 100%;
    height: auto;
}

iframe {
    border: 0 !important;
}

/* #wrapper — main page container (used in base.html) */
#wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
}

/* #content — main content area */
#content {
    position: relative;
    background-color: #fff;
}

#content p {
    line-height: 1.25;
}

/* Responsive images in post content */
.post-content img,
#post-content img,
article img {
    max-width: 100% !important;
    height: auto !important;
}

/* Content wrap */
.content-wrap {
    position: relative;
}

/* Container max-width: 1080px (original site width) */
@media (min-width: 1200px) {
    .container {
        max-width: 1080px;
    }
}

/* Section spacing */
section {
    position: relative;
}

/* Banner/ad image containment */
.advance {
    position: relative;
}

/* Ensure banner images don't overflow */
.advance img,
#wrapper img {
    max-width: 100%;
    height: auto;
}

/* ── Text Size Utilities ──
   Canvas: text-0 through text-9 (with !important)
   Used in: 104 files, 529 instances
   ========================================================================== */
.text-0 { font-size: .75rem !important; }
.text-1 { font-size: .80rem !important; }
.text-2 { font-size: .875rem !important; }
.text-3 { font-size: 1rem !important; }
.text-4 { font-size: 1.1rem !important; }
.text-5 { font-size: 1.5rem !important; }
.text-6 { font-size: 1.8rem !important; }
.text-7 { font-size: 2rem !important; }
.text-8 { font-size: 2.3rem !important; }
.text-9 { font-size: 2.5rem !important; }

/* ── Font Weight Utilities ──
   Used in: 113 files, 503 instances
   ========================================================================== */
.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-thin { font-weight: 200 !important; }

/* ── Grey Text Colors ──
   Used in: 56 files
   ========================================================================== */
.text-grey-darkest { color: #3d4852 !important; }
.text-grey-darker { color: #606f7b !important; }
.text-grey-dark { color: #8795a1 !important; }
.text-grey { color: #b8c2cc !important; }
.text-grey-light { color: #dae1e7 !important; }
.text-grey-lighter { color: #f1f5f8 !important; }
.text-grey-lightest { color: #f8fafc !important; }
.text-black { color: #111 !important; }

/* ── Layout Utilities ──
   clearfix: 96 files, 219 instances
   h10-clearfix: 59 files, 87 instances
   ========================================================================== */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.h10-clearfix {
    clear: both;
    height: 10px;
}

/* ── Image Utilities ──
   img-circle: 17 files, 42 instances
   ========================================================================== */
.img-circle { border-radius: 50% !important; }
.image_fade { opacity: 1; transition: opacity .3s; }
.image_fade:hover { opacity: .85; }
.img-w100 { width: 100%; }

/* ── Gradient HR ──
   gradient-to-right: 12 files
   ========================================================================== */
hr.gradient-to-right {
    border: 0;
    height: 1px;
    background: var(--uv-border);
    margin: 1rem 0;
}

/* ── Background Color Utilities ── */
.bg-color-primary-d { background-color: #57A4D5; }

/* ── Buttons ──
   Canvas button system: 88 files, 139 instances
   Base .button + modifiers
   ========================================================================== */
.button {
    display: inline-block;
    position: relative;
    padding: .5rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--uv-gold);
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.button:hover {
    opacity: .9;
    color: #fff;
}

/* Sizes */
.button.button-mini { padding: .25rem .75rem; font-size: .75rem; }
.button.button-small { padding: .4rem 1rem; font-size: .8rem; }
.button.button-large { padding: .55rem 1.5rem; font-size: 1rem; }

/* Shapes */
.button.button-rounded { border-radius: 4px; }
.button.button-circle { border-radius: 50px; }
.button.button-full { display: block; width: 100%; }

/* Border (outlined) variant */
.button.button-border {
    background: transparent;
    border: 2px solid #444;
    color: #444;
}
.button.button-border:hover {
    background: #444;
    color: #fff;
}

/* Color variants — solid */
.button.button-black { background: #111; }
.button.button-dark { background: #333; }
.button.button-red { background: #C02942; }
.button.button-green { background: #59BA41; }
.button.button-blue { background: #1265A8; }
.button.button-purple { background: #5D4157; }
.button.button-amber { background: #EB9C4D; }

/* Color variants — border */
.button.button-border.button-black { border-color: #111; color: #111; }
.button.button-border.button-black:hover { background: #111; color: #fff; }
.button.button-border.button-dark { border-color: #333; color: #333; }
.button.button-border.button-dark:hover { background: #333; color: #fff; }
.button.button-border.button-red { border-color: #C02942; color: #C02942; }
.button.button-border.button-red:hover { background: #C02942; color: #fff; }
.button.button-border.button-green { border-color: #59BA41; color: #59BA41; }
.button.button-border.button-green:hover { background: #59BA41; color: #fff; }
.button.button-border.button-blue { border-color: #1265A8; color: #1265A8; }
.button.button-border.button-blue:hover { background: #1265A8; color: #fff; }
.button.button-border.button-purple { border-color: #5D4157; color: #5D4157; }
.button.button-border.button-purple:hover { background: #5D4157; color: #fff; }

/* Fill effect for border buttons */
.button.button-fill {
    overflow: hidden;
    transition: color .3s, background .3s;
}

/* Button icon spacing */
.button i { margin-right: .35rem; }

/* ── Post / Blog Components ──
   post-meta, post-content, post-share, etc.: 29 files, 52 instances
   ========================================================================== */
.post-meta,
.display-meta-inf {
    font-size: .875rem;
    color: #666;
    margin-bottom: .5rem;
}

.post-meta span,
.display-meta-inf span {
    margin-right: .5rem;
}

.post-meta i,
.display-meta-inf i {
    margin-right: .2rem;
    opacity: .7;
}

.post-content { margin-bottom: 1rem; }
.post-share { margin-bottom: 1rem; }

.blog-posts.single-post { margin-bottom: 1.5rem; }

/* ── Heading Styles ──
   fancy-title, title-bottom-border: 7 files
   heading-primary: 3 files
   ========================================================================== */
.fancy-title {
    margin-bottom: .75rem;
}

.fancy-title.title-bottom-border {
    border-bottom: 2px solid var(--uv-border, #dee2e6);
    padding-bottom: .5rem;
}

.heading-primary {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--uv-dark, #1a1a2e);
}

/* ── Tag Cloud ──
   tagcloud: 8 files
   ========================================================================== */
.tagcloud a {
    display: inline-block;
    padding: .25rem .55rem;
    margin: .15rem;
    font-size: .8rem;
    text-decoration: none;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 3px;
    transition: all .2s;
}

.tagcloud a:hover {
    border-color: var(--uv-gold, #0D6EFD);
    color: var(--uv-gold-dark, #0a58ca);
}

/* ── Comment Styles ──
   comment-arrow, comment-author, comment-content: 2 files
   ========================================================================== */
.comment-arrow { display: none; }
.comment-author { font-weight: 600; }
.comment-content { margin-top: .35rem; }

/* ── Social Auth Buttons ──
   allauth-provider-btn: 2 files
   ========================================================================== */
.allauth-provider-btn {
    display: inline-flex;
    align-items: center;
    padding: .45rem .85rem;
    border: 1px solid var(--uv-border, #dee2e6);
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: all .2s;
}

.allauth-provider-btn:hover {
    border-color: var(--uv-gold, #0D6EFD);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* ── Banner Matrix (ad grid) ── */
.img-matrix,
.img-matrix-double {
    display: inline-block;
}

.img-matrix img,
.img-matrix-double img {
    display: block;
}

@media (max-width: 767px) {
    .img-matrix {
        width: calc(50% - 5px);
    }

    .img-matrix img {
        width: 100%;
        height: auto;
    }

    .img-matrix-double {
        width: 100%;
    }

    .img-matrix-double img {
        width: 100%;
        height: auto;
    }
}

/* ── Miscellaneous Utilities ── */
.font-italic { font-style: italic !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }