/* =========================================================
   FILE: page_content.css
   VERSION: 3
   PAGE: General Internal Page Template
   PROJECT: Jewellery Doctor Redesign
   ========================================================= */

/* TITLE BAR */

.page_title_bar
{
margin-top:-15px;
background:linear-gradient(to bottom, #e2bf58 0%, #c89617 52%, #b57a06 100%);
border-bottom:1px solid #3a3a3a;
box-shadow:none;
position:relative;
z-index:1;
padding-top:6px;
}

.page_title_bar_inner
{
min-height:90px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.page_title_bar h1
{
margin:0;
color:#ffffff;
font-family:'Outfit', sans-serif;
font-weight:700;
font-size:clamp(1.6rem, 2vw, 2.35rem);
line-height:1.1;
letter-spacing:0.01em;
text-align:center;
text-shadow:0 1px 1px rgba(0,0,0,0.18);
}

/* PAGE SHELL */

.page_shell
{
padding:clamp(0.2rem, 0.6vw, 0.45rem) 0 clamp(4.5rem, 7vw, 6.5rem);
background:#ffffff;
}

.page_shell_inner
{
max-width:1240px;
margin:0 auto;
}

/* LAYOUT */

.page_body_grid
{
display:grid;
grid-template-columns:minmax(0, 1.8fr) minmax(300px, 0.82fr);
gap:clamp(1.75rem, 2.8vw, 2.75rem);
align-items:start;
margin-top:0;
}

.page_main_content
{
min-width:0;
}

.page_sidebar
{
display:grid;
gap:1.5rem;
position:relative;
align-self:start;
margin-top:0;
padding-top:0;
}

/* MAIN CONTENT */

.page_content
{
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
padding:0;
color:#4b4b4b;
font-size:clamp(1rem, 1.05vw, 1.08rem);
line-height:1.9;
text-align:justify;
text-justify:inter-word;
}

.page_intro
{
margin:0 0 1.35rem;
font-size:clamp(1rem, 1.15vw, 1.15rem);
line-height:1.85;
color:#4f4f4f;
text-align:justify;
text-justify:inter-word;
}

.page_content p
{
margin:0 0 1.35rem;
}

.page_content h2
{
margin:2.25rem 0 1rem;
font-family:'Outfit', sans-serif;
font-size:clamp(1.4rem, 1.65vw, 1.9rem);
font-weight:700;
line-height:1.2;
color:#181818;
text-align:left;
}

.page_content h3
{
margin:1.9rem 0 0.85rem;
font-family:'Outfit', sans-serif;
font-size:clamp(1.15rem, 1.35vw, 1.45rem);
font-weight:700;
line-height:1.3;
color:#181818;
text-align:left;
}

.page_content h4,
.page_content h5,
.page_content h6
{
margin:1.6rem 0 0.75rem;
font-family:'Outfit', sans-serif;
font-weight:700;
line-height:1.3;
color:#181818;
text-align:left;
}

.page_content h4
{
font-size:1.18rem;
}

.page_content h5
{
font-size:1.05rem;
}

.page_content h6
{
font-size:1rem;
}

.page_content ul,
.page_content ol
{
margin:0 0 1.35rem;
padding-left:1.35rem;
text-align:left;
}

.page_content li
{
margin-bottom:0.55rem;
}

.page_content a
{
color:#8a6500;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:2px;
}

.page_content a:hover,
.page_content a:focus-visible
{
color:#111111;
}

/* IMAGE BLOCK */

.page_feature_media
{
margin:2rem 0;
border-radius:18px;
overflow:hidden;
box-shadow:0 12px 28px rgba(0,0,0,0.12);
background:#f7f7f7;
}

.page_feature_media_link
{
display:block;
position:relative;
color:inherit;
text-decoration:none;
}

.page_feature_media_link:hover,
.page_feature_media_link:focus-visible
{
color:inherit;
}

.page_feature_media img
{
display:block;
width:100%;
height:auto;
aspect-ratio:16 / 9;
object-fit:cover;
}

.page_feature_media_hint
{
position:absolute;
right:0.85rem;
bottom:0.85rem;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.45rem 0.8rem;
border-radius:999px;
background:rgba(17,17,17,0.78);
color:#ffffff;
font-size:0.88rem;
font-weight:600;
line-height:1;
}

/* SIDEBAR PANELS */

.sidebar_panel
{
position:relative;
padding:1.25rem 1.2rem 1.25rem;
border-radius:22px;
border:2px solid rgba(255,255,255,0.38);
box-shadow:0 20px 40px rgba(0,0,0,0.34), 0 10px 22px rgba(0,0,0,0.22);
overflow:hidden;
}

.sidebar_panel::before
{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:0.13;
background:linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%);
}

.sidebar_panel h3
{
margin:0 0 0.75rem;
font-family:'Outfit', sans-serif;
font-size:1.28rem;
font-weight:700;
line-height:1.2;
}

.sidebar_panel p
{
margin:0 0 1rem;
font-size:0.98rem;
line-height:1.7;
}

.sidebar_panel_icon
{
width:42px;
height:42px;
margin:0 0 0.95rem;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:1.15rem;
font-weight:700;
background:rgba(255,255,255,0.18);
backdrop-filter:blur(2px);
}

/* COLOURED SIDEBAR CARDS */

.sidebar_panel_green
{
background:linear-gradient(180deg, #1aa552 0%, #118644 100%);
color:#ffffff;
border-color:#0f6d37;
}

.sidebar_panel_blue
{
background:linear-gradient(180deg, #2978c8 0%, #185c9f 100%);
color:#ffffff;
border-color:#12497d;
}

.sidebar_panel_orange
{
background:linear-gradient(180deg, #ffb347 0%, #ff9800 100%);
color:#ffffff;
border-color:#d87d00;
}

.sidebar_panel_yellow
{
background:linear-gradient(180deg, #f7e38d 0%, #ecd266 100%);
color:#2b2407;
border-color:#c9ae39;
}

.sidebar_panel_red
{
background:linear-gradient(180deg, #d94747 0%, #b81f1f 100%);
color:#ffffff;
border-color:#8f1111;
}

.sidebar_panel_green h3,
.sidebar_panel_blue h3,
.sidebar_panel_orange h3,
.sidebar_panel_red h3,
.sidebar_panel_green p,
.sidebar_panel_blue p,
.sidebar_panel_orange p,
.sidebar_panel_red p
{
color:#ffffff;
}

.sidebar_panel_yellow h3,
.sidebar_panel_yellow p
{
color:#2b2407;
}

/* SIDEBAR BUTTONS */

.button_sidebar
{
display:flex;
width:100%;
min-height:3.25rem;
padding:0.9rem 1rem;
border-radius:999px;
font-size:0.98rem;
font-weight:700;
line-height:1;
text-align:center;
justify-content:center;
align-items:center;
text-decoration:none;
transition:transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.button_sidebar:hover,
.button_sidebar:focus-visible
{
transform:translateY(-2px);
}

.button_sidebar_green
{
background:#ffffff;
border:1px solid #ffffff;
color:#11713c;
box-shadow:0 8px 18px rgba(0,0,0,0.16);
}

.button_sidebar_green:hover,
.button_sidebar_green:focus-visible
{
background:#f3fff8;
border-color:#f3fff8;
color:#11713c;
}

.button_sidebar_yellow
{
background:#111111;
border:1px solid #111111;
color:#ffffff;
box-shadow:0 8px 18px rgba(0,0,0,0.18);
}

.button_sidebar_yellow:hover,
.button_sidebar_yellow:focus-visible
{
background:#ffffff;
border-color:#ffffff;
color:#7e6700;
}

/* TICK LIST */

.sidebar_tick_list
{
margin:0;
padding-left:1.1rem;
}

.sidebar_tick_list li
{
margin-bottom:0.65rem;
line-height:1.55;
}

/* REVIEW BOX */

.sidebar_review_quote
{
margin:0 0 0.9rem;
font-size:1rem;
line-height:1.75;
font-style:italic;
}

.sidebar_review_meta
{
margin:0;
font-size:0.95rem;
font-weight:700;
line-height:1.5;
}

/* FAQ SIDEBAR */

.sidebar_panel_faqs
{
color:#ffffff;
}

.sidebar_panel_faqs h3
{
color:#ffffff;
margin-bottom:0.95rem;
}

.sidebar_faq_list
{
display:grid;
gap:0.75rem;
}

.sidebar_faq_item
{
border:1px solid rgba(255,255,255,0.28);
border-radius:16px;
background:rgba(255,255,255,0.10);
padding:0;
overflow:hidden;
}

.sidebar_faq_item summary
{
position:relative;
display:block;
list-style:none;
cursor:pointer;
padding:1rem 3.2rem 1rem 1rem;
font-family:'Outfit', sans-serif;
font-size:1rem;
font-weight:600;
line-height:1.4;
color:#ffffff;
transition:background-color 0.2s ease;
}

.sidebar_faq_item summary:hover
{
background:rgba(255,255,255,0.06);
}

.sidebar_faq_item summary::-webkit-details-marker
{
display:none;
}

.sidebar_faq_item summary::after
{
content:"+";
position:absolute;
right:0.9rem;
top:50%;
transform:translateY(-50%);
display:flex;
align-items:center;
justify-content:center;
width:1.7rem;
height:1.7rem;
border-radius:50%;
background:rgba(255,255,255,0.16);
border:1px solid rgba(255,255,255,0.28);
color:#ffffff;
font-family:'Outfit', sans-serif;
font-size:1.15rem;
font-weight:700;
line-height:1;
box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.sidebar_faq_item[open] summary::after
{
content:"−";
}

.sidebar_faq_answer
{
padding:0 1rem 1rem;
}

.sidebar_faq_answer p
{
margin:0 0 0.75rem;
font-size:0.95rem;
line-height:1.7;
color:#ffffff;
}

.sidebar_faq_answer p:last-child
{
margin-bottom:0;
}

.sidebar_faq_answer ul,
.sidebar_faq_answer ol
{
margin:0 0 0.75rem 1.1rem;
padding:0;
color:#ffffff;
}

.sidebar_faq_answer li
{
margin-bottom:0.45rem;
line-height:1.6;
}

.sidebar_faq_answer a
{
color:#ffffff;
text-decoration:underline;
text-underline-offset:2px;
}

/* SPACING BEFORE FOOTER */

.social_media_bar,
.footer_bar,
footer,
.site_footer
{
margin-top:0;
}

.page_shell + .social_media_bar,
.page_shell + .footer_bar
{
margin-top:0;
}

/* RESPONSIVE */

@media (max-width: 1100px)
{
.page_title_bar
{
margin-top:-23px;
padding-top:0;
}

.page_body_grid
{
grid-template-columns:minmax(0, 1fr) 310px;
}
}

@media (max-width: 900px)
{
.page_title_bar
{
margin-top:-23px;
padding-top:0;
}

.page_shell
{
padding:1.2rem 0 4.5rem;
}

.page_body_grid
{
grid-template-columns:1fr;
gap:1.75rem;
}

.page_sidebar
{
order:2;
gap:1.75rem;
padding-bottom:1rem;
}

.page_main_content
{
order:1;
}
}

@media (max-width: 767px)
{
.page_title_bar
{
margin-top:-23px;
padding-top:0;
}

.page_title_bar_inner
{
min-height:78px;
}

.page_title_bar h1
{
font-size:clamp(1.45rem, 6.4vw, 1.95rem);
}

.page_shell
{
padding:0.8rem 0 4.75rem;
}

.page_shell .container
{
width:min(100% - 2.5rem, var(--container-max));
}

.page_intro
{
font-size:1.08rem;
line-height:1.9;
text-align:left;
}

.page_content
{
font-size:1.08rem;
line-height:1.95;
text-align:left;
}

.page_content h2
{
margin:2rem 0 1rem;
font-size:1.62rem;
text-align:center;
}

.page_content h3
{
font-size:1.28rem;
text-align:center;
}

.page_content h4,
.page_content h5,
.page_content h6
{
text-align:center;
}

.page_content ul,
.page_content ol
{
text-align:left;
}

.page_content li
{
line-height:1.7;
}

.page_sidebar
{
gap:1.5rem;
padding-bottom:1.75rem;
}

.sidebar_panel
{
padding:1.2rem 1rem 1.2rem;
border-radius:18px;
border:2px solid rgba(0,0,0,0.08);
box-shadow:0 4px 8px rgba(0,0,0,0.12), 0 10px 18px rgba(0,0,0,0.12);
}

.sidebar_panel h3
{
font-size:1.22rem;
}

.sidebar_panel p
{
font-size:1rem;
line-height:1.75;
}

.sidebar_faq_item summary
{
padding:0.95rem 3rem 0.95rem 0.95rem;
font-size:0.98rem;
}

.sidebar_faq_item summary::after
{
right:0.8rem;
width:1.6rem;
height:1.6rem;
font-size:1.05rem;
}

.sidebar_faq_answer
{
padding:0 0.95rem 0.95rem;
}

.page_feature_media_hint
{
font-size:0.8rem;
padding:0.42rem 0.7rem;
}
}