/* ############################################################################################################################################################################ */
/* ############################################################################################################################################################################ */
/* Glyph Chronicles Public Website                                                                                                                                              */
/*  • Page:            	        Featured Article Stylesheet (featuredarticle.css)                                                                                               */
/*  • Description:              Styles for the rotating hero banner on the homepage                                                                                             */
/*  • Location:               	/modules/featuredarticle/css/featuredarticle.css                                                                                                */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Version:                  v0.0.05 α                                                                                                                                       */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Project Start Date:       2026-04-07                                                                                                                                      */
/*  • Creation Date:            2026-05-14                                                                                                                                      */
/*  • Last updated:             2026-05-14 @ 2355 EDT                                                                                                                           */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Author:                   by James Novak (Crazieman)                                                                                                                      */
/*  • Official Site:            www.glyphchronicles.com                                                                                                                         */
/* ############################################################################################################################################################################ */
/* CHANGELOG:                                                                                                                                                                   */
/*  • 2026-05-14 - Ornate layered border style inspired by NewsNav + rotating colors from fonts.css                                                                           */
/* ############################################################################################################################################################################ */
/* ############################################################################################################################################################################ */

/* ============================================================================================================================================================================ */
/* [START] OF FEATURED ARTICLE STYLESHEET                                                                                                                                       */
/* ============================================================================================================================================================================ */

.featured-rotator
{
    position: relative;
    height: 520px;
    overflow: hidden;
    background: #0a0a0a;
    margin-bottom: 40px;
}

/* ============================================================================================================================================================================ */
/* ROTATOR FRAME - Ornate layered border (inspired by NewsNav cards)                                            */
/* ============================================================================================================================================================================ */

.rotator-frame
{
    position: relative;
    width: 100%;
    height: 100%;
    border: 4px solid #c9a04f;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 0 0 8px #2a2118,
        0 8px 30px rgba(0, 0, 0, 0.75);
    transition: border-color 0.4s ease, box-shadow 0.3s ease;
}

/* Inner decorative border (like NewsNav ::before) */
.rotator-frame::before
{
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #8b6f47;
    border-radius: 8px;
    pointer-events: none;
    z-index: 3;
}

/* ============================================================================================================================================================================ */
/* ROTATING BORDER COLORS (from fonts.css)                                                                                                      */
/* ============================================================================================================================================================================ */

