/* =====================================
   MELANNIE SERVICES
   LEGAL PAGE STYLES
   Privacy Policy & Terms
===================================== */

/* =====================================
   LEGAL HERO
===================================== */

.legal-hero{

background:
linear-gradient(
rgba(255,255,255,.92),
rgba(255,255,255,.92)
),
url('../images/legal-background.jpg');

background-size:cover;

background-position:center;

text-align:center;

}

.legal-hero h1{

font-size:3.5rem;

margin-bottom:15px;

}

.legal-hero p{

font-size:1.1rem;

color:var(--gray);

}

/* =====================================
   LEGAL CONTAINER
===================================== */

.legal-container{

max-width:1000px;

margin:auto;

background:white;

padding:60px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

/* =====================================
   HEADINGS
===================================== */

.legal-container h1{

margin-bottom:25px;

}

.legal-container h2{

margin-top:40px;

margin-bottom:15px;

color:var(--primary);

font-size:1.8rem;

border-bottom:
2px solid var(--secondary);

padding-bottom:10px;

}

.legal-container h3{

margin-top:25px;

margin-bottom:10px;

color:var(--dark);

}

/* =====================================
   PARAGRAPHS
===================================== */

.legal-container p{

margin-bottom:18px;

line-height:1.9;

color:var(--dark);

}

/* =====================================
   LISTS
===================================== */

.legal-container ul,
.legal-container ol{

margin-left:25px;

margin-bottom:25px;

}

.legal-container li{

margin-bottom:10px;

line-height:1.8;

}

/* =====================================
   LINKS
===================================== */

.legal-container a{

color:var(--primary);

font-weight:600;

}

.legal-container a:hover{

text-decoration:underline;

}

/* =====================================
   BLOCKQUOTES
===================================== */

.legal-container blockquote{

margin:25px 0;

padding:20px;

background:var(--secondary);

border-left:
5px solid var(--primary);

border-radius:10px;

font-style:italic;

}

/* =====================================
   TABLES
===================================== */

.legal-container table{

width:100%;

border-collapse:collapse;

margin:25px 0;

}

.legal-container th{

background:var(--primary);

color:white;

padding:15px;

text-align:left;

}

.legal-container td{

padding:15px;

border:
1px solid #e5e5e5;

}

.legal-container tr:nth-child(even){

background:#fafafa;

}

/* =====================================
   NOTICE BOXES
===================================== */

.notice-box{

background:#fff8e1;

border-left:
5px solid var(--gold);

padding:20px;

margin:25px 0;

border-radius:10px;

}

.notice-box strong{

display:block;

margin-bottom:10px;

}

/* =====================================
   CONTACT BOX
===================================== */

.legal-contact{

margin-top:40px;

padding:30px;

background:var(--secondary);

border-radius:var(--radius);

}

.legal-contact h3{

margin-bottom:15px;

color:var(--primary);

}

.legal-contact p{

margin-bottom:10px;

}

/* =====================================
   LAST UPDATED
===================================== */

.last-updated{

display:inline-block;

padding:10px 20px;

background:var(--secondary);

border-radius:30px;

font-size:.95rem;

font-weight:600;

margin-top:10px;

}

/* =====================================
   SECTION DIVIDERS
===================================== */

.legal-divider{

height:1px;

background:#eee;

margin:40px 0;

}

/* =====================================
   PRINT STYLES
===================================== */

@media print{

header,
footer,
.top-bar,
.btn-primary,
.btn-secondary,
#backToTop{

display:none !important;

}

body{

background:white;

color:black;

}

.legal-container{

box-shadow:none;

padding:0;

max-width:100%;

}

}

/* =====================================
   TABLET
===================================== */

@media(max-width:992px){

.legal-container{

padding:40px;

}

.legal-hero h1{

font-size:3rem;

}

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

.legal-container{

padding:30px 20px;

}

.legal-hero h1{

font-size:2.4rem;

}

.legal-container h2{

font-size:1.5rem;

}

.legal-container table{

display:block;

overflow-x:auto;

}

}

/* =====================================
   SMALL MOBILE
===================================== */

@media(max-width:480px){

.legal-hero h1{

font-size:2rem;

}

.legal-container{

padding:20px 15px;

}

.legal-container h2{

font-size:1.3rem;

}

.legal-container p,
.legal-container li{

font-size:.95rem;

}

}