@import url('https://fonts.googleapis.com/css2?family=Aladin&display=swap');

.logoimg {
    padding: 20px;
    height: 100px;
    border-radius: 70px;
}

/* Desktop / large screens: keep your original happy orange fangsong style */
#site-name {
    color: #f60;
    font-family: 'Aladin', fangsong, "Times New Roman", Times, serif; /* fallback chain */
    font-weight: bold;
    font-size: 2em;
}

/* Mobile only: < 700px width – apply happy cursive font */
@media (max-width: 699px) {
    #site-name {
        font-family: 'Bubblegum Sans', 'Aladin', 'Pacifico' /* or 'Caveat', cursive; etc. */;
        font-weight: bold;               /* lighter for cursive beauty */
        font-size: 1.9em;               /* slightly larger on small screens for readability */
        letter-spacing: 1.5px;          /* subtle spacing for elegance */
        line-height: 1.1;               /* better breathing room */
    }
}

p#site-name a {

    line-height: 1em !important;
    position: relative;
    top: 20px;
}

.page-title
{
   font-family: 'Bubblegum Sans', 'Pacifico';
}

body
{
    font-family: 'Quicksand', sans-serif;
}

a, a:link
{
    color: #ff6600;
}
a:hover, a:link:hover
{
    color: #9b00b1;
}

a[href*="dr.mt"], .dr-mt-link { display: none !important; }

img
{
    border-radius: 10px;
}

.block-content
{
    max-width: 780px;
    margin: 0 auto;
}
.node h2
{
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.8em;
    font-weight: bold;
    padding-bottom: 10px;
}

@media screen and (max-width: 64em) {
    p#site-name a, p#site-name a:hover, h1#site-name a, h1#site-name a:hover {
        font-size: 1.4em;
        line-height: 1em;
        position: relative;
        top: 20px;
    }
}

.rnd .pager__item:first-of-type,
.rnd .pager__item:last-of-type,
.calendar-view-pager .pager__current
{
    text-align: center;
    border: 1px solid #ff6600;
    
    /* Semi-transparent background – orange tone matching the border */
    background-color: rgba(255, 102, 0, 0.12);   /* ~12% opacity – subtle */
    
    /* Optional: makes corners softer – looks nicer on pagers */
    border-radius: 4px;
    
    /* Makes padding symmetric and gives the background some breathing room */
    padding: 0.4em 0.8em;
    
    /* Smooth transition for hover */
    transition: all 0.18s ease-out;
}

/* Hover / focus state – becomes more visible */
.rnd .pager__item:first-of-type:hover,
.rnd .pager__item:last-of-type:hover,
.calendar-view-pager .pager__current:hover,
.rnd .pager__item:first-of-type:focus,
.rnd .pager__item:last-of-type:focus,
.calendar-view-pager .pager__current:focus
{
    background-color: rgba(255, 102, 0, 0.28);   /* ~28% opacity – noticeable */
    border-color: #ff5500;                       /* slightly darker border */
    color: #d94c00;                              /* optional: darker text */
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15); /* subtle glow */
}

.calendar-view-table caption {

    font-size: 2em;
}

.pure-img {
    margin: 0 auto;
}

#block-abc-footerlogo .block-content {
    border: none;
    padding: 0;
    background-color: inherit;
}

.views-row
{
    background: white;
    padding: 20px;
    border-radius: 10px;
}

#block-abc-page-title h1,
#block-abc-page-title h2,
#block-abc-page-title h3
{
    padding: 10px 20px;
    background: #fff;
    border-radius: 10px;
}
.node,
.pure-form
{
    padding: 10px 20px;
    background: #fff;
    border-radius: 10px;
}