/* FILE PURPOSE: SHARED FOOTER STYLES FOR THE OAKOKHO SUBDOMAINS.
                 THE "SHARED" SECTION BELOW IS BYTE-IDENTICAL ACROSS
                 learn, school, books AND swargam — COPY THAT SECTION
                 AS-IS. THE PER-SUBDOMAIN OVERRIDE SECTION AT THE
                 BOTTOM IS DELIBERATELY *NOT* IDENTICAL: EACH SITE
                 KEEPS ITS OWN TAIL. SEE THE NOTE ON LITERAL COLOURS.
   LOCATION: /var/www/learn/css/footer.css
   LAST REVIEWED: 2026-08-20 */

/* ============================================================
   SHARED — DO NOT EDIT PER-SUBDOMAIN

   COLOURS ARE DELIBERATELY LITERAL, NOT var() TOKENS. swargam's
   style.css defines --dark-bg/--white/--transition; learn's does
   NOT. A var() that resolves nowhere makes the whole declaration
   compute to its initial value, so `background: var(--dark-bg)`
   would render learn's footer TRANSPARENT — white text on white.
   The literals below are the values both sites already computed.
   ============================================================ */

.main-footer {
    background: #1e293b;
    color: #ffffff;
    padding: 40px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* ALL FOOTER HEADINGS — BASE. color/font-weight ARE STATED EXPLICITLY EVEN
   THOUGH THEY MATCH WHAT h3 WOULD INHERIT/DEFAULT TO, SO THE COLUMN HEADINGS
   DO NOT SILENTLY CHANGE IF A SITE RESTYLES h3 GLOBALLY. */
.footer-section h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ASSAMESE HEADING — FIRST COLUMN ONLY. THIS IS WHAT RENDERS THE SITE NAME IN
   NOTO SERIF BENGALI INSTEAD OF THE SYSTEM SANS STACK THAT header.css ASSIGNS
   TO .main-footer. DO NOT PUT .footer-as ON THE <h3> — THAT CLASS IS 15px AND
   WOULD SHRINK THE HEADING RATHER THAN ENLARGE IT. */
.footer-section:first-child h3 {
    font-family: 'Noto Serif Bengali', serif;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a,
.footer-section ul li {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.footer-section ul li a:hover {
    opacity: 1;
    padding-left: 5px;
}

/* FOOTER LINK ICONS — FIXED WIDTH SO EVERY LABEL STARTS AT THE SAME INDENT.
   COVERS BOTH THE LINKED COLUMNS (QUICK LINKS / OAKOKHO PROJECTS, WHERE THE
   <i> SITS INSIDE THE <a>) AND THE PLAIN CONTACT COLUMN (WHERE IT SITS
   DIRECTLY IN THE <li>). ANY MORE-SPECIFIC PER-SITE RULE THAT ALSO SETS width
   ON THESE ICONS WILL SILENTLY OVERRIDE THE 1.2em — KEEP SPACING/TONE ONLY IN
   THOSE RULES, NEVER width/display/text-align. */
.footer-section ul li a i,
.footer-section ul li i {
    display: inline-block;
    width: 1.2em;
    text-align: center;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #6366f1;
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.8;
}

/* ASSAMESE SUBHEADING / TAGLINE — THE <p class="footer-as"> IN COLUMN 1. */
.footer-as {
    font-family: 'Noto Serif Bengali', serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin-bottom: 4px;
}

/* ============================================================
   LEARN OVERRIDES
   EVERYTHING BELOW THIS LINE IS LEARN-ONLY. DO NOT COPY IT TO
   ANOTHER SUBDOMAIN — EACH SITE WRITES ITS OWN TAIL. THESE ARE
   THE VALUES LEARN ALREADY RENDERED BEFORE THE EXTRACTION; THE
   FOOTER IS INTENTIONALLY UNCHANGED BY IT.
   ============================================================ */

/* ENGLISH TAGLINE — SMALLER THAN ASSAMESE LINE. MATCHES SWARGAM PATTERN.
   MERGED INTO THE PRE-EXISTING .footer-section p RULE RATHER THAN ADDED AS A
   SECOND RULE WITH THE SAME SELECTOR: THE CASCADE RESULT IS IDENTICAL (font-size
   NEW, line-height 1.8 -> 1.6, opacity UNCHANGED) AND ONE RULE CANNOT DRIFT
   OUT OF SYNC WITH A DUPLICATE THIRTY LINES AWAY.
   CAUTION: THIS SELECTOR MATCHES ALL THREE <p> CHILDREN OF COLUMN 1 — THE
   ASSAMESE TAGLINE AND THE HIT COUNTER ARE RESTORED BY THE TWO RULES BELOW. */
.footer-section p {
    font-size: 0.82rem;
    opacity: 0.8;
    line-height: 1.6;
}

/* ASSAMESE TAGLINE — RESTORE SIZE AND OPACITY AFTER THE p RULE ABOVE SHRINKS
   ALL <p>. p.footer-as (0,2,1) OUTRANKS .footer-section p (0,1,1), SO NO
   !important IS NEEDED — AND NONE IS USED. THE color BELOW IS DELIBERATELY THE
   SAME VALUE .footer-as ALREADY SETS AT LINE 118: IT IS A GUARD THAT KEEPS THE
   COLOUR PINNED IF A LATER RULE EVER TARGETS THIS <p>, NOT A FIX FOR AN
   EXISTING OVERRIDE. NOTHING IN learn's CSS CURRENTLY OVERRIDES IT — VERIFIED
   ACROSS ALL 15 FILES IN css/. */
.footer-section p.footer-as {
    font-size: 1rem;
    opacity: 1;
    color: rgba(255, 255, 255, 0.75);
}

/* HIT COUNTER — SAME RESTORE, SAME REASON. WITHOUT THIS, .footer-section p's
   0.82rem (13.12px) OUTRANKS .footer-hits's 12px AT (0,1,1) VS (0,1,0) AND THE
   COUNTER SILENTLY GROWS. THIS PINS IT BACK TO THE 12px IT RENDERS TODAY. */
.footer-section p.footer-hits {
    font-size: 12px;
}

/* HIT COUNTER IN FOOTER. LEARN MARKS THIS UP AS <p class="footer-hits">;
   swargam USES <p id="siteHitCounter"> INSTEAD, WHICH IS WHY THE TWO SITES'
   COUNTER RULES CANNOT BE SHARED. */
.footer-hits {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1rem;
    white-space: nowrap;
}

.footer-hits span {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* FOOTER COPYRIGHT — EXPLICIT COLOUR SO dad.css's BARE p { color: #666 }
   CANNOT OVERRIDE VIA INHERITANCE LOSS. .footer-bottom SETS NO color OF ITS
   OWN, SO THE <p> INSIDE IT WAS INHERITING FROM .main-footer — AND INHERITANCE
   LOSES TO ANY DIRECTLY MATCHING SELECTOR, EVEN A BARE ELEMENT ONE. dad.css
   LOADS AFTER THIS FILE VIA $extraCss ON THE NINE /dad/* PAGES, SO THE
   COPYRIGHT RENDERED #666 ON THE #1e293b FOOTER (~2.5:1). (0,1,1) BEATS THE
   BARE p AT (0,0,1) REGARDLESS OF LOAD ORDER. */
.footer-bottom p {
    color: #ffffff;
}

/* 4-COLUMN GRID STABILITY. THE SHARED RULE ABOVE USES minmax(250px, 1fr),
   WHICH DROPS LEARN'S FOURTH COLUMN TO A SECOND ROW ONCE THE CONTAINER FALLS
   BELOW ~1096px (4x250 + 3x2rem GAP). PREFIXING WITH .main-footer LIFTS
   SPECIFICITY TO (0,2,0) SO THIS OUTRANKS THE SHARED .footer-content WITHOUT
   EDITING THE SHARED SECTION. */
.main-footer .footer-content {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ENGLISH DESCRIPTION — SMALLER THAN THE ASSAMESE LINE ABOVE IT. THE TWO
   :not()s EXCLUDE THE OTHER TWO <p> CHILDREN OF COLUMN 1 (THE ASSAMESE
   TAGLINE AND THE HIT COUNTER), WHICH IS WHY THIS TARGETS THE ENGLISH LINE
   WITHOUT NEEDING A CLASS ON IT. SPECIFICITY (0,3,2) COMFORTABLY OUTRANKS
   BOTH `.footer-section p` ABOVE AND `.footer-as` IN THE SHARED SECTION. */
.footer-section:first-child > p:not(.footer-as):not(.footer-hits) {
    font-size: 0.82rem;   /* WAS 11px — NOW MATCHES THE SWARGAM PATTERN */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   SCROLL TO TOP BUTTON — LEARN VARIANT (56px, GRADIENT FILL,
   SAFE-AREA INSETS). swargam USES A SMALLER 46px FLAT BUTTON;
   THE TWO ARE INTENTIONALLY DIFFERENT, SO THIS STAYS SITE-LOCAL.
   ============================================================ */
#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    right:  calc(30px + env(safe-area-inset-right,  0px));
    width: 56px;
    height: 56px;
    /* CANCEL min-width:120px AND padding FROM style.css'S GLOBAL
       button[type="button"] PILL RULE — min-width WOULD OTHERWISE
       OVERRIDE width:56px AND STRETCH THIS INTO AN OVAL. */
    min-width: 0;
    padding: 0;
    background: linear-gradient(135deg, #5b7dd8 0%, #4f6bc4 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
}

#scrollToTopBtn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}