.rotator-frame.border-gold      { border-color: #c9a04f; }
.rotator-frame.border-crimson   { border-color: #cc3333; }
.rotator-frame.border-emerald   { border-color: #33cc77; }
.rotator-frame.border-amethyst  { border-color: #aa66ff; }
.rotator-frame.border-sapphire  { border-color: #3366ff; }
.rotator-frame.border-amber     { border-color: #ffcc66; }
.rotator-frame.border-diamond   { border-color: #f0f0f0; }
.rotator-frame.border-obsidian  { border-color: #1a1a1a; }
.rotator-frame.border-topaz     { border-color: #cc9966; }
.rotator-frame.border-ruby      { border-color: #cc3333; }

/* ============================================================================================================================================================================ */
/* SLIDES + LIGHTENING                                                                                                                          */
/* ============================================================================================================================================================================ */

.rotator-slide
{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    cursor: pointer;
    /* filter: brightness(1.05) contrast(1.03); */
}

.rotator-slide.active
{
    opacity: 1;
    z-index: 1;
}

/* ============================================================================================================================================================================ */
/* OVERLAY + CONTENT                                                                                                                            */
/* ============================================================================================================================================================================ */

.rotator-overlay
{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0.88) 35%,
        rgba(15, 10, 20, 0.55) 55%,
        rgba(10, 10, 10, 0.35) 75%
    );
    display: flex;
    align-items: flex-end;
    padding: 70px 50px 55px 90px;
    z-index: 2;
}

.rotator-content
{
    max-width: 820px;
}

.rotator-date
{
    color: #c9a04f;
    font-size: 1.05rem;
    letter-spacing: 2.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.rotator-title
{
    font-family: 'CelticMD', serif !important;
    color: #ffffff;
    font-size: 2.45rem;
    line-height: 1.15;
    margin: 0 0 18px 0;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95);
    font-weight: 600;
    letter-spacing: 1px;
}

.rotator-cta
{
    display: inline-block;
    color: #c9a04f;
    border: 2px solid #c9a04f;
    padding: 13px 34px;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.rotator-cta:hover
{
    background: #c9a04f;
    color: #111111;
    border-color: #c9a04f;
}

/* ============================================================================================================================================================================ */
/* ARROWS - Using Celtic Knot SVG                                                                                                               */
/* ============================================================================================================================================================================ */

.rotator-arrow
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 10;
    padding: 6px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.rotator-arrow:hover
{
    transform: translateY(-50%) scale(1.15);
    opacity: 0.9;
}

.rotator-prev
{
    left: 18px;
}

.rotator-next
{
    right: 18px;
}

/* Make the Celtic arrow gold */
.rotator-arrow .arrow-icon
{
    filter: brightness(0) saturate(100%) invert(68%) sepia(45%) saturate(500%) hue-rotate(5deg) brightness(1.1);
    transition: filter 0.2s ease, transform 0.2s ease;
}

/* Left arrow - flip horizontally */
.rotator-prev .arrow-icon
{
    transform: scaleX(-1);
}

/* Right arrow stays normal */
.rotator-next .arrow-icon
{
    transform: none;
}

/* Hover effect - keep gold color + slight scale */
.rotator-arrow:hover .arrow-icon
{
    filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.15);
}

/* Preserve horizontal flip on left arrow during hover */
.rotator-prev:hover .arrow-icon
{
    transform: scaleX(-1) scale(1.15);
}

/* ############################################################################################################################################################################ */
/* ############################################################################################################################################################################ */
/* Glyph Chronicles Public Website                                                                                                                                              */
/*  • Page:            	        Featured Article Stylesheet (featuredarticle.css)                                                                                               */
/*  • Description:              Styles for the rotating hero banner on the homepage                                                                                             */
/*  • Location:               	/modules/featuredarticle/css/featuredarticle.css                                                                                                */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Version:                  v0.0.05 α                                                                                                                                       */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Project Start Date:       2026-04-07                                                                                                                                      */
/*  • Creation Date:            2026-05-14                                                                                                                                      */
/*  • Last updated:             2026-05-14 @ 2355 EDT                                                                                                                           */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Author:                   by James Novak (Crazieman)                                                                                                                      */
/*  • Official Site:            www.glyphchronicles.com                                                                                                                         */
/* ############################################################################################################################################################################ */
/* CHANGELOG:                                                                                                                                                                   */
/*  • 2026-05-14 - Ornate layered border style inspired by NewsNav + rotating colors from fonts.css                                                                           */
/* ############################################################################################################################################################################ */
/* ############################################################################################################################################################################ */

/* ============================================================================================================================================================================ */
/* [START] OF FEATURED ARTICLE STYLESHEET                                                                                                                                       */
/* ============================================================================================================================================================================ */

.featured-rotator
{
    position: relative;
    height: 520px;
    overflow: hidden;
    background: #0a0a0a;
    margin-bottom: 40px;
}

/* ============================================================================================================================================================================ */
/* ROTATOR FRAME - Ornate layered border (inspired by NewsNav cards)                                            */
/* ============================================================================================================================================================================ */

.rotator-frame
{
    position: relative;
    width: 100%;
    height: 100%;
    border: 4px solid #c9a04f;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 0 0 8px #2a2118,
        0 8px 30px rgba(0, 0, 0, 0.75);
    transition: border-color 0.4s ease, box-shadow 0.3s ease;
}

/* Inner decorative border (like NewsNav ::before) */
.rotator-frame::before
{
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #8b6f47;
    border-radius: 8px;
    pointer-events: none;
    z-index: 3;
}

/* ============================================================================================================================================================================ */
/* ROTATING BORDER COLORS (from fonts.css)                                                                                                      */
/* ============================================================================================================================================================================ */

.rotator-frame.border-gold      { border-color: #c9a04f; }
.rotator-frame.border-crimson   { border-color: #cc3333; }
.rotator-frame.border-emerald   { border-color: #33cc77; }
.rotator-frame.border-amethyst  { border-color: #aa66ff; }
.rotator-frame.border-sapphire  { border-color: #3366ff; }
.rotator-frame.border-amber     { border-color: #ffcc66; }
.rotator-frame.border-diamond   { border-color: #f0f0f0; }
.rotator-frame.border-obsidian  { border-color: #1a1a1a; }
.rotator-frame.border-topaz     { border-color: #cc9966; }
.rotator-frame.border-ruby      { border-color: #cc3333; }

/* ============================================================================================================================================================================ */
/* SLIDES + LIGHTENING                                                                                                                          */
/* ============================================================================================================================================================================ */

.rotator-slide
{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    cursor: pointer;
    /* filter: brightness(1.05) contrast(1.03); */
}

.rotator-slide.active
{
    opacity: 1;
    z-index: 1;
}

/* ============================================================================================================================================================================ */
/* OVERLAY + CONTENT                                                                                                                            */
/* ============================================================================================================================================================================ */

.rotator-overlay
{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0.88) 35%,
        rgba(15, 10, 20, 0.55) 55%,
        rgba(10, 10, 10, 0.35) 75%
    );
    display: flex;
    align-items: flex-end;
    padding: 70px 50px 55px 90px;
    z-index: 2;
}

.rotator-content
{
    max-width: 820px;
}

.rotator-date
{
    color: #c9a04f;
    font-size: 1.05rem;
    letter-spacing: 2.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.rotator-title
{
    font-family: 'CelticMD', serif !important;
    color: #ffffff;
    font-size: 2.45rem;
    line-height: 1.15;
    margin: 0 0 18px 0;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95);
    font-weight: 600;
    letter-spacing: 1px;
}

.rotator-cta
{
    display: inline-block;
    color: #c9a04f;
    border: 2px solid #c9a04f;
    padding: 13px 34px;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.rotator-cta:hover
{
    background: #c9a04f;
    color: #111111;
    border-color: #c9a04f;
}

/* ============================================================================================================================================================================ */
/* ARROWS - Using Celtic Knot SVG                                                                                                               */
/* ============================================================================================================================================================================ */

.rotator-arrow
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 10;
    padding: 6px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.rotator-arrow:hover
{
    transform: translateY(-50%) scale(1.15);
    opacity: 0.9;
}

.rotator-prev
{
    left: 18px;
}

.rotator-next
{
    right: 18px;
}

/* Make the Celtic arrow gold */
.rotator-arrow .arrow-icon
{
    filter: brightness(0) saturate(100%) invert(68%) sepia(45%) saturate(500%) hue-rotate(5deg) brightness(1.1);
    transition: filter 0.2s ease, transform 0.2s ease;
}

/* Left arrow - flip horizontally */
.rotator-prev .arrow-icon
{
    transform: scaleX(-1);
}

/* Right arrow stays normal */
.rotator-next .arrow-icon
{
    transform: none;
}

/* Hover effect - keep gold color + slight scale */
.rotator-arrow:hover .arrow-icon
{
    filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.15);
}

/* Preserve horizontal flip on left arrow during hover */
.rotator-prev:hover .arrow-icon
{
    transform: scaleX(-1) scale(1.15);
}

/* ============================================================================================================================================================================ */
/* ROTATOR DOTS - Celtic/Gold theme                                                                                                                                            */
/* ============================================================================================================================================================================ */

.rotator-dots
{
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 30;
    padding: 0;
}

.rotator-dot
{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(201, 160, 79, 0.35);
    border: 2px solid #c9a04f;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.rotator-dot:hover
{
    background: rgba(201, 160, 79, 0.75);
    transform: scale(1.15);
}

.rotator-dot.active
{
    background: #c9a04f;
    transform: scale(1.3);
    box-shadow: 0 0 14px #c9a04f;
}


/* ============================================================================================================================================================================ */
/* [END] OF FEATURED ARTICLE STYLESHEET                                                                                                                                         */
/* ============================================================================================================================================================================ */